Membuat tabel dengan tag HTML seperti <table>, <tr>, dan <td>
Cara yang umum digunakan untuk mengorganisasi data dalam bentuk tabular di HTML.
tag <table> digunakan untuk membuat tabel utama. Di dalam tag <table>, kita akan menambahkan baris menggunakan tag <tr> (table row). Setiap baris akan berisi sel-sel data yang ditempatkan di dalam tag <td> (table data/cell).
Berikut adalah contoh penggunaan tag <table>, <tr>, dan <td> untuk membuat tabel sederhana dengan 2 baris dan 3 kolom:
<table> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table>
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
Dalam contoh di atas, terdapat tabel dengan 2 baris (<tr>) dan 3 kolom (<td>) di setiap baris. Setiap sel (<td>) berisi data yang ingin ditampilkan di dalam sel-sel tabel.
Mengatur sel-sel tabel, baris, dan kolom
- rowspan: Untuk mengatur sel yang lebih besar dari satu baris.
- colspan: Untuk mengatur sel yang lebih besar dari satu kolom.
- style: Untuk mengatur gaya sel, seperti warna latar belakang, warna teks, padding, margin, dll.
Berikut adalah contoh penggunaan atribut-atribut tersebut:
<table> <tr> <td rowspan="2">Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td colspan="2" style="background-color: #ff0000; color: #ffffff;">Data 4</td> </tr> </table>
| Data 1 | Data 2 | Data 3 |
| Data 4 | ||
Dalam contoh di atas, pada baris pertama sel pertama memiliki atribut rowspan="2" yang membuat sel tersebut mencakup 2 baris. Pada baris kedua, sel pertama memanfaatkan pengaturan rowspan yang dibuat sebelumnya. Selanjutnya, pada sel kedua, atribut colspan="2" digunakan untuk membuat sel tersebut mencakup 2 kolom. Selain itu, menggunakan atribut style, kita dapat mengatur latar belakang dan warna teks dari sel tersebut.