SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:Responsive Tabelle 2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8">
		<title>responsive Tabelle</title>
		<style>
table
{
	max-width: 80em;
	border-collapse: collapse;
	border: thin solid;
	margin: 2em;
}

tr
{
	border-top: thin solid;
	border-bottom: thin solid;
}

tr:first-child
{
	border-top: 0 none;
}

th, td
{
	padding: 1em;
}

td
{
	text-align: justify;
}

thead tr, tr:nth-child(even)
{
	background-color: lightgrey;
}

th
{
	font-size: 1.2em;
}

tbody th
{
	text-align: left;
}

code
{
	font-size: 1.2em;
}

table a
{
	white-space: nowrap;
}


td:last-child
{
	min-width: 180px;
	text-align: right;
}

img:not(:first-child)
{
	margin-left: 5px;
}
*
{
	box-sizing: border-box;
}

html
{
	font: 1em/1.4 Georgia, serif;
	padding: 0;
}

body
{
	margin: 0;
	padding: 0;
}
		</style>
	</head>
<body>
	<table>
		<thead>
			<tr>
				<th colspan="4">CSS im Wandel der Zeit</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th><code>font-size</code></th>
				<td><a href="http://wiki.selfhtml.org/wiki/Font-size">wiki.selfhtml.org/wiki/font-size</a></td>
				<td>Die Eigenschaft <code>font-size</code> bestimmt die Darstellungsgröße der Schrift.</td>
				<td><img src="https://wiki.selfhtml.org/images/1/1a/Css1.png" alt="Bestandteil von CSS 1"><img src="https://wiki.selfhtml.org/images/7/74/Css2.png" alt="Bestandteil von CSS 2"><img src="https://wiki.selfhtml.org/images/c/c1/Css21.png" alt="Bestandteil von CSS 2.1"><img src="https://wiki.selfhtml.org/images/5/57/Css3.png" alt="Bestandteil von CSS 3"></td>
			</tr>
			<tr>
				<th><code>overflow</code></th>
				<td><a href="http://wiki.selfhtml.org/wiki/Overflow">wiki.selfhtml.org/wiki/overflow</a></td>
				<td>Die Eigenschaft <code>overflow</code> ermöglicht es, Inhalte größer als das Element zu machen oder den Platz für den Inhalt eines Elementes zu beschränken.</td>
				<td><img src="https://wiki.selfhtml.org/images/7/74/Css2.png" alt="Bestandteil von CSS 2"><img src="https://wiki.selfhtml.org/images/c/c1/Css21.png" alt="Bestandteil von CSS 2.1"><img src="https://wiki.selfhtml.org/images/5/57/Css3.png" alt="Bestandteil von CSS 3"></td>
			</tr>
			<tr>
				<th><code>hyphens</code></th>
				<td><a href="https://wiki.selfhtml.org/wiki/Hyphens">wiki.selfhtml.org/wiki/hyphens</a></td>
				<td>Mit der Eigenschaft <code>hyphens</code> (engl. hyphen - Bindestrich) können Sie eine automatische Worttrennung einrichten.</td>
				<td><img src="https://wiki.selfhtml.org/images/5/57/Css3.png" alt="Bestandteil von CSS 3"></td>
			</tr>								
		</tbody>
	</table>
	
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Responsive_Tabelle_2.html&oldid=81949“