Beispiel:Tabellen-6.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>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>
<h1>Überschrift</h1>
<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,- </td>
<td>1.000,- </td>
<td>1.000,- </td>
</tr>
<tr>
<th>Essen</th>
<td>350,- </td>
<td>250,34</td>
<td>275,21</td>
</tr>
<tr>
<th>Kino, Theater</th>
<td>46,- </td>
<td>23,- </td>
<td>0,- </td>
</tr>
<tr class="result">
<th>Gesamtkosten</th>
<td>1.396.- </td>
<td>1.273,34</td>
<td>1.275.21</td>
</tr>
</table>
<p>In dieser Tabelle werden alle Tabellenzellen rechtsbündig formatiert, damit Zahlen passend untereinander stehen.</p>
</body>
</html>