Tag Berkaitan Jadual

Dalam artikel ini, kami menerangkan tag berkaitan jadual.

Ini menjelaskan cara menerangkan jadual dan kapsyen jadual dalam HTML bersama dengan contoh.

YouTube Video

Tag Berkaitan Jadual

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 jadual yang mengatur dan memaparkan data dalam baris dan lajur.

  Tag <table> menyusun data secara visual dan membuat jadual dengan pelbagai baris dan lajur. Baris ditakrifkan dengan tag <tr>, sel tajuk dengan tag <th>, dan sel data dengan tag <td>.

• Anda boleh menyesuaikan gaya dan susun atur jadual 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 jadual.

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

• Setiap baris boleh mengandungi pelbagai sel, membentuk struktur keseluruhan jadual.

Tag <th> dan <td>

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

• Tag <th> mentakrifkan sel tajuk jadual. Biasanya digunakan dalam baris tajuk, kandungan sel adalah tebal dan di tengah.
• Tag <td> mentakrifkan sel data jadual standard, yang memaparkan data jadual 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 ialah atribut yang digunakan apabila sel jadual merangkumi beberapa lajur atau baris.

• Atribut colspan membolehkan sebuah sel merentasi berbilang lajur.
• Atribut rowspan membolehkan sel melintasi 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 menentukan bahagian header jadual. Ia biasanya mengandungi header lajur.

  Tag <thead> terletak di bahagian atas jadual, menentukan tajuk atau header lajur. Ini membantu untuk membezakan bahagian data dengan jelas.

• Tag <tbody> menentukan bahagian badan jadual. Ia mengandungi baris data.

  Tag <tbody> mengandungi badan utama data jadual. Ia diletakkan antara baris yang dikelilingi oleh tag <thead> dan <tfoot>.

• Tag <tfoot> menentukan bahagian footer jadual, yang merangkumi jumlah keseluruhan atau nota.

  Tag <tfoot> terletak di akhir jadual dan digunakan untuk memaparkan jumlah keseluruhan atau anotasi lain. Ia amat berguna apabila membuat ringkasan atau menunjukkan jumlah keseluruhan untuk set data yang besar.

<caption> dan tag <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> menambah kapsyen (tajuk) untuk menjadikan kandungan jadual lebih jelas. Ia biasanya diletakkan di bahagian atas jadual dan berfungsi untuk merumuskan kandungan keseluruhan jadual.

• Tag <colgroup> mengelompokkan lajur dalam jadual dan digunakan untuk mengenakan gaya atau susun atur. Anda boleh menetapkan warna latar belakang atau lebar untuk lajur tertentu dengan memasukkan tag <col>.

Contoh jadual

 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 jadual yang memaparkan data dalam baris dan lajur.

• Tag <thead> mengumpulkan baris tajuk jadual. Ia biasanya mengandungi tag <th>, yang berfungsi sebagai tajuk.

• Tag <tbody> mengumpulkan kandungan utama jadual. Ia biasanya mengandungi baris data yang terdiri daripada tag <td>.

• Tag <tfoot> mengumpulkan baris kaki jadual. Ia sesuai untuk memaparkan jumlah atau nota.

• Tag <colgroup> mengumpulkan lajur jadual dan digunakan untuk menerapkan gaya kepada mereka secara keseluruhan.

• Tag <caption> menambah kapsyen atau tajuk pada jadual, memudahkan pengguna memahami kandungan jadual.

• Atribut colspan membolehkan sebuah sel merentasi berbilang lajur.

• Atribut rowspan membolehkan sel melintasi beberapa baris.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video