Wie lege ich den Tabellenstil in CSS fest? (Codebeispiel)-CSS-Tutorial-php.cn

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

青灯夜游

Freigeben： 2018-09-14 18:06:33

Original

8638 Leute haben es durchsucht

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;}

Nach dem Login kopieren

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; }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!