Membuat tabel pada halaman HTMl bisa dibilang cukup simpel. Tag yang digunakan adalah <table>…</table>. Isi tabel terbagi menjadi 2 bagian, yakni header dan body. Header tabel ditunjukkan dengan tag <thead>…</thead>. Sedangkan body ditunjukkan dengan tag <tbody>…</tbody>.Untuk menambahkan baris, kita bisa menggunakan <tr>…</tr>. Untuk mengisi data, jika data itu berupa header, kita bisa menggunakan tag <th>…</th>, sedangkan untuk body, kita bisa menggunakan <td>…</td>.

Berikut adalah format penulisan script tabel.

<table>
    <thead>
        <tr>
        	<th>...</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
    		<td>...</td>
    	</tr>
    </tbody>
</table>

Tag <table> memiliki beberapa atribut, antara lain:

  • Cellspacing, untuk menentukan jarak antar sel.
  • Cellpadding, untuk menentukan jarak isi sel dengan bordernya.
  • Width, untuk mengatur lebar tabel.
  • Height, untuk mengatur tinggi tabel.
  • Bgcolor, untuk memberi warna background pada tabel.
  • Align, untuk menentukan perataan tabel.
  • Border, untuk menentukan tebal border tabel.

Atribut juga diberikan pada tag <td>, dan <tr>. Diantaranya:

  • Align, untuk menentukan perataan teks
  • Valign, untuk menentukan perataan teks secara vertikal.
  • Width, untuk mengatur lebar sel.
  • Height, untuk mengatur tinggi sel.
  • Bgcolor, untuk memberi warna background pada sel.
  • Rowspan, untuk menggabungkan sel baris berikutnya pada kolom yang sama
  • Colspan, untuk menggabungkan sel kolom berikutnya pada baris yang sama.

Sayangnya, hampir semua atribut tersebut tidak disupport pada HTML5, kecuali rowspan dan colspan. Untuk lebih jelasnya, perhatikan contoh di bawah ini.

<!DOCTYPE HTML>
<html>
<head>
	<title>Tabel</title>
</head>
<body>
<h1>Jadwal Ujian</h1>
<table width="90%" border="1" cellspacing="0">
    <thead>
        <tr>
        	<th>Hari</th>
        	<th>Jam Pertama</th>
        	<th>Jam kedua</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
    		<td>Senin</td>
    		<td align="center">Bahasa Indonesia</td>
    		<td align="center">Matematika</td>
    	</tr>
    	<tr>
    		<td>Selasa</td>
    		<td align="center">Bahasa Inggris</td>
    		<td align="center">Kejuruan</td>
    	</tr>
    </tbody>
</table>
</body>
</html>
Tabel

Skrip di atas memiliki ukuran lebar tabel sebesar 90% dari layar browser. Hasilnya sebagai berikut:

Tabel pada HTML

Dari skrip di atas, kita bisa sedikit memodifikasinya, dengan menggabungkan beberapa sel, yang disebut dengan span. Untuk menggabungkan beberapa sel, kita bisa menggunakan colspan dan rowspan. Pada atribut colspan dan rwospan, terdapat nilai yang menunjukkan berapa kolom atau baris yang ingin digabungkan.

Perhatikan script berikut.

<!DOCTYPE HTML>
<html>
<head>
	<title>Tabel</title>
</head>
<body>
<h1>Jadwal Ujian</h1>
<table width="90%" border="1" cellspacing="0">
    <thead>
        <tr>
        	<th rowspan="2">Hari</th>
        	<th colspan="2">Jam</th>
        </tr>
        <tr>
        	<th>Pertama</th>
        	<th>Kedua</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
    		<td>Senin</td>
    		<td align="center">Bahasa Indonesia</td>
    		<td align="center">Matematika</td>
    	</tr>
    	<tr>
    		<td>Selasa</td>
    		<td align="center">Bahasa Inggris</td>
    		<td align="center">Kejuruan</td>
    	</tr>
    </tbody>
</table>
</body>
</html>
Tabel dengan rowspan dan colspan

Hasilnya sebagai berikut.

Tabel HTML dengan Colspan dan Rowspan

Terlihat bedanya bukan??

Seperti itulah pembuatan tabel pada halaman HTML. Sebagai tambahan, selain untuk membuat tabel, kita bisa menggunakan tag <table> untuk membuat layout sebuah halaman HTML. Semoga bermanfaat. 🙂

Anda bisa mengunjungi kami di website dengan klik di sini, atau Subscribe channel kami di sini.