Heim  >  Artikel  >  Web-Frontend  >  Relevante Einführung in Table in CSS

Relevante Einführung in Table in CSS

零下一度
零下一度Original
2017-05-16 11:20:231825Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn