Tabeller

Man kan gøre meget for udseendet af tabeller med CSS.

Tabel rammer

For ar styre tabellens rammer bruges border egenskaben.

Eksempel, der sætter en sort ramme på tabellen, td og th

table, th, td
{
    border: 1px solid black;
}

Bemærk, at hvis du vil have en ramme på tabellen alene skal du bruge border-collapse egenskaben.

Collapse Borders

Border-collapse egenskaben angiver om tabellens rammer er slået sammen til en enkelt ramme eller om den er adskilt.

Eksempel:

table
{
    border-collapse:collapse;
}
table,th, td
{
     border: 1px solid black;
}

Tabel bredde og højde

Bredde og højde på tabellen er styret af width og height egenskaberne.

Eksempel:

table
{
    width:100%;
}
th
{
    height:50px;
}

Tabel tekst justering

Teksten inde i en tabel er styret af text-align og vertical-align egenskaber

Eksempel, der vil højrestille teksten i cellerne:

td
{
    text-align:right;
}

Og vertical-align, placerer teksten i top, bottom eller middle:

td
{
    height:50px;
    vertical-align:bottom;
}

Tabel padding

Padding styrer afstanden mellem rammen og indholdet i cellerne

Eksempel

td
{
    padding:15px;
}

Tabel farve

Nedenstående eksempel sætter farven på rammerne, teksten og baggrunden:

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}