Nicht mehr ganz neu hier
Hallo zusammen,
ich arbeite momentan das Buch "CSS-Design Die Tutorials für Einsteiger" von Heiko Stiegert durch.
Bei einer Übung zum Thema Tabellen habe ich das Problem, dass mein Ergebnis nicht so aussieht wie das in dem Buch. Ich habe den Code verglichen und konnte keinen Fehler/Unterschied finden.
Vielleicht kann mir ja hier jemand weiterhelfen bzw. den richtigen Tipp geben.
Das Ergebnis sollte so aussehen:
Bei mir ist es so, dass der grüne Bereich der ersten Spalte nach unten herausragt, der eigentlich ja mit dem grauen Bereich der anderen Spalten abschliessen sollte.....
Hier mal der Code dazu:
ich arbeite momentan das Buch "CSS-Design Die Tutorials für Einsteiger" von Heiko Stiegert durch.
Bei einer Übung zum Thema Tabellen habe ich das Problem, dass mein Ergebnis nicht so aussieht wie das in dem Buch. Ich habe den Code verglichen und konnte keinen Fehler/Unterschied finden.
Vielleicht kann mir ja hier jemand weiterhelfen bzw. den richtigen Tipp geben.
Das Ergebnis sollte so aussehen:
Bei mir ist es so, dass der grüne Bereich der ersten Spalte nach unten herausragt, der eigentlich ja mit dem grauen Bereich der anderen Spalten abschliessen sollte.....
Hier mal der Code dazu:
HTML:
<!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="de" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Tabellen für Profis</title>
<link rel="stylesheet" href="css/professionelletabelle.css" type="text/css" media="all" />
</head>
<body>
<div>
<img src="images/ic_ball.png" class="icon" alt="Tennisball" />
<table summary="Direktvergleich ehemaliger Top-10-Tennisspieler">
<caption>Direktvergleich ehemaliger Top-10-Tennisspieler</caption>
<colgroup>
<col width="125px" />
<col width="70px" span="5" />
</colgroup>
<thead>
<tr>
<td>Tennis-Spieler</td>
<th scope="col">Becker</th>
<th scope="col" class="best">Lendl</th>
<th scope="col">Sampras</th>
<th scope="col">Agassi</th>
<th scope="col">Edberg</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Sieg-Quotient:</th>
<td>76.9%</td>
<td class="best">81.8%</td>
<td>77.4%</td>
<td>76.0%</td>
<td>74.9%</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Gesamt-Spiele:</th>
<td>927</td>
<td class="best">1308</td>
<td>984</td>
<td>1144</td>
<td>1076</td>
</tr>
<tr>
<th scope="row">Bilanz:</th>
<td>713:214</td>
<td class="best">1070:238</td>
<td>762:222</td>
<td>870:274</td>
<td>806:270</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Code:
table {margin: 10px;
padding: 0;
border: 0;
border-collapse: collapse;
font: normal 81% "Trebuchet MS", Verdana, sans-serif;
color: #FFF;}
caption {font: italic normal 139%/1.44em Georgia, serif;
text-align: right;
color: #87C81C;
padding: 0;
margin: 0 15px 0 0;
caption-side: top;}
td, th {padding: 0;
margin: 0;
text-align: center;}
thead th {height: 60px;
vertical-align: bottom;
font-size: 115%;
line-height: 285%;
background: transparent url(../images/bg_head.gif) repeat-x bottom left;}
thead td {font-weight: bold;
vertical-align: bottom;
text-indent: 15px;
line-height: 292%;
text-align: left;
color: #999;}
thead th.best {width: 100px;
padding-bottom: 5px;
font-size: 123%;
background: #FFF url(../images/bg_head_best.gif) no-repeat bottom left;}
tfoot th {background: #FFF url(../images/bg_foot_th.gif) no-repeat top right;
vertical-align: top;
padding-top: 4px;}
tfoot td {background: #FFF url(../images/bg_foot_td.gif) repeat-x top left;
height: 50px;
padding-top: 4px;
vertical-align: top;
text-decoration: underline;}
tfoot td.best {background: transparent url(../images/bg_foot_best.gif) no-repeat top left;
width: 100px;
font-weight: bold;
font-style: italic;
font-size: 123%;}
tbody td {background: transparent url(../images/bg_body_td.gif) repeat-x bottom left;
height: 30px;}
tbody td.best {background: transparent url(../images/bg_body_best.gif) no-repeat bottom left;
width: 100px;}
tbody th,
tfoot th {text-align: left;
background: transparent url(../images/bg_body_th.gif) no-repeat bottom right;
font-weight: bold;
text-indent: 15px;}
thead, tfoot {border: 1px solid #FFF;}
thead {border-width: 0 0 1px 0;}
tfoot {border-width: 1px 0 0 0;}
img.icon {border: 0px;
position: absolute;
left: 122px;
top: 95px;
width: 42px;
height: 42px;
_display: none;}
