Pembuatan Tabel Pada HTML

1.     Anatomi Table Minimal

Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

<table border="1">

<tr>

<td>Cell 1 Kolom 1</td>

</tr>

</table>

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">

<tr>

<td>Cell 1 - Baris 1 Kolom 1</td>

<td>Cell 2 - Baris 1 Kolom 2</td>

</tr>

<tr>

<td>Cell 3 - Baris 2 Kolom 1</td>

<td>Cell 4 - Baris 2 Kolom 2</td>

</tr>

<tr>

<td>Cell 5 - Baris 3 Kolom 1</td>

<td>Cell 6 - Baris 3 Kolom 2</td>

</tr>

</table>

Hasil:

Cell 1 – Baris 1 Kolom 1	Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1	Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1	Cell 6 – Baris 3 Kolom 2

*          Mengatur lebar dan tinggi tabel

Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.

Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%" height=”80%”>

<tr>

<td width=”50%” height=”40px”>Baris 1 Kolom 1</td>

<td>Baris 1 Kolom 1</td>

</tr>

<tr>

<td>Baris 2 Kolom 1</td>

<td>Baris 2 Kolom 2</td>

</tr>

<tr>

<td>Baris 3 Kolom 1</td>

<td>Baris 3 Kolom 2</td>

</tr>

</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2