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.