CSS-Tabellen (Table)


CSS Tutorial  >  Tabellen

Mit HTML werden Sie häufig den table-Tag gefolgt von border-, cellpadding-, und cellspacing-Attributen vorfinden. Dies wäre unnötig wenn wir CSS benutzen.

Die table, th, tr, und td-Selektoren können viele der Eigenschaften, die wir weiter oben in diesem Tutorial erklärt haben, benutzen. Diese beinhalten unter anderem Eigenschaften für Text, Schriftart, Rahmen, Farbe, und Hintergrund.

Schauen wir uns ein Beispiel an: Nehmen wir an, dass wir den folgenden Stil auf eine Tabelle anwenden möchten:

  • Tabelle: Kein äußerer Rahmen, die Schriftart ist Arial, Schriftgröße 14px.
  • Überschrift: Hintergrund ist gelb.
  • Elemente: Es soll eine schwarze solide Linie unter jedem Tabellenelement geben.
  • Bei Noten unter 60, benutzen wir eine separate Klasse, die die Schriftfarbe rot machen würde.

    Das Stylesheet würde dann so aussehen:

    table {
      border: 0;
      font-family: arial;
      font-size:14px;
    }
    th {
      background-color:yellow;
    }
    td {
      border-bottom:1 solid #000000;
    }
    .fail {
      color:#FF0000;
    }

    Mit diesem Stylesheet und dem untenstehenden HTML-Code:

    <table>
      <tr>
        <th>Schülername</th>
        <th>Note</th>
      </tr>
      <tr>
        <td>Stella</td>
        <td>85</td>
      </tr>
      <tr>
        <td>Sophie</td>
        <td>95</td>
      </tr>
      <tr>
        <td>Alice</td>
        <td class="fail">55</td>
      </tr>
    </table>

    würde die Ausgabe so sein:

    Schülername Note
    Stella 85
    Sophie 95
    Alice 55

    border-collapse

    Es gibt eine weitere Eigenschaft in Bezug auf Tabellen, die wir hier nennen möchten. Diese ist die border-collapse-Eigenschaft. Die border-collapse-Eigenschaft ersetzt im Grunde das cellspacing=0-Statement. Schauen wir uns ein Beispiel hierzu an.

    Mit dem CSS-Statement:

    table {
      border:0;
      border-collpase:collpase;
      width:200px;
    }

    tr {
      border-bottom:1px solid #000;
    }

    würde der folgende HTML-Code:

    <table>
      <tr><td>Jahr</td><td>Gehalt</td></tr>
      <tr><td>2006</td><td>35,2M</td></tr>
      <tr><td>2007</td><td>40,1M</td></tr>
    </table>

    so aussehen:

    JahrGehalt
    200635,2M
    200740,1M

    Beachten Sie, dass die Rahmen der Jahres-Spalte und der Gehalts-Spalte fortlaufend sind. Dies ist der Effekt von border-collapse:collapse.

    Folgende Seite: CSS Position




    Copyright © 2024   1keydata.com   Alle Rechte vorbehalten