Header Tabel HTML
Tabel HTML dapat memiliki header untuk setiap kolom atau baris, atau untuk banyak kolom/baris.
| EMIL | TOBIAS | LINU |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| SEN | SELASA | MENIKAHI | MENGUMPULKAN | JUMAT | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| DESEMBER | ||
|---|---|---|
Header Tabel HTML
Header tabel didefinisikan dengan thelemen, setiap thelemen mewakili sel tabel.
Contoh
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Header Tabel Vertikal
Untuk menggunakan kolom pertama sebagai header tabel, tentukan sel pertama di setiap baris sebagai thelemen:
Contoh
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Sejajarkan Header Tabel
Secara default, header tabel dicetak tebal dan di tengah:
| Nama depan | Nama keluarga | Usia |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
Untuk meratakan kiri header tabel, gunakan text-alignproperti CSS:
Contoh
th {
text-align: left;
}
Tajuk untuk Beberapa Kolom
Anda dapat memiliki tajuk yang membentang lebih dari dua kolom atau lebih.
| Nama | Usia | |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
Untuk melakukan ini, gunakan colspanatribut pada
<th>elemen:
Contoh
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Anda akan mempelajari lebih lanjut tentang colspan dan rowspan di bab Tabel colspan & rowspan .
Keterangan Tabel
Anda dapat menambahkan keterangan yang berfungsi sebagai judul untuk seluruh tabel.
| Bulan | Tabungan |
|---|---|
| Januari | $100 |
| Februari | $50 |
Untuk menambahkan keterangan ke tabel, gunakan <caption>tag:
Contoh
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Catatan: Tag <caption>harus dimasukkan segera setelah <table>tag.