Tabellene er ganske komplekse strukturer som består av rader og kolonner. Ytre rammeverket til tabeller dannes alltid av table-elementet.
<table> … </table>
Innenfor dette elementet gjøres den faktiske tabelldefinisjonen. Det anbefales faktisk å tildele tabellen en ramme mens du implementerer den i HTML. Dette gjør det lettere å se nøyaktig hvordan radene og kolonnene går. For å gjøre dette tildeler du attributtverdikombinasjonen border="1" til det innledende <table>-elementet. (Merk at attributtet border ikke bør brukes i HTML. Her bør man i stedet bruke tilsvarende CSS-egenskaper. Men mer om det senere).
<table border="1"> … </table>
Videre med definisjonen av tabellradene. Dette gjøres via elementet tr.
<table border="1"> <tr></tr> </table>
Dette fører imidlertid fremdeles ikke til ønsket utgangspunkt. Neste steg er faktisk å definere kolonnene. Dette gjøres igjen ved hjelp av td-elementet.
<table border="1">
<tr>
<td></td>
</tr>
</table>Nå kan du definere den første innholdet til tabellen. Dette gjøres mellom <td> og </td>.
<table border="1">
<tr>
<td>Innhold 1</td>
</tr>
</table>
Først nå er det verdt å se resultatet i nettleseren.
Dette er selvfølgelig ikke veldig spektakulært ennå, siden tabellen for øyeblikket bare består av en tabellcelle. Du kan nå legge til en ekstra kolonne. Dette gjøres igjen via et td-element. Pass på å definere dette inne i tr-elementet.
<table border="1">
<tr>
<td>Innhold 1</td>
<td>Innhold 2</td>
</tr>
</table>
Også her, ta en titt på resultatet.
For å legge til ekstra rader i tabellen, legger man ganske enkelt til et annet tr-element, deretter defineres de ønskede td-elementene igjen.
Her er et eksempel:
<table border="1">
<tr>
<td>Innhold 1</td>
<td>Innhold 2</td>
</tr>
<tr>
<td>Innhold 3</td>
<td>Innhold 4</td>
</tr>
</table>
Et blikk på resultatet i nettleseren viser følgende resultat:
På denne måten kan du også opprette omfattende tabeller.
Kop, kropp og fot definere
Tabeller kan deles inn i logiske områder. Dette inkluderer en overskrift, en eller flere datablokker og en fotseksjon. Følgende eksempel viser hvordan det kan se ut:
<table border="1">
<thead>
<tr>
<th>Avgang</th>
<th>Ankomst</th>
<th>Plattform</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Berlin</td>
<td>Stralsund</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>1</td>
</tr>
<tr>
<td>München</td>
<td>Berlin</td>
<td>3</td>
</tr>
</tbody>
</table>Og her er et resultatet i nettleseren: 
Oppdelingen i disse områdene har tydeligvis ingen visuell effekt. Det er selvfølgelig et spørsmål: Hvorfor bør man ta bryet med å definere disse områdene? Det er to gode grunner til det:
• Ved hjelp av CSS kan områdene formateres forskjellig etter behov.
• Ved utskrift av lange tabeller kan nettlesere gjenta tabellhodet og tabellfoten på hver side.
Tabellhodet innledes med thead. Deretter følger radene i tabellen som tilhører hodet. Ikke glem å lukke hodeområdet </thead>.
Hvis tabellen skal ha en tabellfot, må denne definitivt være før kroppsområdet. Fotseksjonen innledes med <tfoot>. Deretter kan det være en eller flere rader som tilhører fotområdet. Med </tfoot> lukker du tabellfoten.
Den faktiske kroppsdefinisjonen av tabellen gjøres innenfor tbody-elementet. Dette tbody kan forekomme flere ganger. Hver kroppsdel av en tabell avsluttes med </tbody>.
Hvorfor bør man for eksempel bruke flere tbody-elementer i en tabell? Et godt eksempel kunne være tabellen til den tyske fotballigaen. I en slik tabell er det vanligvis flere områder.
• Mester
• Champions League-deltaker
• Champions League-kvalifiserende lag
• Europa League-deltaker
• Det grå midtfeltet
• Nedrykkingsplass
• Nedrykkere
Hvert av disse områdene kan plasseres i sitt eget tbody-element og deretter formateres annerledes med CSS.
Definer kolonner på forhånd
Hvordan tabellen vises av nettleserne, avhenger naturligvis i første omgang av antall tilgjengelige rader og kolonner. Prosessen med å vise en tabell er imidlertid ikke helt enkel for nettleseren. Faktisk må en nettleser alltid lese hele tabellen før den kan vise den. Spesielt for svært omfattende tabeller kan dette naturligvis ta litt tid. Dette problemet kan unngås ved å fortelle nettleseren direkte hvor mange kolonner tabellen faktisk består av.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Tittel</th>
<th>Pris</th>
</tr>
<tr>
<td>23223423434</td>
<td>En kort historie om nesten alt</td>
<td>29,95 Euro</td>
</tr>
</table>
Ved å bruke colgroup initiates forhåndsdefinisjonen av kolonneinformasjon. Merk at de fleste attributtene som var tilgjengelige for colgroup i tidligere HTML-versjoner ikke lenger er tillatt i HTML5. Det eneste tillatte attributtet nå er span. Dette attributtet forventer antall kolonner i tabellen som verdi.
Elementet colgroup står direkte etter den innledende <table>-taggen. Kolonnene selv defineres deretter av de individuelle col-elementene.
Ved bruk av colgroup har man generelt to alternativer:
• Med span-attributt
• Uten span-attributt
Hvis man ikke bruker span-attributtet, må det defineres et col-element for hver kolonne som gruppen skal omfatte innenfor colgroup-elementet. Merk at col er et selvstendig element.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Tittel</th>
<th>Pris</th>
</tr>
<tr>
<td>23223423434</td>
<td>En kort historie om nesten alt</td>
<td>29,95 Euro</td>
</tr>
</table>
Det finnes også en blanding av disse to alternativene.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Dette er praktisk når en kolonne skal defineres separat, mens andre skal grupperes sammen.
