Tabelle Beispiel 1

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 1 zeigt die Tabelle nur mit den Style Sheet Angaben zur Tabelle.




Urlaubskosten
UrlaubFlugHotelAusgehenTotal
Total:6004003001300
London
2006400300150
2007200100150

Die Angaben für diese Tabelle im externen Style Sheet:




table{
	width:60%;
	margin:0px auto;
	font-family: Georgia,"Gill Sans MT", "Gill sans", "Trebuchet ms", sans-serif;
	background-color:#f0f0f0;
	color:#000;
	font-size:1em;
	line-height:1.3em;
	border-spacing:0pt;
	border:1px solid #000;
 }
td{
	height:2em;
	padding-right:20px;
}
caption{
	color:#ff0000;
	background-color:#f0f0f0;
	width:60%;
	margin:0px auto 2px auto;
	font-size:1.1em;
	line-height:1.6em;
	letter-spacing:4pt;}
#zusammen{
	color:#000;
	background-color:#fafafa;
	border-bottom:1px solid #000;
	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{
	border-bottom:1px solid #000;}
.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;}
.fuenf{
	color:#000;
	background-color:#fafafa;}
.tfooteins{
	text-align:right;
	font-weight:bold;}
/*wort total in der 1.Spalte*/
.tfooteins .treins .erste{
	text-align:center;
	border-top:1px solid #000;}
/*summe am ende*/
.tfooteins .treins .fuenf{
	color:#ff0000;
	background-color:#fefefe;}
.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;}

Das HTML für diese 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-->

Probieren Sie es selber aus. Barrierefreie Tabellen sind einfach (für alle 😉 )

mts