HTML => tabellen

Invoering

Met het HTML <table> -element kunnen webauteurs tabelgegevens (zoals tekst, afbeeldingen, links, andere tabellen, enz.) Weergeven in een tweedimensionale tabel met rijen en kolommen met cellen.

Syntaxis

<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

Opmerkingen

De verschillende tabelelementen en hun inhoudskenmerken bepalen samen het tabelmodel. Het element <table> is het containerelement voor tabelmodellen / tabelgegevens. Tabellen hebben rijen, kolommen en cellen die door hun afstammelingen zijn gegeven. De rijen en kolommen vormen een raster; de cellen van een tabel moeten dat raster volledig bedekken zonder overlapping. De onderstaande lijst beschrijft de verschillende elementen in het tabelmodel:

<table> - Het containerelement voor tabelmodellen / tabelgegevens. <table> staat voor gegevens met meer dan één dimensie in de vorm van een tabel.
<caption> - Bijschrift of titel van de tabel (zoals een figcaption van een figure )
<col> - Een kolom (een element zonder inhoud)
<colgroup> - Een groep kolommen
<thead> - <thead> (slechts één)
<tbody> - Inhoud / inhoud van de tabel (meerdere zijn in orde)
<tfoot> - <tfoot> (slechts één)
<tr> - Tabelrij
<th> - Tabel koptekstcel
<td> - Tabelgegevenscel

Semantisch gezien zijn tabellen bedoeld voor het bewaren van gegevens in tabelvorm. U kunt het beschouwen als een manier om gegevens weer te geven en te beschrijven die logisch zijn in een spreadsheet (kolommen en rijen).

Het gebruik van tabellen voor lay-out wordt niet aanbevolen. Gebruik in plaats daarvan CSS-regels voor lay-out en opmaak, inclusief display: table .

Een opmerkelijke uitzondering die doorgaans in de branche wordt weergegeven met betrekking tot het gebruik van de <table> -indeling, is met betrekking tot HTML-e-mail: sommige e-mailclients, waaronder Outlook, zijn teruggedraaid naar oudere rendering-engines nadat Microsoft hun monopolistische situatie ten opzichte van de EU had verloren. Om ervoor te zorgen dat Microsoft IE geen onderdeel van het besturingssysteem maakt, hebben ze de rendering-engine van Outlook eenvoudig teruggezet naar een eerdere versie van Trident. Deze rollback ondersteunt eenvoudigweg geen moderne webtechnologieën, dus het gebruik van op <table> gebaseerde lay-outs voor HTML-e-mail is de enige manier om compatibiliteit tussen browsers / platforms / clients te garanderen.

Eenvoudige tabel

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

Dit levert een <table> bestaande uit drie totale rijen ( <tr> ): één rij kopcellen ( <th> ) en twee rijen inhoudscellen ( <td> ). <th> elementen zijn tabelkoppen en <td> elementen zijn tabelgegevens . Je kunt alles wat je wilt in een <td> of <th> .

Kop 1 / kolom 1	Kop 2 / kolom 2
Rij 1 Gegevenskolom 1	Rij 1 Gegevenskolom 2
Rij 2 Gegevenskolom 1	Rij 2 Gegevenskolom 2

Kolommen of rijen overspannen

Tabelcellen kunnen meerdere kolommen of rijen overspannen met behulp van de kenmerken colspan en rowspan . Deze attributen kunnen worden toegepast op <th> en <td> elementen.

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

Zal resulteren in

Merk op dat u geen tabel moet ontwerpen waar zowel rijen als kolommen elkaar overlappen, omdat dit ongeldige HTML is en het resultaat anders wordt behandeld door verschillende webbrowsers.

rowspan = Een niet-negatief geheel getal dat het aantal rijen aangeeft dat door een cel wordt overspannen. De standaardwaarde van dit kenmerk is één ( 1 ). De waarde nul ( 0 ) betekent dat de cel zich uitstrekt van de huidige rij tot de laatste rij van de tabel ( <thead> , <tbody> of <tfoot> ).

colspan = Een niet-negatief geheel getal dat het aantal kolommen aangeeft dat door de huidige cel wordt overspannen. De standaardwaarde van dit kenmerk is één ( 1 ). De waarde nul ( 0 ) betekent dat de cel zich uitstrekt van de huidige naar de laatste kolom van de kolomgroep <colgroup> waarin de cel is gedefinieerd.

Tafel met kop, tbody, tfoot en bijschrift

HTML biedt de tabellen ook de <thead> , <tbody> , <tfoot> en <caption> . Deze aanvullende elementen zijn handig voor het toevoegen van semantische waarde aan uw tabellen en voor het bieden van een plek voor afzonderlijke CSS-stijlen.

Bij het afdrukken van een tabel die niet op één (papieren) pagina past, herhalen de meeste browsers de inhoud van <thead> op elke pagina.

Er is een specifieke volgorde die moet worden nageleefd, en we moeten weten dat niet elk element op zijn plaats valt zoals je zou verwachten. Het volgende voorbeeld laat zien hoe onze 4 elementen moeten worden geplaatst.

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

De resultaten van het volgende voorbeeld worden twee keer getoond - de eerste tabel mist stijlen, de tweede tabel heeft enkele CSS-eigenschappen toegepast: background-color , color en border *. De stijlen worden aangeboden als een visuele gids en vormen geen essentieel aspect van het onderwerp in kwestie.

Element	Stijlen is van toepassing
`<caption>`	Gele tekst op zwarte achtergrond.
`<thead>`	Vetgedrukte tekst op paarse achtergrond.
`<tbody>`	Tekst op blauwe achtergrond.
`<tfoot>`	Tekst op groene achtergrond.
`<th>`	Oranje randen.
`<td>`	Rode randen.

Kolomgroepen

Soms wilt u misschien stijl toepassen op een kolom of groep kolommen. Of voor semantische doeleinden wilt u misschien kolommen bij elkaar groeperen. Gebruik hiervoor de elementen <colgroup> en <col> .

Met de optionele tag <colgroup> kunt u kolommen groeperen. <colgroup> -elementen moeten onderliggende elementen van een <table> en moeten na alle <caption> -elementen en vóór de inhoud van de tabel (bijvoorbeeld <tr> , <thead> , <tbody> , enz.) komen.

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

Met de optionele tag <col> kunt u naar afzonderlijke kolommen of een reeks kolommen verwijzen zonder een logische groepering toe te passen. <col> -elementen zijn optioneel, maar indien aanwezig moeten ze zich binnen een <colgroup> -element bevinden.

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

De volgende CSS-stijlen kunnen worden toegepast op elementen <colgroup> en <col> :

border
background
width
visibility
display (zoals in display: none )
- display: none; verwijdert de kolommen daadwerkelijk uit de weergave, waardoor de tabel wordt weergegeven alsof die cellen niet bestaan

Zie HTML5-tabelgegevens voor meer informatie.

Kopbereik

th elementen worden heel vaak gebruikt om koppen voor tabelrijen en kolommen aan te geven, zoals:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Dit kan worden verbeterd toegankelijkheid door toepassing van de scope attribuut. Bovenstaand voorbeeld zou als volgt worden gewijzigd:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope staat bekend als een opgesomd attribuut , wat betekent dat het een waarde kan hebben uit een specifieke set mogelijke waarden. Deze set bevat:

col
row
colgroup
rowgroup

Referenties:

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

HTML
tabellen

Zoeken…