Editie 179 - HTML-cursus
Deze rubriek is geschreven door Kloep!
In deze rubriek maken we gebruik van het programma Notepad++ en Google Chrome. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Chrome de codes anders weer als bijvoorbeeld Internet Explorer of Firefox.
Welkom bij les nummer 22. We gaan verder met CSS. Dit keer in combinatie met een tabel. Tabellen hebben we al eerder gedaan in HTML. Deel 1 en Deel 2 en Deel 3 zijn in de links te vinden. In deze les, zul je ook de HTML gedeeltes zien.
Rand toevoegen
CSS:
table {
border:5px double blue;
}
HTML:
<table border="10"> <tr><td>Nummer 1</td><td>Nummer 2</td></tr> <tr><td>Nummer 3</td><td>Nummer 4</td></tr>
Dit geeft het volgende resultaat:
Breedte instellen
CSS:
table {
border:5px double blue;
width: 400px;
}
HTML:
<table border="10"> <tr><td>Nummer 1</td><td>Nummer 2</td></tr> <tr><td>Nummer 3</td><td>Nummer 4</td></tr>
Dit geeft het volgende resultaat:
Achtergrond wijzigen
CSS:
table {
border:5px double blue;
width: 400px;
background: red;
}
HTML:
<table border="10"> <tr><td>Nummer 1</td><td>Nummer 2</td></tr> <tr><td>Nummer 3</td><td>Nummer 4</td></tr>
Dit geeft het volgende resultaat:
Ruimte in en tussen cellen
CSS:
table {
border:5px double blue;
width: 400px;
background: red;
padding: 5px;
border-spacing: 5px;
}
HTML:
<table border="10"> <tr><td>Nummer 1</td><td>Nummer 2</td></tr> <tr><td>Nummer 3</td><td>Nummer 4</td></tr>
Dit geeft het volgende resultaat:
BORDER-SPACING zorgt ervoor dat de cellen verder van de buitenste rand staan, PADDING zorgt voor de cellen onderling.
0 reacties
Recommended Comments
Er zijn geen reacties om weer te geven.