CSS der Tabelle
CSS
div#tabelle {
width: 950px;
height: 350px;
margin-left:110px;
float: left;
overflow: auto;
}
.tabelle {
width: 900px;
border: 1px solid #4dd57c;
border-spacing: 0;
padding: 0;
}
.tabelle caption {
background-color: #333;
font-size: 14px;
font-weight: bold;
color: #b4cbbc;
padding: 6px 0 3px 0;
}
.th1 {
background-color: #333;
border: 1px solid #4dd57c;
text-align: center;
font-size: 14px;
color: #b4cbbc;
font-weight: bold;
}
.td1 {
font-size: 12px;
color: #b4cbbc;
padding: 5px 5px;
background-color: #333;
border: 1px solid #4dd57c;
text-align: center;
}
Alles anzeigen
HTML der Tabelle:
HTML
<div id="tabelle">
<table class="tabelle">
<caption><u>Warme Getränke</u></caption>
<thead>
<tr>
<th class="th1">Getränk</th>
<th class="th1">Menge</th>
<th class="th1">Preis</th>
<th class="th1">Bearbeiten</th>
<th class="th1">Löschen</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td1">Kaffee</td>
<td class="td1">1,0l</td>
<td class="td1">1,99€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Tee</td>
<td class="td1">1,0l</td>
<td class="td1">1,49€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Heisse Schokolade</td>
<td class="td1">0,5l</td>
<td class="td1">0,99€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
</tbody>
</table>
<table class="tabelle">
<caption><u>Kalte Getränke</u></caption>
<thead>
<tr>
<th class="th1">Getränk</th>
<th class="th1">Menge</th>
<th class="th1">Preis</th>
<th class="th1">Bearbeiten</th>
<th class="th1">Löschen</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td1">Mineralwasser</td>
<td class="td1">0,7l</td>
<td class="td1">0,49€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Cola</td>
<td class="td1">1,0l</td>
<td class="td1">1,19€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Fanta</td>
<td class="td1">1,0l</td>
<td class="td1">0,99€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Sprite</td>
<td class="td1">1,0l</td>
<td class="td1">0,99€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Softdrink Mix</td>
<td class="td1">12x1,0l</td>
<td class="td1">12,49€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Apfelschorle</td>
<td class="td1">0,7l</td>
<td class="td1">0,89€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">O-Saft</td>
<td class="td1">0,75l</td>
<td class="td1">0,79€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
</tbody>
</table>
<table class="tabelle">
<caption><u>Alkoholische Getränke</u></caption>
<thead>
<tr>
<th class="th1">Getränk</th>
<th class="th1">Menge</th>
<th class="th1">Preis</th>
<th class="th1">Bearbeiten</th>
<th class="th1">Löschen</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td1">Bier</td>
<td class="td1">50,0l</td>
<td class="td1">105,99€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Bier</td>
<td class="td1">30,0l</td>
<td class="td1">53,59€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Rotwein</td>
<td class="td1">0,7l</td>
<td class="td1">3,99€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Weisswein</td>
<td class="td1">0,7l</td>
<td class="td1">2,99€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Sekt</td>
<td class="td1">0,75l</td>
<td class="td1">3,79€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Kräterlikör</td>
<td class="td1">0,7l</td>
<td class="td1">8,99€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
<tr>
<td class="td1">Cognac</td>
<td class="td1">0,7l</td>
<td class="td1">14,99€</td>
<td class="td1"><a href="#"><img src="images/bear.png" width="16" height="16" alt="bear" /></a></td>
<td class="td1"><a href="#"><img src="images/muell.png" width="16" height="16" alt="muell" /></a></td>
</tr>
</tbody>
</table>
Alles anzeigen