Tabelopmaak in CSS

Status
Niet open voor verdere reacties.
N

NIh1IlO

Gebruiker
Lid geworden
4 feb 2003
Berichten
750
Gegroet specilaisten,

Ik wil een tabel ontwerpen met 10 rijen en 3 kolommen met een specifieke hoofding per kolom in de 1ste rij.
De middelste kolom moet als achtergrond geel hebben, terwijl de achtergrond van de 5de en 8ste rij rood moet zijn.
De weergave van de tabel moet de grenzen van de cellen ook weergeven.
De breedteverhouding van de kolommen is 1/6, 3/6 en 2/6.
Hoe moet de code (CSS in combinatie met HTML wellicht) er uitzien?

Ik voeg in bijlage een modelletje in Word opgemaakt.

Met vriendelijke dank op voorhand.

nIh1IlO
 

Bijlagen

  • tabelontwerp.doc
    31 KB · Weergaven: 94
Je vraagd om een tabel kolommen een breedte te geven in breuken (1/6), maar 1/6 van wat? ik heb de tabel hieronder een breedte geven van 900px. Voor mijn gemak!
Code: 
<table width="900" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">Kolomkop 1</th>
    <th bgcolor="#FFFF00" scope="col">Kolomkop 2</th>
    <th scope="col"><strong>Kolomkop 3</th>
  </tr>
  <tr>
    <td width="150">&nbsp;</td>
    <td width="450" bgcolor="#FFFF00">&nbsp;</td>
    <td width="300">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td bgcolor="#FFFF00">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td bgcolor="#FFFF00">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="#FF0000">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td bgcolor="#FFFF00">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td bgcolor="#FFFF00">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="#FFFF00"></td>
    <td></td>
  </tr>
  <tr bgcolor="#FF0000">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td bgcolor="#FFFF00">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
Hopelijk kan hier iets mee doen
Mvg
Defietser
 
Beste Defietser,

De breuken sloegen op de breedte van de tabel (willekeurig te bepalen); misschien was het beter geweest proventen te gebruiken (%).

Bedankt alvast voor het ontwerp! Ik stel toch nog even de vraag of met CSS niet meer kan gedefinieerd worden bij <tabel>, dit ter info.

Met vriendelijke en dankbare groeten,

nIh1IlO
 
tabel met Css opmaak

het zal ook nog wel anders(beter) kunnen , maar hier een voorbeeld

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Naamloos document</title>
<style type="text/css">
<!--
h1{
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 24px;
	text-align:center;
	font-weight: bold;	
	
	
	}
table{
	margin: 10px auto;
	width:90%;
	border:#000 solid 1px;

	}
.tr_rood{
	background-color: #f00;
	/*color: #00F;*/
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
	
}

.td_geel{
	background-color: #ff0;
	/*color: #00F;*/
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
}
.td_1{
	width:17%;
	}
.td_2{
	width:51%;
	}
.td_3{
	width:32%;
	}

-->
</style></head>

<body>
<table>
  <tr>
    <td class="td_1"><h1>Kolomkop 1</h1></td>
    <td class="td_geel"><h1>Kolomkop 2</h1></td>
    <td class="td_3"><h1>Kolomkop 3</h1></td>
  </tr>
  <tr>
    <td class="td_1">&nbsp;</td>
    <td class="td_geel">&nbsp;</td>
    <td class="td_3">&nbsp;</td>
  </tr>
  <tr class="td">
    <td class="td_1">&nbsp;</td>
    <td class="td_geel">&nbsp;</td>
    <td class="td_3">&nbsp;</td>
  </tr>
  <tr>
    <td class="td_1">&nbsp;</td>
    <td class="td_geel">&nbsp;</td>
    <td class="td_3">&nbsp;</td>
  </tr>
  <tr class="tr_rood">
    <td class="td_1">&nbsp;</td>
    <td class="td_2">&nbsp;</td>
    <td class="td_3">&nbsp;</td>
  </tr>
  <tr>
    <td class="td_1">&nbsp;</td>
    <td class="td_geel">&nbsp;</td>
    <td class="td_3">&nbsp;</td>
  </tr>
  <tr>
    <td class="td_1">&nbsp;</td>
    <td class="td_geel">&nbsp;</td>
    <td class="td_3">&nbsp;</td>
  </tr>
  <tr class="tr_rood">
    <td class="td_1">&nbsp;</td>
    <td class="td_2">&nbsp;</td>
    <td class="td_3">&nbsp;</td>
  </tr>
  <tr>
    <td class="td_1">&nbsp;</td>
    <td class="td_geel">&nbsp;</td>
    <td class="td_3">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td class="td_geel">&nbsp;</td>
    <td class="td_3">&nbsp;</td>
  </tr>
</table>

</body>
</html>
 
Laatst bewerkt:
Van harte bedankt Frenske123 en Defietser :thumb:

Vriendelijke groeten,

nIh1IlO
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan