Wie kann man Cellpadding und Cellspacing in CSS einstellen

Das Tag <table> hat die Attribute cellpadding und cellspacing, die in HTML5 nicht unterstützt werden, deshalb wird empfohlen, die CSS-Eigenschaften padding und border-spacing zu verwenden.

So ist die CSS-Alternative für cellpadding:

td, th {
padding: 10px;
}

Die CSS-Alternative für cellspacing ist:

table {
border-spacing: 10px;
}

Lassen Sie uns sehen, wie man sie Schritt für Schritt benutzen kann:

  1. Als erstes erstellen Sie das Element <table>, welches die Tags <th>, <tr> und <td> enthält.
  2. Stylen Sie die Tabelle mit der Eigenschaft border-collapse. Stellen Sie den Wert "separate" ein.
Beachten Sie bitte, dass der Wert "separate" voreingestellt gesetzt wird, wenn Sie die Eigenschaft border definieren.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table, td, th {
      border: 1px solid black;
      border-collapse: separate;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-collapse separate</h2>
    <table>
      <tr>
        <th>Überschrift</th>
        <th>Überschrift</th>
      </tr>
      <tr>
        <td>Irgendein Text</td>
        <td>Irgendein Text</td>
      </tr>
      <tr>
        <td>Irgendein Text</td>
        <td>Irgendein Text</td>
      </tr>
    </table>
  </body>
</html>
  1. Fügen Sie die Eigenschaft padding zu den Elementen <th> und <td> für die Definition von cellpadding:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table, td, th {
      border: 1px solid black;
      border-collapse: separate;
      }
      td, th {
      padding: 5px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-collapse separate</h2>
    <table>
      <tr>
        <th>Überschrift</th>
        <th>Überschrift</th>
      </tr>
      <tr>
        <td>Irgendein Text</td>
        <td>Irgendein Text</td>
      </tr>
      <tr>
        <td>Irgendein Text</td>
        <td>Irgendein Text</td>
      </tr>
    </table>
  </body>
</html>
  1. Um cellspacing einzustellen, definieren Sie die Eigenschaft border-spacing für das Element <table>:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table {
      border-spacing: 10px;
      }
      table, td, th {
      border: 1px solid black;
      border-collapse: separate;
      }
      td, th {
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Cellspacing Beispiel</h2>
    <table>
      <tr>
        <th>Überschrift</th>
        <th>Überschrift</th>
      </tr>
      <tr>
        <td>Irgendein Text</td>
        <td>Irgendein Text</td>
      </tr>
      <tr>
        <td>Irgendein Text</td>
        <td>Irgendein Text</td>
      </tr>
    </table>
  </body>
</html>
  1. Stylen Sie die Elemente <table>, <th>, <tr> und <td> und verwenden Sie die Eigenschaften color, background-color und text-align wo notwendig:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table {
      border-collapse: separate;
      border-spacing: 10px;
      background-color: #1c87c9;     
      }
      table, th, td {
      border: 2px solid #aaa;
      text-align: center;
      }
      th {
      color: #fff;
      background-color: #095484;
      padding: 10px;
      }
      td {
      background-color: #eee;
      padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Cellpadding und Cellspacing</h2>
    <table>
      <thead>
        <tr>
          <th>Überschrift</th>
          <th>Überschrift</th>
          <th>Überschrift</th>
          <th>Überschrift</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
        </tr>
        <tr>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
          <td>Irgendein Text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>