Relevante Einführung in Table in CSS

Tabellenrand

Geben Sie den CSS-Tabellenrand mit dem border-Attribut an.

Das folgende Beispiel gibt einen schwarzen Rahmen für die Th- und TD-Elemente einer Tabelle an:

Beispiel

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

Bitte beachten Sie, dass die Tabelle im obigen Beispiel das Doppelte hat rahmen. Dies liegt daran, dass die Elemente table und th/td separate Grenzen haben.

Um einen einzelnen Rand einer Tabelle anzuzeigen, verwenden Sie das Attribut border-collapse.

Collapse border

border-collapse-Eigenschaft legt fest, ob der Rand der Tabelle zu einem einzigen Rahmen reduziert oder getrennt wird:

Instanz

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

Tabellenbreite und -höhe

Die Eigenschaften „Breite“ und „Höhe“ definieren die Breite und Höhe der Tabelle.

Das folgende Beispiel ist eine Tabelle, die die Breite auf 100 % und die Höhe des .-Elements auf 50 Pixel festlegt:

Beispiel

table 
{
width:100%;
}
th
{
height:50px;
}

Tabellentextausrichtung

Textausrichtung und vertikale Ausrichtungseigenschaften in Tabellen.

Das Attribut „text-align“ legt die horizontale Ausrichtung fest, z. B. links, rechts oder in der Mitte:

Beispiel

td{text-align:right;}

Das Attribut „vertikal-align“ legt die vertikale Ausrichtung fest. wie oben, unten oder mitte:

Instanz

td
{
height:50px;
vertical-align:bottom;
}

Tabellenauffüllung

Wenn Sie Grenzen zwischen Leerzeichen im Inhalt einer Tabelle steuern möchten, sollten Sie die verwenden padding-Attribut der td- und th-Elemente:

Beispiel

td
{
padding:15px;
}

Tabellenfarbe

Das folgende Beispiel gibt die Farbe des Rahmens sowie die Text- und Hintergrundfarben von an das te Element:

Beispiel

table, td, th{border:1px solid green;}th{background-color:green;color:white;}

【Verwandte Empfehlungen】

1. Besondere Empfehlung: „php Programmer Toolbox“ V0.1 Version herunterladen

2. Kostenloses CSS-Online-Video-Tutorial

3.php.cn Dugu Jiujian (2) – CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonRelevante Einführung in Table in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!