Tabel-relaterede tags

I denne artikel forklarer vi tabel-relaterede tags.

Dette forklarer, hvordan man beskriver tabeller og tabeloverskrifter i HTML sammen med eksempler.

YouTube Video

Tabel-relaterede tags

<table>-tag

 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>

• <table>-tagget bruges til at oprette en tabel, der organiserer og viser data i rækker og kolonner.

  <table>-tagget organiserer data visuelt og opretter tabeller med flere rækker og kolonner. Rækker defineres med <tr>-tagget, overskriftsceller med <th>-tagget, og dataceller med <td>-tagget.

• Du kan tilpasse tabelens stil og layout ved hjælp af CSS.

<tr>-tag

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

• <tr>-tagget bruges til at definere rækker i en tabel.

  <tr>-tagget bruges til at oprette hver række i en tabel, som indeholder celler (<td> eller <th>).

• Hver række kan indeholde flere celler, hvilket danner tabelens samlede struktur.

<th>- og <td>-tags

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

• <th>-tagget definerer en tabels overskriftscelle. Typisk anvendt i overskriftsrækker, hvor cellernes indhold er fed og centreret.
• <td>-tagget definerer en standard tabeldatacelle, som viser almindelige tabeldata.

colspan- og rowspan-attributter

 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 og rowspan er attributter, der bruges, når tabelceller strækker sig over flere kolonner eller rækker.

• Attributten colspan gør det muligt for en celle at strække sig over flere kolonner.
• rowspan-attributten gør det muligt for en celle at spænde over flere rækker.

<thead>, <tbody>, <tfoot>-tags

 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>

• Tagget <thead> bruges til at definere tabelens header-sektion. Det indeholder typisk kolonneoverskrifter.

  <thead>-tagget er placeret øverst i tabellen og definerer kolonneoverskrifterne. Dette hjælper med tydeligt at adskille datasektionerne.

• Tagget <tbody> definerer tabelens hoveddel. Det indeholder datarækkerne.

  <tbody>-tagget indeholder tabelens hoveddata. Det er placeret mellem rækkerne, der er omkranset af <thead>- og <tfoot>-taggene.

• <tfoot>-tagget definerer tabelens bundsektion, som inkluderer totaler eller noter.

  <tfoot>-tagget er placeret i slutningen af tabellen og bruges til at vise totaler eller andre noter. Det er især nyttigt, når man skal opsummere eller vise totaler for store datasæt.

<caption> og <colgroup> Tags

 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>

• <caption>-tagget tilføjer en overskrift for at gøre tabelens indhold tydeligere. Det placeres normalt øverst i tabellen og bruges til at opsummere tabelens overordnede indhold.

• <colgroup>-tagget grupperer kolonner i en tabel og bruges til at anvende stilarter eller layouts. Du kan angive baggrundsfarver eller bredder for specifikke kolonner ved at inkludere <col>-tagget.

Tabeleksempel

 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>

• <table>-tagget bruges til at oprette en tabel, der viser data i rækker og kolonner.

• <thead>-tagget grupperer tabelens overskriftsrækker. Det indeholder normalt <th>-tags, som fungerer som overskrifter.

• <tbody>-tagget grupperer tabelens hovedindhold. Det indeholder normalt datarækker bestående af <td>-tags.

• <tfoot>-tagget grupperer tabelens foderrækker. Det er velegnet til at vise totaler eller noter.

• <colgroup>-tagget grupperer kolonnerne i en tabel og bruges til at anvende stil på dem som helhed.

• <caption>-tagget tilføjer en tekst eller overskrift til tabellen, hvilket gør det lettere for brugerne at forstå tabelens indhold.

• Attributten colspan gør det muligt for en celle at strække sig over flere kolonner.

• rowspan-attributten gør det muligt for en celle at spænde over flere rækker.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video