Testen Sie Ihre Fähigkeiten: Tabellen

In der Lektion über Tabellen gestalten haben wir eine Tabelle auf ziemlich grelle Weise gestaltet. In dieser Aufgabe werden wir dieselbe Tabelle gestalten, aber unter Verwendung einiger guter Praktiken für Tabellendesign, wie im externen Artikel Web Typography: designing tables to be read not looked at beschrieben.

Unsere fertige Tabelle wird wie das Bild unten aussehen. Es gibt mehrere Möglichkeiten, dies zu erreichen, aber wir schlagen vor, dass Sie ähnliche Muster wie im Tutorial verwenden, um die folgenden Dinge zu tun:

• Fügen Sie den Tabellenüberschriften und Daten einen Abstand von 0.3em hinzu und richten Sie sie oben in ihren Zellen aus.
• Richten Sie die Überschriften und Daten für Spalten, die Zahlen enthalten, rechts aus.
• Richten Sie die Überschriften und Daten für Spalten, die Text enthalten, links aus.
• Richten Sie die Überschrift des Tabellenfußes rechts aus.
• Richten Sie die Daten des Tabellenfußes links aus.
• Fügen Sie der Tabelle eine obere und untere feste Grenze von 1px mit der Hex-Farbe #999 hinzu.
• Fügen Sie dem Fuß eine obere feste Grenze von 1px mit der Hex-Farbe #999 hinzu.
• Entfernen Sie den Standardabstand zwischen den Tabellenrand-Elementen, um das erwartete Ergebnis zu erzielen.
• Streifen Sie jede ungerade Zeile der Haupttabelle mit der Hex-Farbe #eee.

Bonusfrage: Was können Sie tun, um das Verhalten der Tabellenlayouts etwas vorhersehbarer zu gestalten? Denken Sie daran, wie Tabellenspalten standardmäßig in der Größe angepasst werden und wie wir dieses Verhalten ändern können, um die Spalten entsprechend der Breite ihrer Überschriften anzupassen.

Versuchen Sie, den folgenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>
    <tr>
      <th scope="row">The Damned</th>
      <td>1976</td>
      <td>10</td>
      <td>Smash it up</td>
    </tr>
    <tr>
      <th scope="row">Sex Pistols</th>
      <td>1975</td>
      <td>1</td>
      <td>Anarchy in the UK</td>
    </tr>
    <tr>
      <th scope="row">Sham 69</th>
      <td>1976</td>
      <td>13</td>
      <td>If the kids are united</td>
    </tr>
    <tr>
      <th scope="row">Siouxsie and the Banshees</th>
      <td>1976</td>
      <td>11</td>
      <td>Hong Kong Garden</td>
    </tr>
    <tr>
      <th scope="row">Stiff Little Fingers</th>
      <td>1977</td>
      <td>10</td>
      <td>Suspect Device</td>
    </tr>
    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

body {
  padding: 1em;
  font: 1.2em / 1.5 sans-serif;
  font-size: 80%;
}

/* Add styles here */

table {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  border-collapse: collapse;
}

th,
td {
  vertical-align: top;
  padding: 0.3em;
}

tr :nth-child(2),
tr :nth-child(3) {
  text-align: right;
}

tr :nth-child(1),
tr :nth-child(4) {
  text-align: left;
}

tbody tr:nth-child(odd) {
  background-color: #eee;
}

tfoot {
  border-top: 1px solid #999;
}

tfoot tr :nth-child(1) {
  text-align: right;
}

tfoot tr :nth-child(2) {
  text-align: left;
}

table {
  table-layout: fixed;
  width: 100%;
}

• CSS Styling-Grundlagen
• Web Typography: Designing Tables to be Read, Not Looked At auf alistapart.com (2017)