Wir können CSS verwenden, um den Stil der Tabelle zu definieren. Die folgenden Eigenschaften werden verwendet, um Stile für
und seine Elemente zu definieren:
border Die border-Eigenschaft von CSS wird verwendet, um die Rahmenbreite, den Rahmenstil und die Rahmenfarbe zu definieren.
border-collapse Mit diesem Attribut wird angegeben, ob das
-Element einen gemeinsamen oder unabhängigen Rahmen haben soll. Das Attribut
caption caption-side wird verwendet, um das Tabellentitelfeld vertikal zu positionieren.
empty-cells Mit diesem Attribut wird festgelegt, wie leere Zellen der Tabelle angezeigt werden.
table-layout wird verwendet, um den Algorithmus zu definieren, den der Browser beim Layouten der Zeilen, Spalten und Zellen einer Tabelle verwendet.
Beispiel
Das folgende Beispiel veranschaulicht den Stil der Tabelle:
Live-Demo
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Bookman Old Style', serif;
}
th {
letter-spacing: 1.9px;
}
#one {
border-right: thick solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
<tr>
<th id="one">Employee</th>
<th>Department</th>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
<tr>
<td>Brad</td>
<td>Finance</td>
</tr>
<tr>
<td>Tim </td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>Operations</td>
</tr>
</table>
</div>
</body>
</html> Nach dem Login kopieren
Ausgabe Dies ergibt die folgende Ausgabe Live-Demo
<!DOCTYPE html>
<html>
<head>
<style>
table {
float: left;
empty-cells: hide;
box-shadow: inset 0 0 4px orange;
}
tr {
box-shadow: inset 0 0 10px greenyellow;
}
td {
font-style: italic;
box-shadow: inset 0 0 8px red;
}
table,td {
margin: 6px;
padding: 6px;
border: 1px solid black;
}
table
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html> Nach dem Login kopieren
Ausgabe
Dies ergibt die folgende Ausgabe: −
Das obige ist der detaillierte Inhalt vonTabellen mit CSS gestalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Quelle:tutorialspoint.com
Erklärung dieser Website
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
Neueste Artikel des Autors
2024-10-13 11:44:01
2024-10-13 09:56:31
2024-10-11 20:58:41
2024-10-11 16:53:11
2024-10-11 11:54:51
2024-10-10 16:21:01
2024-10-10 15:18:02
2024-10-10 13:34:01
2024-10-10 13:26:26
2024-10-10 11:38:42