Heim > Artikel > Web-Frontend > Wie lege ich den Tabellenstil in CSS fest? (Codebeispiel)

Wie lege ich den Tabellenstil in CSS fest? (Codebeispiel)

青灯夜游Original: 2018-09-14 18:06:338611Durchsuche

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:

Wie lege ich den Tabellenstil in CSS fest? (Codebeispiel)

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!

css padding border table td th

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

Vorheriger Artikel：Detaillierte grafische Erklärung zur Verwendung von !important in CSSNächster Artikel：Detaillierte grafische Erklärung zur Verwendung von !important in CSS

In Verbindung stehende Artikel

Mehr sehen