Tabellen aanpassen, meerdere vragen.

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
Plaats reactie
Greenhorn
Berichten: 7
Lid geworden op: 26 april 2015, 11:31
    Ubuntu Firefox

Tabellen aanpassen, meerdere vragen.

Bericht 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
Bijlagen
tabel
tabel
knorretje
Berichten: 204
Lid geworden op: 8 augustus 2010, 11:37
    Windows 7 Firefox

Re: Tabellen aanpassen, meerdere vragen.

Bericht 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".
Greenhorn
Berichten: 7
Lid geworden op: 26 april 2015, 11:31
    Ubuntu Firefox

Re: Tabellen aanpassen, meerdere vragen.

Bericht 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
Plaats reactie