CSS-table

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

Tables i HTML kode og CSS kode har forskellige egenskaber, men CSS har evnen til at være meget mere fleksibel. Hvor man i HTML kun kan lave

Række 1, celle 1 Række 1, celle 2
Række 2, celle 1 Række 2, celle 2

Dette får man frem ved hjælp af standard HTML kode

<table border="1">
<tr>
<td>Række 1, celle 1</td>
<td>Række 1, celle 2</td>
</tr>
<tr>
<td>Række 2, celle 1</td>
<td>Række 2, celle 2</td>
</tr>
</table>

Til gengæld kan man lave meget pænere tables med CSS-formattering, såsom

CSS Table.JPG

ved at skrive

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

I CSS fungerer "border" linjen ligesom den gør i HTML hvor at man skriver hvor mange pixels der skal være i borderen. Dog kan man nu også angive en farve, solid green i dette tilfælde. Den farve angivet der er den der fylder den øverste linje, ergo overskriften. Den farve der er angivet ved at skrive background-color:<Name of colour goes here>; er den baggrundsfarve der skal bruges i resten af cellerne som baggrundsfarve.

Tables bruges tit til at organisere information i form af tal eller andre ting der skal kategoriseres. I dette eksempel er det brugt til pænt at vise navnene på forskellige firmaer, navnene på deres ansatte og deres land.