Tabel HTML
Tabel HTML memungkinkan pengembang web untuk mengatur data ke dalam baris dan kolom.
Contoh
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Tentukan Tabel HTML
Sebuah tabel dalam HTML terdiri dari sel tabel di dalam baris dan kolom
Contoh
Sebuah tabel HTML sederhana:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Sel Tabel
Setiap sel tabel didefinisikan oleh a
<td>dan </td>tag.
td
singkatan dari tabel data.
Segala sesuatu di antara <td>dan </td>adalah konten sel tabel.
Contoh
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Catatan: elemen data tabel adalah wadah data tabel.
Mereka dapat berisi semua jenis elemen HTML; teks, gambar, daftar, tabel lain, dll.
Baris Tabel
Setiap baris tabel dimulai dengan a
<tr>dan diakhiri dengan </tr>tag.
tr
singkatan dari tabel baris.
Contoh
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Anda dapat memiliki baris sebanyak yang Anda suka dalam sebuah tabel, pastikan jumlah selnya sama di setiap baris.
Catatan: Ada kalanya baris dapat memiliki lebih sedikit atau lebih banyak sel daripada yang lain. Anda akan mempelajarinya di bab selanjutnya.
Tabel Header
Terkadang Anda ingin sel Anda menjadi tajuk, dalam kasus tersebut gunakan
<th>tag alih-alih
<td>tag:
Contoh
Biarkan baris pertama menjadi header tabel:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Secara default, teks dalam <th>elemen dicetak tebal dan di tengah, tetapi Anda dapat mengubahnya dengan CSS.
Latihan HTML
Tag Tabel HTML
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .