Cara Membuat Tabel (Tahap 1)

Tutorial Blog kali ini saya akan membahas bagaimana cara membuat tabel. Karena tabel sangat penting dan sering diperlukan ketika kita edit atau posting artikel pada web atau blog. Biasanya tabel digunakan untuk membuat Daftar atau forum. Tapi dengan tabel kita juga bisa membuat artikel kita menjadi beberapa Kolom atau Layout, seperti halnya yang sering kita lihat kolom-kolom yang ada di Koran atau majalah.

Untuk membuat tabel, ada beberapa unsur elemenatau atribut html yang kita butuhkan, yaitu :
-    Table width : nilai lebar tabel keseluruhan.
-    Border : nilai ketebalan garis
-    Baris tabel ditandai dengan tag awal <tr> dan tag akhir </tr>
-    Kolom tabel ditandai dengan tag awal <td> dan tag akhir </td>

Silahkan anda  perhatikan cara penulisan kode untuk membuat tabel :

1. Tabel 1 kolom, dan 1 baris
<table width="500" border="1">
<tr>
<td scope="col">Tabel 1 kolom, dan 1 baris</td>
</tr>
</table>

Berikut hasilnya :
Tabel 1 kolom, dan 1 baris


2. Tabel 1 kolom, dan 2 baris
Untuk membuat tabel 2 baris dan seterusnya, kita tinggal menambahkan elemen tag <tr></tr>  diantara tag <table> </table>  yaitu :

<table width="500" border="1">
<tr>
<td>Tabel 1 kolom, dan baris pertama</td>
</tr>
<tr>
<td>Tabel 1 kolom, dan baris kedua</td>
</tr>
</table>

Berikut hasilnya :
Tabel 1 kolom, dan baris pertama
Tabel 1 kolom, dan baris kedua


3. Tabel 2 kolom, dan 1 baris
Untuk membuattabel 2 kolom dan seterusnya kita tinggal menambahkan elemen tag <td></td> diantara <tr></tr>  yaitu :

<table width="500" border="1">
<tr>
<td> Kolom Pertama</td>
<td>Kolom Kedua</td>
</tr>
</table>

Berikut hasilnya :
Kolom Pertama Kolom Kedua


4. Tabel 2 kolom dengan 2 baris

<table width="500" border="1">
<tr>
<td>Baris pertama dan Kolom Pertama</td>
<td>Baris pertama dan Kolom Kedua </td>
</tr>
<tr>
<td>Baris Kedua dan Kolom Pertama</td>
<td>Baris Kedua dan Kolom Kedua</td>
</tr>
</table>

Berikut hasilnya :
Baris pertama dan Kolom Pertama Baris pertama dan Kolom Kedua
Baris Kedua dan Kolom Pertama Baris Kedua dan Kolom Kedua


5. Tabel dengan garis tebal
Garis tebal ditentukan oleh Nilai border, semakin besar nilainya semakin Tebal garisnya dan terlihat seperti 3D (efek bevel)

<table width="500" border="5">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
Teks


6. Tabel dengan garis berwarna
Untuk memberi  warna border kita tinggal menambah  “bordercolor

<table width="0" border="1" bordercolor="#3083FF">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
Teks


7. Tabel dengan warna background sama
Untuk memberi warna Background dengan warna sama seluruh tabel kita tinggal menambah  “bgcolor “.

<table width="500" border="1" bgcolor="#00FF00">
<tr>
<td><div align="center">Teks</div></td>
<td><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
Teks
Teks


8. Tabel dengan warna beda
Untuk memberi warna Background dengan warna berbeda pada setiap kolomnya :

<table width="500" border="1">
<tr>
<td bgcolor="#D9F5FF"><div align="center">Teks</div></td>
<td bgcolor="#E1FACD"><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
Teks
Teks


9. Tabel dengan Judul

<table width="500" border="1">


<tr> <th colspan="100%" scope="col"bgcolor="#FFF7DB">JUDUL TABEL</th> </tr>
<tr>
<td bgcolor="#E4FADE"><div align="center"><strong>Judul Kolom 1</strong></div></td>
<td bgcolor="#EDFBFF"><div align="center"><strong>Judul Kolom 2</strong></div></td>
<td bgcolor="#FDF0FF"><div align="center"><strong>Judul Kolom 3</strong></div></td>
</tr>
<tr>
<td bgcolor="#E4FADE"><div align="center">Teks</div></td>
<td bgcolor="#EDFBFF"><div align="center">Teks</div></td>
<td bgcolor="#FDF0FF"><div align="center">Teks</div></td>
</tr>
<td bgcolor="#E4FADE"><div align="center">Teks</div></td>
<td bgcolor="#EDFBFF"><div align="center">Teks</div></td>
<td bgcolor="#FDF0FF"><div align="center">Teks</div></td>
</tr>
</table>

Berikut hasilnya :
JUDUL TABEL
Judul Kolom 1
Judul Kolom 2
Judul Kolom 3
Teks
Teks
Teks
Teks
Teks
Teks

Nah....., Silahkan anda bisa otak - atik sendiri sesuai selera anda. Semoga bermanfaat.
Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.

1 komentar: