Comment définir le style du tableau en CSS ? (exemple de code)-tutoriel CSS-php.cn

Comment définir le style du tableau en CSS ? (exemple de code)

青灯夜游

Libérer： 2018-09-14 18:06:33

original

8609 Les gens l'ont consulté

Ce chapitre vous présentera comment définir le style de tableau en CSS ? (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Bordure du tableau

border Pour spécifier la bordure du tableau CSS, utilisez l'attribut border.

L'exemple suivant spécifie une bordure noire pour les éléments Th et TD d'un tableau :

table, th, td
{
border: 1px solid black;
}

Copier après la connexion

Notez que dans l'exemple ci-dessus, le tableau a des bordures doubles. En effet, les éléments table et th/td ont des limites distinctes.

Pour afficher une seule bordure d'un tableau, utilisez l'attribut border-collapse.

2. Réduire la bordure

L'attribut border-collapse définit si la bordure du tableau est réduite en une seule bordure ou séparée :

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

Copier après la connexion

3. Largeur et hauteur du tableau

Les attributs Largeur et hauteur définissent la largeur et la hauteur du tableau.

L'exemple suivant est un tableau qui définit la largeur de 100 % et la hauteur du ème élément à 50 pixels :

table {width:100%;}
th{height:50px;}

Copier après la connexion

Alignement du texte du tableau

<🎜. >Texte dans le tableau Propriétés d'alignement et d'alignement vertical.

La propriété text-align définit l'alignement horizontal, comme gauche, droite ou centre :

td{text-align:right;}

Copier après la connexion

vertical-align La propriété d'alignement vertical définit l'alignement vertical, comme haut, bas, ou center :

td{
height:50px;
vertical-align:bottom;
}

Copier après la connexion

5. Rembourrage du tableau

padding Si vous souhaitez contrôler les bordures entre les espaces dans le contenu du tableau, vous devez utiliser les attributs de remplissage des td et th éléments :

td{padding:15px;}

Copier après la connexion

6. Couleur du tableau

L'exemple suivant précise la couleur de la bordure, ainsi que la couleur du texte et de l'arrière-plan du ème élément :

table, td, th { border:1px solid green; } 
th { background-color:green; color:white; }

Copier après la connexion

7. Exemple

<!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>

Copier après la connexion

Image d'effet :

Comment définir le style du tableau en CSS ? (exemple de code)