Beispiel:Tabellen-5.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grundgerüst</title>
<style>
table,
th,
td,
caption {
border: thin solid #a0a0a0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border-width: thin 0 0 thin;
margin: 0 0 1em;
table-layout: auto;
/* Prevents HTML tables from becoming too wide */
max-width: 100%;
}
th, td {
font-weight: normal;
text-align: left;
}
th, caption {
background-color: #f1f3f4;
font-weight: 700;
}
th, td, caption {
padding: .4em .6em;
}
caption {
text-align: center;
border-width: thin thin 0 thin;
}
table.finanz td {
text-align: right;
}
table.finanz tr.result > *{
border-top-width: medium;
}
</style>
</head>
<body>
<table class="finanz">
<caption>Kostenaufstellung</caption>
<tr>
<th>Posten</th>
<th>Januar</th>
<th>Februar</th>
<th>März</th>
</tr>
<tr>
<th>Miete</th>
<td>1.000,00</td>
<td>1.000,00</td>
<td>1.000,00</td>
</tr>
<tr>
<th>Essen</th>
<td>350,00</td>
<td>250,34</td>
<td>275,21</td>
</tr>
<tr>
<th>Kino, Theater</th>
<td>46,00</td>
<td>23,00</td>
<td>0,00</td>
</tr>
<tr class="result">
<th>Gesamtkosten</th>
<td>1.396,00</td>
<td>1.273,34</td>
<td>1.275,21</td>
</tr>
</table>
<p><code>th</code>-Elemente stehen sowohl für Spaltenköpfe (oben) als auch für Zeilenköpfe (links).</p>
<p>Als Überschrift wird ein <code>caption</code>-Element verwendet.</p>
</body>
</html>
