Tabeller

I VSCode kan du raskt lage en tabell på denne måten: table>(tr>td*5)*3 som gir deg:

  <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

Her ba jeg om å få en table som skal ha rader tr med fem celler td*5 , legg merke til at jeg grupperte en rad (td>td*5) med paranteser, etterpå skrev jeg hvor mange slike rader jeg vil ha ( )*5 .

TR er taggen som markerer starten på en rad (må avsluttes med </tr> )

TD er taggen som markerer en celle med innhold.

TH markerer en celle som brukes til overskrift (automatisk feit skrift)

THEAD brukes til å gruppere overskrifter (skille dem klart fra innhold)

TBODY brukes for å gruppere rader med vanlige td celler.

Tabeller med mer struktur

Jeg kan også lage en tabell i VSCode på denne måten:

table>(thead>tr>th*5)+tbody>(tr>td*5)*3

som gir meg følgende tabell:

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

Typisk vil vi da legge inn kolonneoverskrifter i th taggene og data i de vanlige td taggene

Når du skal lage en tabell kan du enkelt bruke kommandoen table>(thead>tr>th*5)+tbody>(tr>td*5)*3 i VSCode.
Du trenger bare bytte ut tallet 5 med antall kolonner (vanrett) og 3 med antall rader (loddrett).

Du vil vanligvis brukes css til å style tabellen, et eksempel på en slik regel er denne:

tbody tr td:nth-child(odd) {
  background-color: lightgrey;
}

Med denne regelen vil alle odde rader i tabellen (tbody) få lys grå bakgrunn.