Tag yang Berhubungan dengan Tabel

Dalam artikel ini, kami menjelaskan tag yang berhubungan dengan tabel.

Ini menjelaskan cara mendeskripsikan tabel dan keterangan tabel dalam HTML beserta contohnya.

YouTube Video

Tag yang Berhubungan dengan Tabel

Tag <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• Tag <table> digunakan untuk membuat tabel yang mengatur dan menampilkan data dalam baris dan kolom.

  Tag <table> secara visual mengatur data dan membuat tabel dengan beberapa baris dan kolom. Baris didefinisikan dengan tag <tr>, sel header dengan tag <th>, dan sel data dengan tag <td>.

• Anda dapat menyesuaikan gaya dan tata letak tabel menggunakan CSS.

Tag <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• Tag <tr> digunakan untuk mendefinisikan baris dalam tabel.

  Tag <tr> digunakan untuk membuat setiap baris tabel, yang berisi sel (<td> atau <th>).

• Setiap baris dapat berisi beberapa sel, membentuk struktur keseluruhan tabel.

Tag <th> dan <td>

1<th>Header 1</th>
2<td>Data 1</td>

• Tag <th> mendefinisikan sel header tabel. Biasanya digunakan dalam baris header, konten sel dicetak tebal dan rata tengah.
• Tag <td> mendefinisikan sel data tabel standar, yang menampilkan data tabel biasa.

Atribut colspan dan rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan dan rowspan adalah atribut yang digunakan ketika sel tabel mencakup beberapa kolom atau baris.

• Atribut colspan memungkinkan sebuah sel membentang melintasi beberapa kolom.
• Atribut rowspan memungkinkan suatu sel mencakup beberapa baris.

Tag <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• Tag <thead> digunakan untuk mendefinisikan bagian header dari tabel. Ini biasanya berisi judul kolom.

  Tag <thead> ditempatkan di bagian atas tabel, mendefinisikan judul atau header kolom. Ini membantu untuk membedakan bagian data dengan jelas.

• Tag <tbody> mendefinisikan bagian tubuh dari tabel. Ini berisi baris data.

  Tag <tbody> berisi badan utama dari data tabel. Ini ditempatkan antara baris yang terbungkus oleh tag <thead> dan <tfoot>.

• Tag <tfoot> mendefinisikan bagian footer dari tabel, yang mencakup total atau catatan.

  Tag <tfoot> terletak di akhir tabel dan digunakan untuk menampilkan total atau anotasi lainnya. Ini sangat berguna ketika merangkum atau menampilkan total untuk kumpulan data yang besar.

Tag <caption> dan <colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• Tag <caption> menambahkan keterangan (judul) untuk membuat isi tabel lebih jelas. Ini biasanya ditempatkan di bagian atas tabel dan berfungsi untuk merangkum keseluruhan isi tabel.

• Tag <colgroup> mengelompokkan kolom dalam tabel dan digunakan untuk menerapkan gaya atau tata letak. Anda dapat menentukan warna latar belakang atau lebar untuk kolom tertentu dengan menyertakan tag <col>.

Contoh tabel

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• Tag <table> digunakan untuk membuat tabel yang menampilkan data dalam baris dan kolom.

• Tag <thead> mengelompokkan baris header dari tabel. Biasanya berisi tag <th>, yang berfungsi sebagai header.

• Tag <tbody> mengelompokkan konten utama dari tabel. Biasanya berisi baris data yang terdiri dari tag <td>.

• Tag <tfoot> mengelompokkan baris footer dari tabel. Tag ini cocok untuk menampilkan total atau catatan.

• Tag <colgroup> mengelompokkan kolom dari tabel dan digunakan untuk menerapkan gaya pada seluruh kolom.

• Tag <caption> menambahkan keterangan atau judul pada tabel, sehingga mempermudah pengguna untuk memahami isi tabel.

• Atribut colspan memungkinkan sebuah sel membentang melintasi beberapa kolom.

• Atribut rowspan memungkinkan suatu sel mencakup beberapa baris.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video