Heim >Web-Frontend >CSS-Tutorial >Wie lege ich den Tabellenstil in CSS fest? (Codebeispiel)
Wie lege ich den Tabellenstil in CSS fest? (Codebeispiel)
- 青灯夜游Original
- 2018-09-14 18:06:338637Durchsuche
In diesem Kapitel erfahren Sie, wie Sie den Tabellenstil in CSS festlegen. (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. Tabellenrand
border Um den CSS-Tabellenrand anzugeben, verwenden Sie das border-Attribut.
Das folgende Beispiel gibt einen schwarzen Rahmen für die Th- und TD-Elemente einer Tabelle an:
table, th, td
{
border: 1px solid black;
}Beachten Sie, dass die Tabelle im obigen Beispiel doppelte Ränder hat. 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.
2. Collapse border
border-collapse-Attribut legt fest, ob der Rand der Tabelle zu einem einzigen Rand gefaltet oder getrennt wird:
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}3 , Tabellenbreite und -höhe
Die Attribute „Width“ und „Height“ definieren die Breite und Höhe der Tabelle.
Das folgende Beispiel ist eine Tabelle, die die Breite des th-Elements auf 50 Pixel festlegt:
table {width:100%;}
th{height:50px;}4. Tabellentextausrichtung
Textausrichtung in der Tabelle und der Eigenschaft „Vertikale Ausrichtung“.
Die text-align-Eigenschaft legt die horizontale Ausrichtung fest, z. B. links, rechts oder in der Mitte:
td{text-align:right;}vertical-align Die Eigenschaft „vertikale Ausrichtung“ legt die vertikale Ausrichtung fest, z. B. oben, unten oder in der Mitte :
td{
height:50px;
vertical-align:bottom;
}5. Tabellenauffüllung
padding Wenn Sie die Grenzen zwischen Leerzeichen im Inhalt der Tabelle steuern, sollten Sie die Auffüllattribute der td- und th-Elemente verwenden:
td{padding:15px;} 6. Tabellenfarbe
Das folgende Beispiel gibt die Farbe des Rahmens sowie die Text- und Hintergrundfarbe des Elements an:
table, td, th { border:1px solid green; }
th { background-color:green; color:white; }7. Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonWie lege ich den Tabellenstil in CSS fest? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!