Pagina 1 van 1
Tabellen aanpassen, meerdere vragen.
Geplaatst: 9 mei 2015, 8:39
door Greenhorn
Hallo
Daar was ik weer. De div vraag was geen succes. Zelf maar wat aan het prutsen geweest. Nu heb ik een vraag. Hoe pas ik de tabellen aan? Ik wil de
de cel met naam Model, kleiner hebben in omvang, zodat de rest iets groter wordt en ik wil de rijen inkleuren, dus 1 rij donker rood en de andere donker grijs, tekst word dan wit. Op de gewone Kompozer CSS manier? En wat zijn dan de waarden? En hoe plaats ik mijn footer naar beneden.
Gr. Han
Re: Tabellen aanpassen, meerdere vragen.
Geplaatst: 14 mei 2015, 19:57
door knorretje
Hallo greenhorn,
Om de tabelrijen een afwisselende achtergrondkleur te geven zou ik de css pseudoselector nth-child(even) gebruiken in combinatie met een tr selector. Bijvoorbeeld om de rijen afwisselend geel en oranje te maken:
tr
{
background-color: yellow;
}
tr:nth-child(even)
{
background-color: orange;
}
Volledig voorbeeld:
Code: Selecteer alles
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:2px solid black;
}
table
{
border-collapse:collapse;
width:20%;
color:black;
}
td
{
height:40px;
}
tr
{
background-color: yellow;
}
tr:nth-child(even)
{
background-color: orange;
}
</style>
</head>
<body>
<table>
<tr>
<td>Roll No</td>
<td>Name</td>
<td>Team</td>
</tr>
<tr>
<td>1001</td>
<td>John</td>
<td>Red</td>
</tr>
<tr>
<td>1002</td>
<td>Peter</td>
<td>Blue</td>
</tr>
<tr>
<td>1003</td>
<td>Henry</td>
<td>Green</td>
</tr>
</table>
</body>
</html>
Als alternatief kun je ook alle even tabelrijen een eigen css klasse geven, en alle andere oneven tabelrijen een andere css klasse en vervolgens aan beide klassen een verschillende achtergrondkleur koppelen. Voor meer informatie kun je op internet zoeken naar "css table row alternating colors".
Re: Tabellen aanpassen, meerdere vragen.
Geplaatst: 15 mei 2015, 8:04
door Greenhorn
Hee Knorretje,
Bedankt hier voor. Ik heb jouw vb, van een aantal jaren terug, als VB genomen en ben er mee aan de slag gegaan. Een beetje zitten knutselen en met dit als redelijk resultaat.
Han