html Tabellen

Übersicht

die wichtigsten Tabellen-Befehle <tr>, <th>, <td>
Tabellen-Beispiel für colspan, rowspan, caption
Breitensteuerung der Zellen via .css <colgroup> <col… >
Ränder via .css border-width, border-style, border-color
Ränder via .css border-radius, border-collapse
Abstand zu den Rändern padding, border-spacing, margin
Text-Ausrichtung text-align, vertical-align, width, height
Text-Ausrichtung
Reste
Meine .css standard Definition für Tabellen
Quellen

Die wichtigsten Tabellen-Befehle `<tr>, <th>, <td>`

Tabellen fangen mit <table> an. Innerhalb <table>
können noch weitere Parameter festlegt werden wie z.B. folgende:

<colgroup> <col width="30"><col height="40">… </colgroup>
zur Festlegung der Breite width und Höhe height.
Im folgenden Beispiel sind die Breiten via .css definiert.
<tr> Zeilen-Inhalt </tr> umschießt jede Zeile (Table Row) einer Tabelle.

<th> Header </th> wird benutzt für eine Kopf-Zelle.
Je nachdem ob eine Kopf-Zeile oder Kopf-Spalte erzeugt werden soll,
muss jede Zelle entsprechend definiert sein.
Table header ist bei mir Fett, zentriert und bläulich.
<td> Datenfeld </td> ist für ein einzelnes Datenfeld
Table Data, bei mir zentriert.
<td rowspan="2"> wird benutzt, um benachbarte vertikale Zellen,
aus hier zwei Zeilen zusammenzufassen.
<td colspan="3"> wird benutzt, um benachbarte horizontale Zellen,
hier 3 Spalten aus einer Zeile zusammenzufassen.

Empfohlen, aber nicht optisch wirksam, wird die Verwendung von mind.
<thead> … </thead> und <tbody> … und evtl. <tfoot> …

Zum Anfang

Tabellen-Beispiel für `colspan, rowspan, caption`

Zur besseren Lesbarkeit nicht vollständig übersetzt.
Optisch besser lesbar dargestellt…
Das <br><br> hinter caption hilft übrigens nicht
und wird vor der Tabelle ausgeführt (auffällig viel Platz).
Wie man weiter unten sieht, "klebt" die Überschrift noch an der Tabelle.

<table id="b_all">
  <caption>Tabellenüberschrift mit &lt;caption&gt;</caption> <br><br>
  <colgroup> <col id="mm20"><col id="mm90"><col id="mm60"> </colgroup>
  <tr> 
    <th>            &lt;th&gt;                     </th> 
    <th id="b_lh">  wurde für Zellen der 1. Spalte </th>
    <th>            und 1. Reihe verwendet.        </th>
  </tr>
  <tr id="b_top"> 
    <th>             2. Reihe                          </th> 
    <td id="b_lh">   <tr> wird benutzt je Zeile wie Row </td>
    <td rowspan="2"> <td rowspan="2"> fasst 2 Zeilen zusammen. </td>
  </tr>
  <tr>
    <th>             3. Reihe                    </th>
    <td>            <td> wird benutzt je Zelle   </td>
  </tr>
  <tr> 
    <th>             4. Reihe   </th>
    <td>
      colspan="2">  <td colspan="2"> fasst 2 Spalten <br>mit Umbruch zusammen. 
    </td> 
  </tr>
</table>

Zum Anfang

Tabellenaussehen

Und so, in etwa, sieht es dann aus.
Ich hoffe man kann gut den Unterschied Zwischen den Zellen
< rowspan… und < colspan… erkennen.
Im ersten Fall geschieht der Umbruch aufgrund der Zellengröße.
Im zweiten Fall wurde der Umbruch forciert aufgrund <br>.

Tabellenüberschrift mit <caption>
<th>	wurde für Zellen der 1. Spalte	und 1. Reihe verwendet.
2. Reihe	<tr> wird benutzt je Zeile wie Row	<td rowspan="2"> fasst 2 Zeilen zusammen.
3. Reihe	<td> wird benutzt je Zelle	<td rowspan="2"> fasst 2 Zeilen zusammen.
4. Reihe	<td colspan="2"> fasst 2 Spalten mit Umbruch zusammen.

Den äußeren Rahmen der Tabelle habe ich via <table id="b_all"> erstellt.
Die horizontale Trennung habe ich in der 2. Zeile via <tr id="b_top"> erstellt.
Und den vertikalen Balken habe ich in 2 Zellen erstellt. Siehe <td id="b_lh">
Alles ist nur anwendbar bei entsprechender Definition in der .CSS-Datei.

#b_top   { border-top: 1px solid black; }		
#b_lh    { border-left: 1px solid black; }
#b_all   { border: 1px solid black; }

Zum Anfang

Befehle zur Breitensteuerung jeder Spalte `colgroup, col`

In HTML5 ist es bereits obsolet die folgenden Befehle zu benutzen!
bgcolor, border, cellpadding, cellspacing, frame, rules, width,

Daher ist folgendes nicht mehr erlaubt.
style="width:400" oder style="width:80%" bezogen auf die Breite des Inhaltes.
style="height:150" macht dann auch keinen Sinn mehr.

Anstatt der oben genannten Definitionen am Tabellenanfang,
ist es besser auf bereits in der .css Datei definierte Strukturen zuzugreifen.
Z.B. via <colgroup> <col id="name"> </colgroup>
Als Namen kann ich zuvor in .CSS definierten Breiten z.B. id="mm20" nutzen.

In der .css Datei steht dann z.B. folgendes

#mm5     { width:  25px;}
#mm10    { width:  50px;}    /* bis 95mm in 5er, danach 10er Schritten   */
#mm15    { width:  75px;}    /* wäre besser als .mm5 und mit class="mm5" */
#mm20    { width: 100px;}    /* allerdings 2 Buchstaben länger :-(       */
…
#mm200   { width: 1000px;}   /* und statt px, em zu verwenden, wäre auch besser ;-) */

15 mm

20 mm

25 mm

30 mm

35 mm

40 mm

45 mm

50 mm

55 mm

30 mm

60 mm

65 mm

55 mm

70 mm

75 mm

35 mm

80 mm

85 mm

15 mm

90 mm

95 mm

85 mm

100 mm	80 mm
110 mm		70 mm
120 mm			60 mm
130 mm				50 mm
140 mm					40 mm
150 mm						30 mm
160 mm							20 mm
170 mm								10
180 mm

Der Code der zweiten Tabelle sieht wie folgt aus.

<table> 

    <colgroup> 

     <col id="mm100"><col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10"> 
  
    </colgroup> 

    <tr> <td id="b_all"> 100 mm  </td>  <td colspan="8"> 80 mm </td>   </tr> 

    <tr> <td colspan="2" id="b_all"> 110 mm </td>  <td colspan="7"> 70 mm </td>   </tr> 

    <tr> <td colspan="3" id="b_all"> 120 mm </td>  <td colspan="6"> 60 mm </td>   </tr> 

    <tr> <td colspan="4" id="b_all"> 130 mm </td>  <td colspan="5"> 50 mm </td>   </tr> 

    <tr> <td colspan="5" id="b_all"> 140 mm </td>  <td colspan="4"> 40 mm </td>   </tr> 

    <tr> <td colspan="6" id="b_all"> 150 mm </td>  <td colspan="3"> 30 mm </td>   </tr> 

    <tr> <td colspan="7" id="b_all"> 160 mm </td>  <td colspan="2"> 20 mm </td>   </tr> 

    <tr> <td colspan="8" id="b_all"> 170 mm </td>  <td>10   </td>   </tr> 

    <tr> <td colspan="9" id="b_all"> 180 mm </td>   </tr> 

</table>

Zum Anfang

Ränder via .css `border-width, border-style, border-color`

Folgendes <table border="1"> ist also nicht mehr erlaubt!

border="0" keine sichtbare Umrandung, da überall Liniendicke = 0
border="1" bezieht sich bei <table> auf den äußeren Rand der Tabelle.
bordercolor="green"
bgcolor="yellow" Hintergrundfarbe ist nicht mehr zulässig.

Stattdessen kann man im Header <style> oder in der .css-Datei
gleich 3 Parameter auf einen Schlag definieren.
Hier: border-width: 5px;, border-style: groove; und border-color: snow2;
Die Farbe Silver ist laut CSS3 nicht mehr als Farbname bekannt.
Stattdessen nam ich snow2. Aber der aktuelle Firefox 115.6.0esr kann offensichtlich nur CSS2.
Weitere Farben siehe z.B. w3schools.com Farb-Tabelle
Farben sind auch als 3-stelliger Code oder 6-stelliger hexadezimaler Code angebbar.

Ränder sind nicht auf Tabellen beschränkt! Hier ein Paragraph 2px solid red.

<style>
   #bd1 { border: 2px solid red; }
   #bd2 { border: 6px double blue; }
   #bd3 { border: 15px none black; }
   #bd4 { border: 2px dotted BlueViolet; }
   #bd5 { border: 2px dashed chocolate; }
   #bd6 { border: 10px groove Silver; }		
   #bd7 { border: 10px ridge LimeGreen; }
   #bd8 { border: 10px inset DarkOrange; }
   #bd9 { border: 10px outset HotPink; }
   #bd0 { border-top: thick double #000;
          border-right: 5px hidden HotPink;  /* nicht sichtbar */
          border-bottom: 5px dotted #ffd700; 
          border-left: .5em solid yellow;
        }
</style>

Der border-style ist nicht umbedingt selbsterklärend.
Daher anbei ein paar Beispiel-Tabellen.

2px solid red		10px groove Silver

6px double blue		10px ridge LimeGreen

15px none black		10px inset DarkOrange

2px dotted BlueViolet		10px outset HotPink

2px dashed chocolate		special

Bei der Tabelle special habe ich jede border anders gestaltet.
Die Reihenfolge der Parameter ist zwar willkührlich, aber ich wählte die selbe Reihenfolge,
also ob ich 4 Parameter angeben würde. Also im Uhrzeigersinn top right bottom left.

Zum Anfang

Ränder Gestaltung `border-radius, border-collapse`

Ränder von Tabellen können auch mit border-radius: 10px; abgerundet werden.
Das funktioniert aber nur bei border-collapse: separate;.

Name	Ina
Größe	1,8 m

Ich hoffe man kann gut erkennen, wie dicht der Rand sich um die Buchstaben schmiegt.
Anbei der <style> und die <table>.

#bd11 { border: 2px solid blue;   border-spacing: 10px; 
        border-radius: 10px;      border-collapse: separate; }

<table id="bd11">
   <tr id="bd11"> <th id="bd11"> Name </th><td id="bd11"> Ina   </td> </tr>
   <tr id="bd11"> <th> Größe          </th><td id="bd11"> 1,8 m </td> </tr>
</table>

Zum Anfang

Abstand zu den Rändern `padding, border-spacing, margin`

Damit der Rahmen nicht so am Text klebt, gibt es für Innen und Außen entsprechende Befehle.

padding wird für den Innabstand Text zu Rahmen verwendet.
margin ist der Außenabstand des Rahmens zum übrigen Text.
Siehe auch auf der Seite Html-Boxenmodell.
border-spacing definiert den Abstand zwischen den einzelnen Tabellen-Elementen <td>
und dem Tabellenrahmen <table>. Es macht also nur Sinn bei border-collapse: separate;.
Zur besseren Darstellung verwende ich hier noch ein wenig background-color.

Abstand Text zur Tabelle ist 2em. Der rechte Abstand ist mangels umfließenden Textes nicht erkennbar.
Die 4em von der Tabelle bis zum nächsten Text, sind hoffentlich gut zu erkennen.
Und die 6em linker Rand sind auch gut zu erkennen.

margin	padding
2em 1em 4em 6em oben rechts unten links	1em 4em oben & unten Links und rechts

Wenn nur zwei Parameter angegeben werden, bezieht sich der erste auf oben und unten. Siehe padding.
1em entspricht etwa der Breite vom "m". 4em sind absichtlich etwas übertrieben.

Anbei die nötige Style-Definition und die Tabelle.

#bd12 { border: 3px solid Brown; 
        margin: 2em 1em 4em 6em; 
        padding: 1em 4em; 
        background-color: lightblue;}
        
<table id="bd12">
   <tr id="bd12"> <th id="bd12"> margin </th>   <th> padding  </th> 
   </tr>
   <tr id="bd12"> 
      <td id="bd12"> 
         2em &nbsp; 1em &nbsp; 4em &nbsp; 6em <br> oben rechts unten links	
      </td>
      <td id="bd12"> 
         1em &nbsp; &nbsp; 4em <br> oben & unten &nbsp; Links und rechts 
      </td> 
   </tr>
</table>

Zum Anfang

Text-Ausrichtung `text-align, vertical-align, width, height`

Dieses Mal habe ich den Stil als sog. Inline-Element angegeben,
statt im <style>-Bereich oder in einer .CSS-Datei es anzugeben,
da vertical-align nur dort funktioniert.

`justify` - Verteilt den Text auf den zur Verfügung stehenden hor. Raum - Blocksatz. Ohne `vertical-align` ist der Text dann vertikal zentriert.	`initial` - Initial ist der Standardwert horzontal. `baseline` - Ist vertikal der Standard.	`inherit` - Ist der ererbte x- oder y-Wert vom übergeordneten Element.
hor.: `left` vert.: `top` oder `text-top` weniger vert.: `super`	hor.: `center` vert.: `middle`	hor.: `right` vert.: `bottom` weniger vert.: `sub`

Und der entsprechende html-Text dazu.
Ich hoffe man kann gut erkennen, wie es wirkt wenn padding fehlt.

<table style="border: 1px solid black;"> 

  	<colgroup><col id="mm50"> <col id="mm50">	<col id="mm50"> </colgroup>  
 
  	<tr>  

    	<td style="text-align: justify; height: 9em; border: 1px solid black; padding: 10px; background-color: #ffe;">  
 
        <code>justify</code> - …  

   	</td>  

   	<td style="text-align: initial; vertical-align: baseline;">  
 
            <code>initial</code> - …  

   	</td>  

   	<td style="text-align:inherit; vertical-align: inherit; border: 1px solid black; padding: 10px; background-color: #ffe;">  
 
            <code>inherit</code> - …  

   	</td>  

  	</tr> 

  	<tr>  

   	<td style="text-align: left; vertical-align:top; height: 7em;">  

            …  

   	</td>  

   	<td style="text-align: center; vertical-align: middle; border: 1px solid black; padding: 10px; background-color: #ffe;">  
 
            …   

   	</td>  

   	<td style="text-align: right; vertical-align: bottom;">  

            … 

     </td>  

    </tr> 

</table>

Unterschied `height, min-height, line-height`

height - Höhe eines Elementes
min-height: 4em; kann zu klein sein & überschreibt height
line-height: 4em; Höhe je Zeile Text

Zum Anfang

Texte-gedreht `writing-mode & text-orientation`

Beim Drehen von Text wird es haarig!

Es sind kaum Beschreibungen zu finden und diese funktionieren nicht in jeder Situation.
Daher habe ich selber ein wenig probiert und bin zu folgenden gekommen.

Für den gedrehten Text habe ich bewusst eine andere Hintergrundfarbe verwendet
um die Dimensionen zu sehen. Der dafür nötige Code hält sich in Grenzen.
Ob nun vertical-rl oder vertical-lr ergibt bei mir keinen Unterschied.
Fast ebenso ergibt, sideways oder mixed kaum einen Unterschied.

div.rol { writing-mode: vertical-rl;      /* style */
          text-orientation: sideways; 
          background-color: oldlace; }

<div style="float: right; padding-left: 10px;" class="rol">
   Beim Drehen von Text wird es haarig!
</div>

Gedrehter Text in einer Tabelle

Diese Orientierung lässt sich auch wunderbar in einer Tabelle nutzen.
Die Textbreit entspricht der Höhe in der Tabelle und umgekehrt.
Wichtig ist, das das padding: 15px;
nicht innerhalb von div class="rol" stattfindet.
Wie man sieht, habe ich das auf der Apotheken-Seite zuerst verwendet.

Produkt	Datum	apodiscounter.de	aponeo.de	besamex.de	delmed.de	medicaria.de	medpex.de	mycare.de	my-forum-apotheke	sanicare.de	shop-apotheke
Lorano akut 100 stk PZN 07224435	21.01.24	18,59	23,15	21,53	33,35	23,35	20,92	19,49	18,78	23,78	21,56

<table id="bd5">      
<colgroup> 
  <col id="mm60"><col id="mm15">
  <col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10">
  <col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10"> 
</colgroup>
  <tr>
    <>Produkt</th>
    <th>Datum</th>	
    <th style=""> <div class="rol">apodiscounter.de			
    <th style="padding: 15px;"> <div class="rol">aponeo.de   </div></th>
    <th style="padding: 15px;"> <div class="rol">besamex.de  </div></th>		
    <th style="padding: 15px;"> <div class="rol">delmed.de   </div></th>
    <th style="padding: 15px;"> <div class="rol">medicaria.de</div></th>
    <th style="padding: 15px;"> <div class="rol">medpex.de   </div></th>
    <th style="padding: 15px;"> <div class="rol">mycare.de   </div></th>
    <th style="padding: 10px;"> <div class="rol">my-forum-apotheke</div></th>
    <th style="padding: 15px;"> <div class="rol">sanicare.de </div></th>
    < style="padding: 15px;"> <div class="rol">shop-apotheke </div></th>
  </tr>
  <tr>
    <td> Lorano akut 100 stk <br> PZN 07224435</td> 
    <td> 21.01.24</td>
    <td> 18,59</td><td> 23,15 </td><td> 21,53</td><td> 33,35</td><td> 23,35</td>
    <td> 20,92</td><td> 19,49 </td><td> 18,78</td><td> 23,78</td><td> 21,56</td>
  </tr>
</table>

Zum Anfang

Beliebig verdreht - geht auch mit `transform` .

Soll der Text von rechts gelesen werden können, ist ein anderer Ansatz nötig.
Auch hier habe ich den Hintergrund bewusst eingefärbt um die Dimensionen erkennen zu können.
Durch den anderen style-Teil, ist es nötig, dass das Element stehts 1em breit ist.
Daher ist die Handhabung etwas umständlicher.
Leider funktioniert <span> nicht statt <div>, welcher mit einem Zeilenumbruch verbunden ist.

div.ror { width: 1em; transform: rotate(-80deg); 
          background-color: oldlace; }

Verschachtelte `div`

Das äußere div-Element ist gemäß der gewünschten Breite.
Hier: <div style="float: left; width: 2.5em; background-color: lemonchiffon;">

Das innere div-Element ist so klein wie möglich.
Hier: <div style="width: 1em; transform: rotate(0deg); background-color: bisque;">

0°

+30°

+60°

+90°

-90°

-60°

-30°

Ich hoffe man kann gut sehen,
dass der Drehpunkt ungefähr mittig im ersten Zeichen ist.

Tabelle mit `transform`

Produkt- Name Menge PZN etc.	Datum
Produkt- Name Menge PZN etc.	Datum	mycare.de	my‑forum‑apotheke	sanicare.de	shop-apotheke
Lorano akut 100 stk PZN 07224435	21.01.24	18,59	23,15	21,53	33,35

Die zwei nicht umbrechenbaren "-" = ‑ aus "my‑forum‑apotheke"
erhalte ich via CTRL-Shift-U-2011.

Der code zur `transform` Tabelle

<table id="bd5"> 

<colgroup> <col id="mm60"><col id="mm15"><col id="mm10"><col id="mm10"><col id="mm10"><col id="mm10"></colgroup>

  <tr> 

    <th rowspan="2" style="height: 12em; ">Produkt-<br> Name <br> Menge <br> PZN <br> <br> etc.</th> 

    <th rowspan="2"	>Datum</th> 

    <th colspan="4" style="vertical-align:top;"> </th> 

  </tr> 

  <tr> 

    <th style="height: 1em; border: 1px solid black;"> <div  							class="ror">mycare.de			</div></th> 

    <th>              <div  							class="ror">my‑forum‑apotheke	</div></th> 

    <th> <div style="border: 1px solid black;"  class="ror">sanicare.de			</div></th> 

    <th>              <div  							class="ror">shop-apotheke		</div></th> 

  </tr> 

  <tr> 

    <td> Lorano akut 100 stk <br> PZN 07224435 </td><td> 21.01.24 </td><td>18,59</td><td>23,15</td><td>21,53</td><td>33,35</td> 

  </tr> 

</table>

Zum Anfang

Reste

table-layout: fixed
tr:nth-child(even) { background-color: #f2f2f2;} hor. Streifen-Layout
td:nth-child(even), th:nth-child(even) { background-color: #D6EEEE;} vert. Streifen

Zum Anfang

Meine .css standard Definition für Tabellen

table 	
{  padding: .6rem;                   /* 10px */
   margin:  .6rem;
   border-collapse: collapse;  
}
tr:hover { background-color:#fffbf0; }	
th {  background-color:#E8E8ff; }    /* th Default ist mittig */
td {  text-align: center; }          /* sonst wäre td linksbündig */

#b_top   { border-top: 1px solid black; }		
#b_lh    { border-left: 1px solid black; }
#b_all   { border: 1px solid black; }

Durch border-collapse: collapse hat jede Zelle nur einen Rahmen zum Nachbar,
statt zwei, wie im Beispiel Ränder Gestaltung gezeigt.

Zum Anfang

Quellen

www-hera-b.desy.de (alte Kopie von selfhtml.org) Tabellengestaltung.
stackoverflow.com how to rotate text left 90 degree and cell size is adjusted according to text in html
123mathe.de Ausrichtung von HTML Tabellen
uni-koeln.de Zelleninhalte ausrichten
html-seminar.de padding: der Innenabstand – für jede Seite einzeln definierbar
delftstack.com Tabelle in HTML nach oben ausrichten
w3docs.com CSS-Eigenschaft text-align
w3schools.com HTML Tag
w3.org 10 Visual formatting model details
mozilla.org vertical-align
selfhtml.org CSS/Eigenschaften/border

Zum Anfang

html Tabellen

Übersicht

Die wichtigsten Tabellen-Befehle <tr>, <th>, <td>

Tabellen-Beispiel für colspan, rowspan, caption

Tabellenaussehen

Befehle zur Breitensteuerung jeder Spalte colgroup, col

In der .css Datei steht dann z.B. folgendes

Ränder via .css border-width, border-style, border-color

Ränder Gestaltung border-radius, border-collapse

Abstand zu den Rändern padding, border-spacing, margin

Text-Ausrichtung text-align, vertical-align, width, height

Unterschied height, min-height, line-height

Texte-gedreht writing-mode & text-orientation

Gedrehter Text in einer Tabelle

Beliebig verdreht - geht auch mit transform .

Verschachtelte div

Tabelle mit transform

Der code zur transform Tabelle

Reste

Meine .css standard Definition für Tabellen

Quellen

Die wichtigsten Tabellen-Befehle `<tr>, <th>, <td>`

Tabellen-Beispiel für `colspan, rowspan, caption`

Befehle zur Breitensteuerung jeder Spalte `colgroup, col`

Ränder via .css `border-width, border-style, border-color`

Ränder Gestaltung `border-radius, border-collapse`

Abstand zu den Rändern `padding, border-spacing, margin`

Text-Ausrichtung `text-align, vertical-align, width, height`

Unterschied `height, min-height, line-height`

Texte-gedreht `writing-mode & text-orientation`

Beliebig verdreht - geht auch mit `transform` .

Verschachtelte `div`

Tabelle mit `transform`

Der code zur `transform` Tabelle