Gör tabell med CSS

Jag har stött på flera varianter på där man använder sig av HTML-elementet <table> för att skapa tabeller. I bland kan det kanske lämpa sig bättre med denna teknik men kan man så tycker jag att det är roligare att rita upp sina tabeller med CSS.

Så jag tänkte visa lite snabbt och enkelt hur man gör en tabell med hjälp av CSS-attributet “display”. Dock är detta inget som fungerar i IE7 men kan man hitta på en bra work-around (alternativt om man bestämmer sig för att låta IE7-användare inte få en lika snygg upplevelse) så kanske det är värt att lägga <table> åt sidan.

Jag bygger tabellen med hjälp av <ul> (unordered list) och <li> (list items). På listan sätter jag display:table, mina rader får display:table-row och mina celler får display:table-cell. Nu har vi byggt oss en enkel tabell.

Det finns givetvis en mängd olika varianter på hur man kan göra men jag brukar göra något i stil med det här och det har fungerat utan klagomål hittills =). Om du har tips på något ännu bättre sätt eller om jag borde göra något annorlunda, skriv gärna en rad nedan.

HTML för min tabell:

<ul class="table">
<li class="column-row">
<div class="column">Kolumn 1</div>
<div class="column">Kolumn 2</div>
<div class="column">Kolumn 3</div>
</li>
<li class="row">
<div class="cell">Värde 1</div>
<div class="cell">Värde 2</div>
<div class="cell">Värde 3</div>
</li>
<li class="row">
<div class="cell">Värde 4</div>
<div class="cell">Värde 5</div>
<div class="cell">Värde 6</div>
</li>
<li class="row">
<div class="cell">Värde 7</div>
<div class="cell">Värde 8</div>
<div class="cell">Värde 9</div></li>
</ul>


CSS för min tabell:

ul.table {
border: 1px solid #ddd;
display: table;
margin: 0;
padding: 0;
}
ul.table li.column-row, ul.table li.row {
display: table-row;
padding: 4px;
}
ul.table div.column, ul.table div.cell {
display: table-cell;
padding: 4px;
}
ul.table div.cell {
vertical-align: middle;
}
/* Bakgrundsfärg på raderna*/
ul.table li.column-row {
background-color: #e1e1fa;
}
ul.table li.row:nth-child(even) {
background-color: #f1f1f1;
}
/* Fet text på kolumnrubrikerna */
ul.table div.column {
font-weight: 900;
}