Lektionen
Start
Jetzt lernen
CodeGym /Java Kurs /Frontend SELF DE /Tabellenstile

Tabellenstile

Frontend SELF DE
Level 5 , Lektion 4
Verfügbar

9.1 Verwendung von Attributen

Die Stilisierung von Tabellen in HTML kann auf verschiedene Arten durchgeführt werden. Eine Möglichkeit ist die Verwendung von Attributen direkt im Tabellentag und seinen Elementen. Obwohl moderne Webentwickler normalerweise CSS für die Stilisierung bevorzugen, ist das Verständnis von HTML-Attributen nützlich für die grundlegende Stilisierung.

Wichtige Tabellenattribute

Attribut border

Bestimmt die Dicke des Tabellenrandes. Normalerweise wird der Wert in Pixel angegeben.

HTML
    
      <table border="1">
        <tr>
          <th>Name</th>
          <th>Bewertung</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attribut cellpadding:

Legt den Innenabstand der Zellen fest (Abstände innerhalb der Zellen von ihren Rändern).

HTML
    
      <table cellpadding="10">
        <tr>
          <th>Name</th>
          <th>Bewertung</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>
Java university

Attribut cellspacing:

Bestimmt den Abstand zwischen den Zellen.

HTML
    
      <table cellspacing="5">
        <tr>
          <th>Name</th>
          <th>Bewertung</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attribute width und height:

Bestimmen die Breite und Höhe der Tabelle. Diese Attribute können auch in den Tags <td> und <th> verwendet werden, um die Größe der Zellen festzulegen.

HTML
    
      <table style="text-align: left;" width="100%" height="200">
        <tr>
          <th width="50%">Name</th>
          <th width="25%">Projekt</th>
          <th width="25%">Stadt</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>Paris</td>
        </tr>
      </table>

Attribut align:

Bestimmt die Ausrichtung der Tabelle auf der Seite (left, right, center).

HTML
    
      <table align="center">
        <tr>
          <th>Name</th>
          <th>Bewertung</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attribut bgcolor:

Bestimmt die Hintergrundfarbe der Tabelle oder der Zellen.

HTML
    
      <table bgcolor="#f0f0f0">
        <tr>
          <th>Name</th>
          <th>Bewertung</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

9.2 Attribute für Tabellenzellen

Attribute für Tabellenzellen

Attribut colspan:

Fasst Zellen horizontal zusammen.

HTML
    
      <td colspan="2">Zusammengefasste Zelle</td>

Attribut rowspan:

Fasst Zellen vertikal zusammen.

HTML
    
      <td rowspan="2">Zusammengefasste Zelle</td>

Attribut align:

Bestimmt die horizontale Ausrichtung des Zellinhalts (left, right, center).

HTML
    
      <td align="center">Zentrierter Text</td>

Attribut valign:

Bestimmt die vertikale Ausrichtung des Zellinhalts (top, middle, bottom).

HTML
    
      <td valign="top">Text an der oberen Kante</td>

Attribut bgcolor:

Bestimmt die Hintergrundfarbe für die Zelle.

HTML
    
      <td bgcolor="#ffcc00">Farbhintergrund</td>

9.3 Vollständiges Beispiel

Vollständiges Beispiel zur Tabellengestaltung mit Attributen:

HTML
    
      <table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
        <caption>Liste von Studenten und deren Bewertungen</caption>
        <thead bgcolor="#c0c0c0">
          <tr>
            <th align="left">Name</th>
            <th align="center">Alter</th>
            <th align="right">Stadt</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ivan</td>
            <td align="center">30</td>
            <td align="right">London</td>
          </tr>
          <tr>
            <td colspan="2" align="center">Maria und Peter</td>
            <td align="right">Liverpool</td>
          </tr>
          <tr>
            <td rowspan="2" valign="middle">Anna</td>
            <td>25</td>
            <td>Manchester</td>
          </tr>
          <tr>
            <td>27</td>
            <td>Leeds</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3" align="center">Ende der Tabelle</td>
        </tfoot>
      </table>

Erklärung des Beispiels

  • border="1": setzt den Tabellenrand auf 1 Pixel Breite
  • cellpadding="10": setzt den Innenabstand für alle Tabellenzellen auf 10 Pixel
  • cellspacing="5": setzt den Abstand zwischen Tabellenzellen auf 5 Pixel
  • width="80%": setzt die Breite der Tabelle auf 80% der Breite des übergeordneten Elements
  • align="center": zentriert die Tabelle auf der Seite
  • bgcolor="#e0e0e0": setzt die Hintergrundfarbe der Tabelle
  • <caption>: fügt einen Tabellentitel hinzu
  • <thead> und <tbody>: gruppieren Tabellenüberschriften und -körper. Die Hintergrundfarbe für die Überschriften ist mit bgcolor="#c0c0c0" festgelegt
  • <th> und <td>: werden verwendet, um Zellen für Überschriften und Daten zu definieren
  • <align> und <valign>: legen die horizontale und vertikale Ausrichtung des Inhalts der Zellen fest
  • <colspan> und <rowspan>: fassen Zellen horizontal und vertikal zusammen
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION