Beispiel:CSS-Anw-Tabelle-7.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">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <style>
table, th, td { 
  border-collapse: collapse;
  padding:0.3em 0.5em; 
}
 
table {
  margin-left: 1em;}
 
th, caption { 
  background-color: #666; 
  color: #fff; 
  border: thin solid #666;
}
 
td {
 background-image: linear-gradient(#f9f9f9, #e3e3e3);
 border-left: thin solid #666;
 border-right: thin solid #666;
}
 
tfoot {
  border-bottom: thin solid #666;
}
 
caption {
  font-size: 1.5em;
  border-radius: 0.5em 0.5em 0 0;
  padding: 0.5em 0 0 0
}
/* 3. und 4. Spalte rechtsbündig */
td:nth-of-type(3),td:nth-of-type(4) {
  text-align: right;
}
</style>
  <title>Tabellen mit CSS gestalten</title>
</head>
 
<body>
 
<h1>Tabellen mit CSS gestalten 7</h1>
 
<table>
  <caption>Bundesländer im Vergleich</caption>
<tbody>
  <tr>
    <th>Land</th>
    <th>Hauptstadt</th>
    <th>Fläche<br />
        (km²)</th>
    <th>Einwohner<br />
        (Mio.)</th>
  </tr>
  <tr>
    <td>Baden-Württemberg</td>
    <td>Stuttgart</td>
    <td>35.751</td>
    <td>10,631</td>
  </tr>
 
  <tr>
    <td>Bayern</td>
    <td>München</td>
    <td>70.550</td>
    <td>12,604</td>
  </tr>
  <tr>
    <td>Berlin</td>
    <td>Berlin</td>
    <td>892</td>
    <td>3,422</td>
  </tr>
  <tr>
    <td>Brandenburg</td>
    <td>Potsdam</td>
    <td>29.654</td>
    <td>2,449</td>
  </tr>
  <tr>
    <td>Bremen</td>
    <td>Bremen</td>
    <td>419</td>
    <td>0,657</td>
  </tr>
  <tr>
    <td>Hamburg</td>
    <td>Hamburg</td>
    <td>755</td>
    <td>1,746</td>
  </tr>
  <tr>
    <td>Hessen</td>
    <td>Wiesbaden</td>
    <td>21.115</td>
    <td>6,045</td>
  </tr>
  <tr>
    <td>Mecklenburg-Vorpommern</td>
    <td>Schwerin</td>
    <td>23.212</td>
    <td>1,597</td>
  </tr>
  <tr>
    <td>Niedersachsen</td>
    <td>Hannover</td>
    <td>47.613</td>
    <td>7,791</td>
  </tr>
  <tr>
    <td>Nordrhein-Westfalen</td>
    <td>Düsseldorf</td>
    <td>34.110</td>
    <td>17,572</td>
  </tr>
  <tr>
    <td>Rheinland-Pfalz</td>
    <td>Mainz</td>
    <td>19.854</td>
    <td>3,994</td>
  </tr>
  <tr>
    <td>Saarland</td>
    <td>Saarbrücken</td>
    <td>2.569</td>
    <td>0,991</td>
  </tr>
  <tr>
    <td>Sachsen</td>
    <td>Dresden</td>
    <td>18.420</td>
    <td>4,046</td>
  </tr>
  <tr>
    <td>Sachsen-Anhalt</td>
    <td>Madgeburg</td>
    <td>20.452</td>
    <td>2,245</td>
  </tr>
  <tr>
    <td>Schleswig-Holstein</td>
    <td>Kiel</td>
    <td>15.800</td>
    <td>2,816</td>
  </tr>
  <tr>
    <td>Thüringen</td>
    <td>Erfurt</td>
    <td>16.173</td>
    <td>2,161</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td><b>Bundesrepublik Deutschland</b> (DE)</td>
    <td>Berlin</td>
    <td><b>357.340</b></td>
    <td><b>80,767</b></td>
  </tr>
</tfoot>
</table>
 
<p>Quelle: <a href="https://de.wikipedia.org/wiki/Land_%28Deutschland%29#Rahmendaten_der_L.C3.A4nder">Wikipedia</a></p>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Anw-Tabelle-7.html&oldid=81944“