Tabelle Beispiel 2

Diese Tabelle wurde mit CSS gestaltet. Sie ist Teil einer Artikelserie zum Thema:

Tabelle für tabellarische Daten laut BITV und Tabellen zum Hören laut BITV Praxis.

Zuerst sehen die Tabelle, dann finden Sie die Angaben aus dem Stylesheet und ganz unten steht das HTML für diese Tabelle.

Achtung:Beispiel 2 zeigt die Tabelle nur mit den Style Sheet Angaben zur Tabelle.

Diese Tabelle hat ein Hintergrundbild.

Sollten Sie in ihrem Browser diese Tabelle nicht gut sehen. Bitte schreiben Sie mir in einer Email welchen Browser Sie verwenden, dann suche ich gerne nach Lösungen. Danke!

Urlaubskosten
Urlaub	Flug	Hotel	Ausgehen	Total
Total:	600	400	300	1300
London
2006	400	300	150
2007	200	100	150

Das Style Sheet der zweiten Tabelle.

 
 
table{
	width:40%;
	margin:0px auto;
	font-family: Georgia,"Gill Sans MT", "Gill sans", "Trebuchet ms", sans-serif;
	font-size:1em;
	line-height:1.3em;
	border-spacing:0pt;
	padding-top:45px;
	padding-bottom:30px;
	background-image:url("http://www.webdesign-in.de/wp-images/tab/body2.jpg");
	background-repeat:no-repeat;
	background-position:50% 100%;
 }
td{
	height:2em;
	padding-right:20px;
}
caption{
	color:#ff0000;
	background-color:#fff;
	margin:0px auto 0px auto;
	text-align:center;
	font-size:1.1em;
	line-height:1.6em;
	background-image:url("http://www.webdesign-in.de/wp-images/tab/body2.jpg");
	background-repeat:no-repeat;
	background-position:50% 0%;
}
 
th,tr,td{
	background-image:none;
}
 
#zusammen{
	color:#fff;
	background-color:inherit;
	text-align:left;
	padding-left:3px;
	height:2em;
 
}
#flug{
	border-left:1px solid #000;
	border-bottom:1px solid #000;
}
#hotel{
	border-left:1px solid #000;
	border-bottom:1px solid #000;
}
#ausgehen{
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
}
#total{
	color:#fff;
	background-color:inherit;
}
.erste{
	color:#fff;
	background-color:inherit;
}
.zwei{
	color:#000;
	background-color:#F7F687;
	border-left:1px solid #000;
 
}
.drei{
	color:#000;
	background-color:#F2C6BF;
	border-left:1px solid #000;
}
.vier{
	color:#000;
	background-color:#C0F2BF;
	border-left:1px solid #000;
	border-right:1px solid #000;
}
 
.tfooteins{
	text-align:right;
	font-weight:bold;
}
.treins{
}
/*wort total in der 1.Spalte*/
.tfooteins .treins .erste{
	text-align:center;
	border-top:1px solid #000;
}
/*summe am ende*/
.tfooteins .treins .fuenf{
	font-size:1.4em;
	font-weight:bold;
	text-decoration:underline;
	color:#fff;
	background-color:inherit;
}
.tfooteins .treins .zwei,.tfooteins .treins .drei,.tfooteins .treins .vier,.tfooteins .treins .fuenf{
	border-top:1px solid #000;
}
/*daten*/
/*rahmen fertig*/
.tbodyeins .treinszwei .erste,.tbodyeins .treinszwei .zwei,.tbodyeins .treinszwei .drei,.tbodyeins .treinszwei .vier {
	border-top:1px solid #000;
	border-bottom:1px dashed #000;
}
 
.treinszwei td{
	text-align:right;
}
.treinsdrei{
	text-align:right;
}

Hier das HTML der Tabelle.

 
 
<table summary="Diese Tabelle zeigt wie man eine einfache Tabelle erstellen kann anhand einer Urlaubsabrechnung." id="tableeins"  >
<caption>Urlaubskosten</caption>
<!--colgroup hilft dem browser und dem ueberblick-->
	<colgroup>
		<col width="50"  />
		<col width="40"  span="4"  />
	</colgroup>
<!--tabellenkopf-->
	<thead class="theadeins">
		<tr class="treins">
			<th  abbr="Urlaubskosten" id="zusammen" class="erste">Urlaub</th>
			<th scope="col" id="flug" class="zwei">Flug</th>
			<th scope="col" id="hotel" class="drei">Hotel</th>
			<th scope="col" id="ausgehen" class="vier">Ausgehen</th>
			<th scope="col" id="total" class="fuenf">Total</th>
		</tr>
	</thead>
<!--tabellenkopf ende-->
<!--tabellenfuss -->
	<tfoot class="tfooteins">
		<tr class="treins">
			<th scope="row" class="erste">Total:</th>
			<td class="zwei">600</td>
			<td class="drei">400</td>
			<td class="vier">300</td>
			<td class="fuenf">1300</td>
		</tr>
	</tfoot>
<!--tabellenfuss ende-->
<!--tabellen datenbereich-->
	<tbody class="tbodyeins">
		<tr class="treinseins">
			<th  scope="rowgroup" headers="flug hotel ausgehen" class="erste">London</th>
		</tr>
		<tr class="treinszwei">
			<td scope="row" headers="flug hotel ausgehen" class="erste">2006</td>
			<td class="zwei">400</td>
			<td class="drei">300</td>
			<td class="vier">150</td>
		</tr>
		<tr class="treinsdrei">
			<td scope="row" headers="flug hotel ausgehen" class="erste">2007</td>
			<td class="zwei">200</td>
			<td class="drei">100</td>
			<td class="vier">150</td>
		</tr>
	</tbody><!--tabellen datenbereich ende-->
</table><!--tabelle ende-->