xHTML - CSS

Tabellen formatieren mit CSS

Das HTML dazu

<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Vorname</th>
			<th>Jahrgang</th>
			<th>Job</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Berners-Lee</td>
			<td>Timothy</td>
			<td>1955</td>
			<td>Informatiker (W3C)</td>				
		</tr>	
		<tr>
			<td>Lerdorf</td>
			<td>Rasmus</td>
			<td>1968</td>
			<td>Programmierer (PHP)</td>				
		</tr>	
		<tr>
			<td>Widenius</td>
			<td>Michael</td>
			<td>1962</td>
			<td>Softwareentwickler (MySQL)</td>				
		</tr>
	</tbody>			
</table>

Formatierung mithilfe von CSS

table { 
	border-collapse:collapse;
}

table th {
	font-weight: bold;
	background-color: #969696;
}

table th, table td {
	text-align: left;
	padding: 3px 8px;
	border: 1px solid black;
}

table tr:nth-of-type(even) { background-color: #EDEDED; }
table tr:nth-of-type(odd) { background-color: #E8E8E8; }

Vorschau

Die Selektoren sind im Beispiel bereits vorgegeben und auch die Positionierung wurde grundlegend vordefiniert. Natürlich kann man die Tabelle nun beliebig gestalten mit Rahmenlinien, Farben, Schriftarten, Schatten, etc.

xHTML und CSS

Tabellen formatieren mit CSS

Das HTML dazu

Formatierung mithilfe von CSS

Vorschau