Tabellen mit CSS gestalten-CSS-Tutorial-php.cn

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: &#39;Bookman Old Style&#39;, 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 Styling Tables Working with CSS

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

Vorheriger Artikel：Unterschied zwischen Zurücksetzen und Normalisieren von CSS? Nächster Artikel：Was ist der Unterschied zwischen „Bildschirm“ und „nur Bildschirm“ bei Medienabfragen?

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