Beispiel:Tabelle-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>
| Posten | Januar | Februar | März |
|---|---|---|---|
| Miete | 1.000,00 | 1.000,00 | 1.000,00 |
| Essen | 350,00 | 250,34 | 275,21 |
| Kino, Theater | 46,00 | 23,00 | 0,00 |
| Gesamtkosten | 1.396,00 | 1.273,34 | 1.275,21 |
th-Elemente stehen sowohl für Spaltenköpfe (oben) als auch für Zeilenköpfe (links).
Als Überschrift wird ein caption-Element verwendet.
</body> </html>
