Tabeles er skemaer eller excel-ark og brugt og misbrugt til mange ting i html-verdenen.
De er gode til at lave skemaer og kan styles så data præsentere sig godt.
Den basale html mark-up:
<table> <tbody> <tr> <td>Data1</td> <td>Data2</td> <td>Data3</td> </tr> <tr> <td>Datab1</td> <td>Datab2</td> <td>Datab3</td> </tr> </tbody> </table> |
ser sådan ud:
og med lidt css kan vi style det ganske fornuftigt. Det er en super ide at farve hveranden række i en nuance, og til dette brug er pseudo selector :nth-child(even) og :nth-child(odd) perfekte:
tr:nth-child(even) { background: green; } tr:nth-child(odd) { background: blue; } |
Og med lidt tilføjelser som thead og tbody:
<table border="0"> <thead> <tr> <th>overskrift1</th> <th>overskrift2</th> <th>overskrift2</th> </tr> </thead> <tbody> <tr> <td>Data1</td> <td>Data2</td> <td>Data3</td> </tr> <tr> <td>Datab1</td> <td>Datab2</td> <td>Datab3</td> </tr> <tr> <td>Datac1</td> <td>Datac2</td> <td>Datac3</td> </tr> <tr> <td>Datad1</td> <td>Datad2</td> <td>Datad3</td> </tr> </tbody> </table> |
CSS: prøv det!!
table { width: 50%;font-family: sans-serif;} th {background: black; color: white; } tr:nth-child(even) { background: rgba(0,0,0,0.1); } tr:nth-child(odd) { background: rgba(0,0,0,0.4); } td { padding: 10px; font-size: 12px; line-height: 18px; color: white; } |
Så bliver det næsten smukt!
Med grøn baggrund