Beispiel:Tabellen-6.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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,-&nbsp;</td>
<td>1.000,-&nbsp;</td>
<td>1.000,-&nbsp;</td>
</tr>
<tr>
<th>Essen</th>
<td>350,-&nbsp;</td>
<td>250,34</td>
<td>275,21</td>
</tr>
<tr>
<th>Kino, Theater</th>
<td>46,-&nbsp;</td>
<td>23,-&nbsp;</td>
<td>0,-&nbsp;</td>
</tr>
<tr class="result">
<th>Gesamtkosten</th>
<td>1.396.-&nbsp;</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>