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!
