Ada beberapa tag yang harus diingat untuk membuat tabel di HTML, namun pada dasarnya kita sudah dapat membuat tabel hanya dengan menggunakan 3 tag HTML diantaranya:
- <table> untuk membuat tabel
- <tr> tabel row untuk membuat baris
- <td> tabel data untuk membuat sel atau kolom di setiap baris
Selain itu, HTML juga menyediakan tag-tag opsional lain dalam membuat tabel, diantaranya:
- <thead> untuk membuat bagian kepala tabel
- <tbody> untuk membuat bagian body dari tabel
- <th> tabel head untuk membuat judul pada header atau kepala tabel
Nah mari kita lihat contohnya:
Hasilnya:
Nah tabel yang tampil tidak memiliki garis, oleh karena itu untuk menampilkan garis pada tabelnya kita tambahkan atribut border=”1” di dalam tag <table>. Nilai “1” pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan semakin besar pula garisnya.
Hasilnya:
Nah tabel yang tampil tidak memiliki garis, oleh karena itu untuk menampilkan garis pada tabelnya kita tambahkan atribut border=”1” di dalam tag <table>. Nilai “1” pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan semakin besar pula garisnya.
Hasilnya
Untuk mengatur posisi teks pada tabel kita bisa nambahkan atribut align=”center” di dalam tag <td>. “center” pada atribut align dapat diganti sesuai dengan posisi yang diinginkan misalnya left ataupun right.
Hasilnya
Menggabungkan Sel pada Tabel HTML
Saat membuat tabel, terkadang kita ingin menggabungkan beberapa sel menjadi satu. Untuk menggabungkannya kita bisa menggunakan atribut rowspan dan colspan di dalam tag <td> atau <th> sesuai dengan kebutuhan.
- Atribut rowspan digunakan untuk menggabungkan baris pada tabel
- Atribut colspan digunakan untuk menggabungkan kolom pada tabel
Sebagai contoh:
Atribut rowspan pada kode di atas artinya baris yang akan digabungkan berjumlah 2 baris. Sementara untuk atribut colspan artinya kolom yang akan digabungkan berjumlah 3 kolom. Pada kode di atas menggunakan tag <th> yang berfungsi sebagai tabel head, dimana saat ditampilkan, data yang berada dalam tag <th> akan memiliki efek bold atau lebiih tebal dibandingkan data yang berada dalam tag <td>.
Hasilnya
Bagaimana, cukup mudah bukan? Hal yang perlu diperhatikan dalam membuat tabel adalah penggunaan rowspan dan colspan, karena kita perlu teliti dalam menentukan berapa ukuran sel yang akan diterapkan pada rowspan maupun colspan.
Selamat Mencoba…