nicht angemeldet
Hallo
ich könnte ja links neben Text und Bild (beide zentriert) eine Tabelle einfügen.
Das könnte zum Beispiel so aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Tabelle neben zentrierter Box</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.6;
}
html {
font-size: 100%;
}
body {
width: 98%;
padding: 0;
margin: 1rem auto;
}
main {
display: flex;
}
article {
width: 40%;
padding: 1rem;
border: 1px solid #666;
margin-right: 30%;
}
article h1 {
font-family: Times, "Times New Roman", serif;
font-variant: small-caps;
margin-bottom: 2rem;
}
img {
max-width: 100%;
}
table {
width: 28%;
padding: 1rem;
border: 1px solid silver;
margin: 0 1%;
}
th,
td {
text-align: left;
vertical-align: top;
padding: 0.3rem 0.7rem;
}
}
</style>
</head>
<body>
<main>
<table>
<caption>Caption: Eine Beispieltabelle</caption>
<colgroup> <!-- CSS-Zugriff auf Spalten -->
<col class="col01" />
<col class="col02" />
<col class="col03" />
</colgroup>
<thead>
<tr>
<th></th>
<th>Banane</th>
<th>Kiwi</th>
</tr>
</thead>
<tbody>
<tr>
<th>VW</th>
<td>0101</td>
<td>0102</td>
</tr>
<tr>
<th>Mercedes</th>
<td>0201</td>
<td>0202</td>
</tr>
<tr>
<th>Audi</th>
<td>0301</td>
<td>0302</td>
</tr>
<tr>
<th>BMW</th>
<td>0401</td>
<td>0402</td>
</tr>
<tr>
<th>Jaguar</th>
<td>0501</td>
<td>0502</td>
</tr>
</tbody>
<tfoot> <!-- tfoot muss nicht mehr direkt hinter thead stehen -->
<tr>
<td colspan="3">Der tfoot der Tabelle.</td>
</tr>
</tfoot>
</table>
<article>
<h1>Überschrift</h1>
<img src="https://c1.staticflickr.com/3/2442/4343722845_f4dd1d3447.jpg" alt="Ein schönes Bild">
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken.</p>
</article>
</main>
</body>
</html>
Gruss
MrMurphy
Gunnar Bittersmann