Tabellrelaterte tagger

I denne artikkelen forklarer vi tabellrelaterte tagger.

Dette forklarer hvordan man beskriver tabeller og tabelloverskrifter i HTML med eksempler.

YouTube Video

Tabellrelaterte tagger

<table>-tagg

 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>-taggen brukes til å lage en tabell som organiserer og viser data i rader og kolonner.

  <table>-taggen organiserer data visuelt og lager tabeller med flere rader og kolonner. Rader defineres med <tr>-taggen, overskriftsceller med <th>-taggen, og dataceller med <td>-taggen.

• Du kan tilpasse tabellens stil og oppsett ved hjelp av CSS.

<tr>-tagg

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

• <tr>-taggen brukes til å definere rader i en tabell.

  <tr>-taggen brukes til å lage hver rad i en tabell, som inneholder celler (<td> eller <th>).

• Hver rad kan inneholde flere celler som danner tabellens overordnede struktur.

<th>- og <td>-tagger

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

• <th>-taggen definerer en tabells overskriftscelle. Vanligvis brukt i overskriftsrader, hvor innholdet i cellene er fett og sentrert.
• <td>-taggen definerer en standard tabellcelle, som viser vanlig tabelldata.

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 som brukes når tabelldeler spenner over flere kolonner eller rader.

• Attributtet colspan gjør det mulig for en celle å strekke seg over flere kolonner.
• rowspan-attributtet gjør det mulig for en celle å strekke seg over flere rader.

<thead>-, <tbody>-, <tfoot>-tagger

 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>

• Taggen <thead> brukes til å definere overskriftsseksjonen i en tabell. Den inneholder vanligvis kolonneoverskrifter.

  Taggen <thead> plasseres øverst i tabellen og definerer kolonnetitlene eller overskriftene. Dette bidrar til å tydelig skille mellom ulike dataseksjoner.

• Taggen <tbody> definerer hoveddelen av tabellen. Den inneholder datarader.

  Taggen <tbody> inneholder hoveddelen av tabellens data. Den plasseres mellom radene som er definert av taggene <thead> og <tfoot>.

• Taggen <tfoot> definerer bunnseksjonen av en tabell, som inneholder summer eller notater.

  Taggen <tfoot> plasseres nederst i tabellen og brukes til å vise summer eller andre kommentarer. Den er spesielt nyttig når man skal oppsummere eller vise totaler for store datasett.

<caption> og <colgroup>-tagger

 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>

• Taggen <caption> legger til en bildetekst (overskrift) for å gjøre tabellens innhold tydeligere. Den plasseres vanligvis øverst i tabellen og fungerer som en oppsummering av tabellens generelle innhold.

• Taggen <colgroup> grupperer kolonner i en tabell og brukes til å angi stiler eller oppsett. Du kan angi bakgrunnsfarger eller bredder for bestemte kolonner ved å inkludere taggen <col>.

Tabelleksempel

 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>-taggen brukes til å lage en tabell som viser data i rader og kolonner.

• <thead>-taggen grupperer overskriftsradene i tabellen. Den inneholder vanligvis <th>-tagger, som fungerer som overskrifter.

• <tbody>-taggen grupperer hovedinnholdet i tabellen. Den inneholder vanligvis datarader som består av <td>-tagger.

• <tfoot>-taggen grupperer bunnradene i tabellen. Den er egnet for å vise totaler eller notater.

• <colgroup>-taggen grupperer kolonnene i en tabell og brukes til å anvende stiler på dem som en helhet.

• <caption>-taggen legger til en bildetekst eller overskrift i tabellen, og gjør det enklere for brukerne å forstå tabellens innhold.

• Attributtet colspan gjør det mulig for en celle å strekke seg over flere kolonner.

• rowspan-attributtet gjør det mulig for en celle å strekke seg over flere rader.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video