Mga Tag na Kaugnay sa Talahanayan

Sa artikulong ito, ipinaliwanag namin ang mga tag na kaugnay sa talahanayan.

Ipinaliwanag dito kung paano ilarawan ang mga talahanayan at mga caption ng talahanayan sa HTML, kasama ang mga halimbawa.

YouTube Video

Mga Tag na Kaugnay sa Talahanayan

Tag na <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>

• Ang tag na <table> ay ginagamit upang lumikha ng isang talahanayan na nag-aayos at nagpapakita ng datos sa mga hanay at kolum.

  Ang tag na <table> ay biswal na nag-aayos ng datos at lumilikha ng mga talahanayan na may iba't ibang hanay at kolum. Ang mga hanay ay tinutukoy gamit ang tag na <tr>, mga selda ng header gamit ang tag na <th>, at mga selda ng data gamit ang tag na <td>.

• Maaari mong i-customize ang istilo at layout ng talahanayan gamit ang CSS.

Tag na <tr>

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

• Ang tag na <tr> ay ginagamit upang tukuyin ang mga hanay sa isang talahanayan.

  Ang tag na <tr> ay ginagamit upang lumikha ng bawat hanay ng isang talahanayan, na naglalaman ng mga selda (<td> o <th>).

• Ang bawat hilera ay maaaring mayroong maraming selula, na bumubuo sa kabuuang istruktura ng talahanayan.

Mga Tag na <th> at <td>

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

• Ang tag na <th> ay tumutukoy sa selda ng header ng isang talahanayan. Karaniwang ginagamit sa mga hanay ng header, ang nilalaman ng mga selda ay naka-bold at naka-center.
• Ang tag na <td> ay tumutukoy sa isang karaniwang selda ng data ng talahanayan, na nagpapakita ng karaniwang data sa talahanayan.

Mga atributong colspan at 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>

Ang colspan at rowspan ay mga katangian na ginagamit kapag ang mga cell ng talahanayan ay sumasaklaw sa maraming kolum o hilera.

• Ang katangiang colspan ay nagpapahintulot sa isang cell na sakupin ang maraming kolum.
• Ang rowspan na atributo ay nagbibigay-daan sa isang selula na sumakop ng maraming hilera.

Mga Tag na <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>

• Ang tag na <thead> ay ginagamit upang tukuyin ang seksyon ng header ng isang talahanayan. Kadalasan, ito ay naglalaman ng mga pamagat ng kolum.

  Ang tag na <thead> ay nakaposisyon sa itaas ng talahanayan, tinutukoy ang mga pamagat o header ng kolum. Ito ay tumutulong upang malinaw na maipagkaiba ang mga seksyon ng data.

• Ang tag na <tbody> ay tumutukoy sa katawan na seksyon ng talahanayan. Naglalaman ito ng mga hilera ng data.

  Ang tag na <tbody> ay naglalaman ng pangunahing katawan ng data ng talahanayan. Ito ay nakaposisyon sa pagitan ng mga hilera na nakapaloob sa mga tag na <thead> at <tfoot>.

• Ang tag na <tfoot> ay tumutukoy sa pang-ilalim na bahagi ng talahanayan, na naglalaman ng mga kabuuan o tala.

  Ang tag na <tfoot> ay matatagpuan sa dulo ng talahanayan at ginagamit upang ipakita ang mga kabuuan o iba pang mga anotasyon. Ito ay lalo na kapaki-pakinabang kapag nagbuod o nagpapakita ng mga kabuuan para sa malalaking hanay ng data.

Mga Tag na <caption> at <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>

• Ang tag na <caption> ay nagdaragdag ng caption (pamuhatan) upang gawing mas malinaw ang nilalaman ng talahanayan. Karaniwan itong inilalagay sa itaas ng talahanayan at nagsisilbing buod ng kabuuang nilalaman ng talahanayan.

• Ang tag na <colgroup> ay nag-u-grupo ng mga kolum sa loob ng isang talahanayan at ginagamit upang mag-apply ng mga estilo o layout. Maaari mong tukuyin ang mga kulay ng background o lapad para sa tiyak na mga kolum sa pamamagitan ng pagsama ng tag na <col>.

Halimbawa ng Talahanayan

 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>

• Ang <table> tag ay ginagamit upang lumikha ng talahanayan na nagpapakita ng datos sa mga hanay at kolum.

• Ang <thead> tag ay naggugrupo ng mga hanay ng header ng talahanayan. Karaniwan itong naglalaman ng mga <th> tag, na nagsisilbing mga header.

• Ang <tbody> tag ay naggugrupo ng pangunahing nilalaman ng talahanayan. Karaniwang naglalaman ito ng mga hanay ng datos na binubuo ng mga <td> tag.

• Ang <tfoot> tag ay naggugrupo ng mga hanay ng footer ng talahanayan. Angkop ito para sa pagpapakita ng kabuuan o mga tala.

• Ang <colgroup> tag ay naggugrupo ng mga kolum ng isang talahanayan at ginagamit upang mag-apply ng style sa mga ito bilang isang buo.

• Ang <caption> tag ay nagdaragdag ng isang caption o pamagat sa talahanayan, na nagpapadali para sa mga gumagamit na maunawaan ang nilalaman ng talahanayan.

• Ang katangiang colspan ay nagpapahintulot sa isang cell na sakupin ang maraming kolum.

• Ang rowspan na atributo ay nagbibigay-daan sa isang selula na sumakop ng maraming hilera.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video