CSS-Tabelle (Tabelle)

Tables are usually used to display tabular data.

using CSS stylesheets

When you build a table with no style or attributesHTML table, the browser will display them without any borders. Styling tables with CSS can greatly improve their appearance.

The following sections will show you how to use CSS to control the layout and representation of table elements to create elegant and consistent tables.

Add Borders to the Table

CSS borderattribute is the best way to define the table border.

The following example will set a black border with a<table>,<th>and<td>element.

table, th, td {
　　　　border:　1px solid black;
}

Collapse Table Borders

When you see the output of the previous example, you will notice that each table cell has a separate border, and there is some spacing between the borders of adjacent table cells. This happens because the default table cell boundaries are separated. However, you can use the elementborder-CSSThe attribute is the best way to define the table border.

In the following example, the style rules will collapse the table cell borders and apply a one-pixel black border to the table and table cell elements.

table　{
　　　　border-collapse: collapse;
}
table, th, td {
　　　　border:　1px solid black;
}

You can also set the space between table cell borders to be removed by CSS valuesborder-spacingThe property is set to 0. However, it only removes the space but does not merge as when you set the border-collapse to collapse.

Adjust the internal space of the table

By default, the table cells created by the browser are just large enough to contain the data within the cell. To add more space around the content of the table cell, you can use the CSS padding property as shown below:

th, td {
　　　　padding:　15px;
}

border-spacingIf the table borders are separated (the default setting), you can also use CSS properties to adjust the spacing between cell borders.

The following style rules are applied between all borders of the table10Pixel spacing:

table　{
　　　　border-spacing:　10px;
}

Control Table Layout

Under Standard Conditions, the table expands and contracts to accommodate the data it contains. When data is filled into the table, it continues to expand as long as there is space. However, it is sometimes necessary to set a fixed width for the table to manage the layout.

Sie können die CSS table-layout-Eigenschaft, um diese Aktion auszuführen. Diese Eigenschaft definiert das Algorithmus, der zur Anordnung der Tabellenzellen, Zeilen und Spalten verwendet wird. Diese Eigenschaft nimmt einen von zwei Werten an:

• auto —verwendet den automatischen Tabellenlayoutalgorithmus. Mit diesem Algorithmus kann die Breite der Tabelle und ihrer Zellen angepasst werden, um dem Inhalt zu entsprechen. Dies ist der Standardwert.

• fixed -verwendet den festen Tabellenlayoutalgorithmus. Mit diesem Algorithmus hängt die horizontale Anordnung der Tabelle nicht von den Inhalten der Zellen ab; sie hängt nur von der Breite der Tabelle, der Breite der Spalten und den Rändern oder dem Abstand zwischen den Zellen ab.

In den folgenden Beispielen weisen die Styleregeln darauf hin, dass die Tabelle mit einem festen Layoutalgorithmus gestaltet ist und eine300 Pixel festen Breite.

table　{
　　　　width:　300px;
　　　　table-layout:　fixed;
}

keine-festgelegten Werte der layout-Eigenschaft, auf großen Tabellen wird der Benutzer keine Teile der Tabelle sehen, bis der Browser die gesamte Tabelle dargestellt hat.

behandelt leere Zellen

Diese empty-Die cellsCSS-Eigenschaft kontrolliert die Grenzen und hat eine Anzeige ohne offensichtliches Inhalt in einer Zelle mit einem separaten Rändermodellzellenhintergrund.

Dieser Attribut kann einen von drei Werten annehmen: show, hide oder inherit.

Die folgenden Styleregeln verbergen leere Zellen im table-Element.

table　{
　　　　border-collapse:　separate;
　　　　empty-cells:　hide;
}

steuert die Position der Tabellenüberschrift

Diese caption-sideCSS-Eigenschaft die vertikale Position des Tabellenüberschriftsfelds einstellt.

Die folgenden Styleregeln platzieren die Tabellenüberschrift unterhalb ihres übergeordneten Tables. Allerdings kann die horizontale Ausrichtung des Untertitels Texts geändert werden, indem dietext-alignEigenschaften.

caption　{
　　　　caption-side:　bottom;
}