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 © 2021   1keydata.com   Alle Rechte vorbehalten

  • 老湿机69福利区无码_老子影院午夜伦无码_开心亚洲五月丁香五月