Beispiel:Tabelle-6.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabellen, bei denen Zahlen rechtsbündig formatiert sind.</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; }
td { border-width: 0 1px 1px 0; }
th, td, caption { padding: 0.4em 0.6em; }
caption {
text-align:center; border-width: 1px 1px 0 1px;
}
table.finanz td { text-align:right; }
table.finanz tr:
table.finanz tr:last-of-type td { border-top:thin solid; }
</style> <script> 'use strict'; document.addEventListener('DOMContentLoaded', function () {
}); </script> </head>
<body>
Überschrift
| Posten | Januar | Februar | März |
|---|---|---|---|
| Miete | 1.000,- | 1.000,- | 1.000,- |
| Essen | 350,- | 250,34 | 275,21 |
| Kino, Theater | 46,- | 23,- | 0,- |
| Gesamtkosten | 1.396.- | 1.273,34 | 1.275.21 |
In dieser Tabelle werden alle Tabellenzellen rechtsbündig formatiert, damit Zahlen passend untereinander stehen.
</body> </html>
