Zellpolsterung in Tabellen in CSS verwenden

1. Verwendung von die Eigenschaften padding und border-spacing für Zellpolsterung und Zellabstand in CSS
2. Verwenden Sie die Eigenschaft border-spacing, um den vertikalen und horizontalen Abstand in CSS festzulegen

In diesem Artikel wird das Konzept des Zellenauffüllens und des Zellenabstands mit den Möglichkeiten vorgestellt, die in CSS erreicht werden können.

Verwendung von die Eigenschaften padding und border-spacing für Zellpolsterung und Zellabstand in CSS

Der Zweck des Zellenauffüllens besteht darin, die Leerzeichen vom Zellenrand bis zum Inhalt in der Zelle bereitzustellen. Wir können die Eigenschaft padding in CSS verwenden, um die Auffüllung einer Zelle anzugeben. Die Eigenschaft padding ist eine Abkürzung für die obere, rechte, untere und linke Auffüllung. Wir können die Zellen einer Tabelle mit CSS-Selektoren auswählen und die Eigenschaft padding darauf verwenden.

Ebenso besteht der Zweck des Zellenabstands darin, die Abstände zwischen den benachbarten Zellen bereitzustellen. Wir können die CSS-Eigenschaft border-spacing verwenden, um den Abstand zwischen den Rändern der benachbarten Zellen festzulegen. Diese Eigenschaft funktioniert jedoch nur, wenn die Eigenschaft border-collapse auf separate gesetzt ist. Das bedeutet, dass wir die Eigenschaft border-spacing nicht verwenden können, wenn wir border-collapse auf collapse setzen. Der Wert separate ist der Standardwert der Eigenschaft border-collapse.

Die normale HTML-Tabelle ohne Zellenauffüllung und Zellenabstand entspricht dem folgenden angewendeten CSS. Der border-collapse:collapse impliziert, dass die Ränder der angrenzenden Zellen zu einer zusammengefügt werden. Das padding:0px gleicht keinem Padding in den Zellen. Es ähnelt dem Standardverhalten einer Tabelle.

table {
    border-collapse:collapse;
}

td {
    padding:0px;
} 

Erstellen Sie beispielsweise eine HTML-Tabelle mit den Überschriften Name, Adresse und Alter. Füllen Sie die Tabelle mit einigen Werten. Das Tag <td> </td> repräsentiert die Tabellendaten. Wählen Sie im CSS das Tag <table> und setzen Sie border-spacing auf 5px. Wählen Sie als nächstes das Tag <td> und stellen Sie padding auf 5px.

So haben wir von allen vier Seiten des Textes einen Zellenabstand von 5px erstellt. Wir haben auch einen Abstand von 5px zwischen den Rändern jeder Zelle in der Tabelle geschaffen. Wir haben gelernt, wie man Zellenauffüllung und Zellenabstand in CSS erreicht.

Beispielcode:

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>

table {
    border-spacing: 5px;
}
td {
    padding: 5px;
}

Verwenden Sie die Eigenschaft border-spacing, um den vertikalen und horizontalen Abstand in CSS festzulegen

Mit der Eigenschaft border-spacing können wir den horizontalen und vertikalen Abstand zwischen den Rändern der Zellen in der Tabelle festlegen. Im vorherigen Beispiel haben wir den horizontalen Abstand angewendet. Hier werden wir beide Abstände anwenden. Wir können zwei Werte für die Eigenschaft border-spacing angeben. Der erste ähnelt dem horizontalen Abstand und der zweite ähnelt dem vertikalen Abstand. Wir können diese Methode in der oben erstellten Tabelle anwenden.

Wählen Sie beispielsweise das Tag table aus und stellen Sie border-spacing auf 8px und 5px. Es erstellt den horizontalen Abstand von 8px und den vertikalen Abstand von 5px.

Beispielcode:

table {
    border-spacing:8px 5px;
}
td {
    padding: 5px;
}

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>