diedVIPs

html knowhow

Tabellen mit Specials










Einfache Tabelle mit Überschrift <th>

 

So sieht´s aus

Haus A Haus B
Wohnfläche 100 150
Gartenfläche 50 100
Gesamtfläche 150 250
Alle Angaben in Quadratmetern.


Quellcode
<html>
<head>
Hier nichts
<style type="text/css">
Hier nichts
</style>
<head>
<body >
<table>
     <thead>
          <tr>
              <th></th>
              <th>Haus A</th>
              <th>Haus B</th>
         </tr>
     </thead>
<tbody>
     <tr> 
          <th>Wohnfläche</th>
          <td>100</td>
          <td>150</td>
     </tr>
     <tr>
          <th>Gartenfläche</th>
               <td>50</td>
               <td>100</td>
     </tr>
</tbody>
<tfoot>
     <tr>
          <th>Gesamtfläche</th>
              <td>150</td>
              <td>250</td>
     </tr>
     <tr>
           <td colspan="3">Alle Angaben in Quadratmetern.</td>
     </tr>
</tfoot>
</table>

</body>
</html>
 
 



Zellen horizontal verbinden

colspan (deutsch: Spalte überspannen) erlaubt es, eine Tabellenzelle nach rechts über mehrere Spalten auszudehnen.
So sieht´s aus

1. Spalte 2. Spalte 3. Spalte 4. Spalte
1. Spalte 4. Spalte
1. Spalte 2. Spalte
1. Spalte 2. Spalte 3. Spalte 4. Spalte

Quellcode
<html>
<head>
Hier nichts
<style type="text/css">Kein Eintrag</style>
</head>
<body>
<table>
<tbody>
     <tr>
          <td>1. Spalte</td>
         <td>2. Spalte</td>
         <td>3. Spalte</td>
         <td>4. Spalte</td>
     </tr>
     <tr>
           <td colspan="3">1. Spalte</td>
          <td>4. Spalte</td>
     </tr>
     <tr>
          <td>1. Spalte</td>
          <td colspan="3">2. Spalte</td>
     </tr>
     <tr>
          <td>1. Spalte</td>
          <td>2. Spalte</td>
          <td>3. Spalte</td>
          <td>4. Spalte</td>
     </tr>
</tbody>
</table>
</body>
</html>


Zellen vertikal verbinden

rowspan (deutsch: Zeile überspannen) erlaubt es, eine Tabellenzelle nach unten über mehrere Zeilen auszudehnen.
So sieht´s aus

1. Spalte 2. Spalte 3. Spalte
1. Spalte 2. Spalte 3. Spalte
2. Spalte 3. Spalte
3. Spalte
1. Spalte 3. Spalte

Quellcode
<html>
<head>
Hier nichts
<style type="text/css">Kein Eintrag</style>
</head>
<body>
<table>
<tbody>
     <tr>
          <td>1. Spalte</td>
          <td>2. Spalte</td>
           <td>3. Spalte</td>
     </tr>
     <tr>
           <td rowspan="3">1. Spalte</td>
           <td>2. Spalte</td>
           <td>3. Spalte</td>
     </tr>
     <tr>
          <td rowspan="3">2. Spalte</td>
          <td>3. Spalte</td>
     </tr>
     <tr>
<td>3. Spalte</td>
     </tr>
     <tr>
           <td>1. Spalte</td>
           <td>3. Spalte</td>
     </tr>
</tbody>
</table>
</body>
</html>



Sortierbare Tabelle mit Zeilennummerierung

Mit dem hier unten abgebildeten Frame binden Sie einen fremden Bewertungsframe auf Ihre Seite ein. Was Sie da sehen, ist meiner. Sie können sich eine eigene Bewertungsseite anlegen unter: webwiki.de.

Probieren Sie es aus und bewerten Sie uns.

Quellcode So sieht´s aus
<html>
<script src="../scripte/TableSort.js"></script>

<style type="text/css">
table {counter-reset: rowNumber;} table tr {counter-increment: rowNumber;} th:nth-child(1)::before {content: counter(tablerow) ' ';  color: black;font-size:0.5em; font-weight:normal;} tr:not(:first-child) {counter-increment: tablerow; }
</style>

</html>

<body >
<center><table id="table" class="sortierbar" cellpadding="3" cellspacing="0" style="width: 95%">
<thead><tr style="background-color: #FCE8C9;">
<th class="auto-style234">2020</th>
<th class="auto-style233">Sortieren</th></tr>
</thead>
<tbody>
<tr class="auto-style236"><td valign="top" style="width: 20%; height: 0%;"></td><td valign="top" style="width: 80%"></td></tr>

<tr><th class="auto-style227" valign="top" style="width: 20%"><img id="media" height="auto" class="runde-ecken" src="Bilder/Sean Connery.jpg" width="60%" /></th>
<td class="auto-style228" valign="top" style="width: auto"><span class="auto-style229"><strong>Connery, Sean </strong></span><br /><br />
<span class="auto-style229">Sir Thomas Sean Connery (* 25. August 1930 in Edinburgh, Schottland) ist ein britischer Schauspieler, Filmproduzent und
Oscar-Preisträger.
©Wikipedia </span></td></tr>

<tr><th class="auto-style227" valign="top" style="width: 20%"><img id="media" class="runde-ecken" src="Bilder/Claus Biederstaedt.jpg" style="height: auto" width="60%" /></td>
<td class="auto-style228" valign="top" style="width: auto"><strong><span class="auto-style229">Biederstaedt, Claus </span><br/><br/>
</strong><span class="auto-style87">(* 28. Juni 1928 in Stargard / Pommern; † 18. Juni 2020 in Eichenau / Oberbayern) war ein deutscher Schauspieler und Synchronsprecher. </span></td></tr>
</tbody>
</table></center>

</body>



2020 Sortieren
Connery, Sean

Sir Thomas Sean Connery (* 25. August 1930 in Edinburgh, Schottland) ist ein britischer Schauspieler, Filmproduzent und Oscar-Preisträger. ©Wikipedia
Biederstaedt, Claus

(* 28. Juni 1928 in Stargard / Pommern; † 18. Juni 2020 in Eichenau / Oberbayern) war ein deutscher Schauspieler und Synchronsprecher.
Download Button   Laden Sie das Script runter  









Kontakt    Datenschutz   Impressum