Cara membuat tabel dalam bentuk kolom dan baris menyatu (Marge). Pada postingan sebelumnya saya telah membahas dasar dari Cara membuat tabel HTML. Nah kali ini saya akan melanjutkannya dengan membuat tabel yang mana kolom atau barisnya manyatu. Perhatikan contoh hasil akhir di bawah ini.
| baris 1 kolom 1 | baris 1 kolom 2 & 3 | baris 1 kolom 4 | |
| baris 2 & 3 kolom 1 | baris 2 kolom 2 | baris 2 kolom 3 | baris 2 kolom 4 |
| baris 3 kolom 2 | baris 3 kolom 3 | baris 3 kolom 4 | |
Lihat pada kolom 2 & 3 di baris pertama yang menyatu. Itulah marge dari kedua kolom yang disatukan. Bagaimana cara membuatnya? Ada dua jenis atribut marge.
- colspan = menyatukan kolom
- rowspan = menyatukan baris
Attribut ini di letakkan pada tag <td> pada kolom/baris tabel pertama yang ingin disatukan.
Perhatikan cara pembuatnanya dalam contoh sintak di bawah ini:
<table border=1>
<tr>
<td>baris 1 kolom 1</td>
<td colspan=2>baris 1 kolom 2 & 3</td>
<td>baris 1 kolom 4</td>
</tr>
<tr>
<td rowspan=2>baris 2 & 3 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
<td>baris 2 kolom 4</td>
</tr>
<tr>
<td>baris 3 kolom 2</td>
<td>baris 3 kolom 3</td>
<td>baris 3 kolom 4</td>
</tr>
</table>
<tr>
<td>baris 1 kolom 1</td>
<td colspan=2>baris 1 kolom 2 & 3</td>
<td>baris 1 kolom 4</td>
</tr>
<tr>
<td rowspan=2>baris 2 & 3 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
<td>baris 2 kolom 4</td>
</tr>
<tr>
<td>baris 3 kolom 2</td>
<td>baris 3 kolom 3</td>
<td>baris 3 kolom 4</td>
</tr>
</table>
Maka, hasil dari sintak di atas adalah seperti berikut
| baris 1 kolom 1 | baris 1 kolom 2 & 3 | baris 1 kolom 4 | |
| baris 2 & 3 kolom 1 | baris 2 kolom 2 | baris 2 kolom 3 | baris 2 kolom 4 |
| baris 3 kolom 2 | baris 3 kolom 3 | baris 3 kolom 4 | |
Penjelasan:
Ada pemotongan sintak <td> karena telah disatukan menjadi kolom atau baris. Perhatikan pada baris 1. hanya terdapat 3 tag <td> karena kolom 2 & 3 telah menyatu dengan atribut colspan=2. nilai 2 dari colspan artinya kolom yang dimarge berjumlah 2 yaitu kolom 2 & 3.
Sedangkan pada baris 2 menggunakan rowspan=2. menyatukan baris 2 & 3 pada masing-masing kolom 1. sehingga pada baris 3 hanya terdapat 3 tag <td>.
Silahkan Anda pelajari lebih seksama penggunaan attribut colspan dan rowspan dalam menyatukan tabel pada contoh di atas.
Demikian tutorial hari ini. Selanjutnya kita akan membahas bagaimana membuat tabel dan menghiasnya dengan CSS serta beberapa attribut penting lainnya. Sampai jumpa.