zebra tabel

Status
Niet open voor verdere reacties.
L

lefty999

Gebruiker
Lid geworden
5 jul 2002
Berichten
929
dag beste

ik wil graag een zebra tabel op een site toevoegen maar weet niet hoe ik dat doe i.s.m. css


kan iemand mij uitleggen hoe ik dit kan doen??

Ik heb meerdere tabellen op een pagina dus met een id kan ik niks doen moet dan een class zijn


alvast bedankt
 
ik heb nu volgende gedaan

css :
Code: 
#container #inhoud #assortimenttabel .odd {
	background-color: #EFEFDE;
}

Html bestand

Code: 
  <table class="assortimenttabel">
  <tbody>
<tr class="odd">
	<td>blaat</td>
	<td>blaat2</td>
</tr>
<tr>	<td>blaat3</td>
	<td>blaat4</td>
</tr>
</tbody>
</table>
  <table class="assortimenttabel">
  <tbody>
<tr class="odd">
	<td>blaat</td>
	<td>blaat2</td>
</tr>
<tr>	<td>blaat3</td>
	<td>blaat4</td>
</tr>
</tbody>
</table>


eerst had ik i.p.v. de class een id ingesteld maar de pagina mmoet xhtml 1 strict gevalideerd zijn dus kan ik niet meerdere malen id gebruiken maar als ik er class van maak werkt het niet, gevalideerd krijg ik het dan wel maar dan voert hij het niet uit.

iemand een idee waar de fout zit?
 
het gaat je niet lukken met alleen html en css, tenzij je de pagina statisch hebt... Javascript kan je de oplossing brengen (maar dat is dus client site) en anders moet je php gebruiken.

[edit]
vond net deze, werkt die?
PHP: 
//javascript
var rows = document.getElementsByTagName ("tr");

var colors = ["#FFF", "#000"];
var columns, index;
for (var a = 0; a < rows.length; a++) {
	index = a%rows.length;
	columns = rows[a].getElementsByTagName('td');
	for (var b = 0; b < columns.length; b++) {
		columns[b].style.backgroundColor = colors[index];
	}
}



// OF
//php
 $i = 0; 
while(fetchding...){ 
    if($i == 0){ 
        echo("<td class='background1'>bla</td>"); 
        $i = 1; 
    }else if($i = 1){ 
        echo("<td class='background2'>bla</td>"); 
        $i = 0; 
    } 
}
[/edit]
 
Laatst bewerkt:
en hoe zie je de oplossing in java dan gebeuren?? heb hier van gelezen uitgeprobeert maar kreeg er niks van gemaakt meeste java stukjes die je vind zijn op id gebazeerd niet op class
en zelf ken ik niet genoeg java voor dat aangepast te krijgen

php mag niet gebrukt worden
 
nou, zoiets?
(.................)
PHP: 
<html>
<head>
<script language='JavaScript'>
function DoSomeStuff(){
var rows = document.getElementsByTagName("tr"); 

var colors = ["#ff00ff", "#ffff00"]; 
var columns, index; 

	for (var a = 0; a < rows.length; a++) {
		index = (1-(a%2));
		columns = rows[a].getElementsByTagName('td');
			for (var b = 0; b < columns.length; b++) {
				columns[b].style.backgroundColor = colors[index];
			}
	}

}
</script>
</head>
<body onload="DoSomeStuff();">

<table>
	<tr>
		<td> bla </td>
	</tr>
	<tr>
		<td> bla2 </td>
	</tr>
	<tr>
		<td> bla3 </td>
	</tr>
	<tr>
		<td> bla4 </td>
	</tr>
	<tr>
		<td> bla5 </td>
	</tr>
	<tr>
		<td> bla6 </td>
	</tr>
	<tr>
		<td> bla7 </td>
	</tr>
	<tr>
		<td> bla8 </td>
	</tr>
</table>
</body>
</html>

sla op als (bv) bla.html en zie het resultaat. Gebruikt geen ID's.

[edit] je link http://dolphin.twistification.net/team.php?tid=29 is d00d [/edit]
 
Thnx het werkt

jha die link is nog van de prehistorie :p

nu nog het xhtml 1 strict krijgen :p :s

en dan nog wat anysurfer richtlijnen goed krijgen :d

en dan is ie af :p
 
pff, ik houd het gewoon op html 4.01 strict... en zelfs dat vind ik soms een beetje lame.

Succes
 
Zebratabel

Onderstaande code werkt perfect, en valideert strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Zebra tabel</title>
<style type="text/css">
table
{
color:#000;
background: transparent;
border-collapse:collapse;
width:250px;
line-height: 20px;
}
.odd
{
background-color: #efefed;
color: #111;
}
</style>
</head>
<body>

<table>
<tbody>
<tr class="odd">
<td>blaat</td>
<td>blaat2</td>
</tr>
<tr> <td>blaat3</td>
<td>blaat4</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr class="odd">
<td>blaat</td>
<td>blaat2</td>
</tr>
<tr> <td>blaat3</td>
<td>blaat4</td>
</tr>
</tbody>
</table>
</body>
</html>

Poppoll
 
Wat staat er tussen het begin van de html pagina en </head> op de pagina die niet valideert?
PP
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Assortiment - Frituur Bas</title>
<link href="style.css" rel="stylesheet" type="text/css" />
 </head>

P.S. hoe kan je in css een tekst een bepaalde kleur geven?
 
Laatst bewerkt:
Zie bijlage.
Ik heb assortiment aangepast.
Het javascript staat in een apart bestand en wordt aangeroepen in de head, anders krijg je dit nooit gevalideerd.

aanpassen van de kleurtekst doe je in CSS met color: #000 (=zwart) voor wit color: #fff
PP
 

Bijlagen

bedankt nu raakt hij gevalideerd, heb alleen nog 1 waarschuwing

Code: 
   1.

      Warning DOCTYPE Override in effect!

      The detected DOCTYPE Declaration "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">" has been suppressed and the DOCTYPE for "XHTML 1.0 Strict" inserted instead, but even if no errors are shown below the document will not be Valid until you update it to reflect this new DOCTYPE.
 
Dat mag je dus niet doen, aangezien de doc type bepaald is in het html document.
hier een Engelse uitleg omtrent dit probleem:

You ticked the box on the Validator to ignore the DOCTYPE in the HTML page itself and force the validator to treat the code as HTML XXX XXXXXXXX

You overrode the declaration contined in the page. If the page initially did not have a DOCTYPE then the only way to valdate it is to tick the box (There is another box for the Content-Type character encoding too). If you later add a DOCTYPE to the code, then you het the message that you saw.

Untick the box and the validator will check the page based on the DOCTYPE in the HTML code itself.

PP
 
Laatst bewerkt:
jip maar voor het school moet het xhtml 1 strict zijn dus die regels moeten veranderen maar in wat??
 
Verander
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Naar:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Dit op alle pagina's behalve assortiment, want die heeft deze code al.

Daarna kan je valideren zonder xhtml strict aan te duiden bovenstaande code geeft aan dat er op xhtml strict moet gecontroleerd worden.
PS Knap werk.

PP
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan