CSS voorbeelden - Tabel met achtergrondafbeelding in css

De cellen linksboven en rechtsonder, zijn transparant van achtergrond. De achtergrondafbeelding is in een CSS stijlregel opgegeven voor de gehele tabel.

Een kijkje in de broncode leert ons dat voor het geven van een achtergrond aan de tabel en het maken van de transparante delen daarvan, de volgende stijlregels gebruikt werden:

table {
font-size: 95%;
width: 499px;
border: 3px double rgb(0,85,145);
background: #fff url(achtergrondtabel.jpg) top left no-repeat;
}

table td {
padding: 1em;
background: rgb(249,216,109);
}

table td.transparant {
height: 150px;
width: 150px;
background: transparent;
}

De CSS "stijlregels" verklaard:

De stijlregels "CSS" voor de tabel:

De tabel krijgt een fontgrootte die 95% bedraagt van de normale grootte van het gebruikte font:
table {
font-size: 95%;
De tabel krijgt een breedte van 499 pixels:
width: 499px;
Om de gehele tabel heen komt een 'dubbele lijn' als border, met een totale dikte van 3 pixels:
border: 3px double rgb(0,85,145);
De achtergrond krijgt een kleur (#fff = wit) en een afbeelding waarbij de locatie van de afbeelding wordt aangegeven en de positie die deze moet gaan innemen in de tabel. Linksboven en niet herhaald:
background: #fff url(achtergrondtabel.jpg) top left no-repeat;
}

De stijlregels "CSS" voor de tabelcellen:

In de tabelcellen wordt een afstand (ruimte) vrijgehouden tussen de rand van de cel en haar inhoud, zodat de tekst in de cel niet tegen de rand staat:
table td {padding: 1em;
Vervolgens geven we de cellen een achtergrondkleur:
background: rgb(249,216,109);
}

De stijlregels "CSS" voor de "transparante tabelcel":

Alle tabelcellen hebben in voorgaande regels een achtergrondkleur gekregen, we moeten er nu dus voor zorgen dat die cellen, waar we de achtergrond van de tabel doorheen willen kunnen zien, transparant gemaakt worden. Eerst geven we een hoogte aan de 'transparante tabelcel':
table td.transparant {
height: 150px;
Daarna een breedte:
width: 150px;
En tot slot de stijlregel om de achtergrond 'transparant' te maken:
background: transparent;
}

De gele vlakken staan niet tegen elkaar!

Veel bezoekers komen met de opmerking; "de vlakken staan niet tegen elkaar!".

Dit komt door een standaard border voor de tabel, een eenvoudige oplossing hiervoor is, in de css aan de 'table' de volgende stijlregel toevoegen:

border-collapse: collapse;

Meer CSS voorbeelden »