Tableau CSS
L'utilisation de CSS peut grandement améliorer l'apparence des tableaux HTML.
Propriétés de la table CSS
Les propriétés de la table CSS peuvent vous aider à améliorer considérablement l'apparence de votre table.
Bordure de tableau
Pour définir une bordure de tableau en CSS, utilisez la propriété border.
L'exemple suivant définit des bordures bleues pour table, th et td :
table, th, td
{
border: 1px solid blue ;
}
Veuillez noter que le tableau de l'exemple ci-dessus a une bordure à double ligne. En effet, les éléments table, th et td ont des bordures indépendantes.
Si vous devez afficher le tableau sous forme de bordure sur une seule ligne, veuillez utiliser l'attribut border-collapse.
Collapse border
la propriété border-collapse définit si la bordure du tableau est réduite en une seule bordure ou séparée
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>注意；</b> 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>
</body>
</html>Largeur et hauteur du tableau
Les propriétés Largeur et hauteur définissent la largeur et la hauteur du tableau.
L'exemple suivant est un tableau avec une largeur de 100% et une hauteur de 50 pixels pour le ème élément :
table
{
width:100%;
}
th
{
height:50px;
}Alignement du texte du tableau
Propriétés d'alignement du texte et d'alignement vertical dans les tableaux.
text-align属性设置水平对齐方式，像左，右，或中心：
td{text-align:right;}La propriété d'alignement vertical définit l'alignement vertical, tel que le haut, le bas ou le milieu :
td
{
height:50px;
vertical-align:bottom;
}Remplissage du tableau
Si in Pour contrôler les bordures entre les espaces dans le contenu du tableau, les attributs padding des éléments td et th doivent être utilisés :
td
{
padding:15px;
}Couleur du tableau
L'exemple suivant spécifie la couleur de la bordure, ainsi que les couleurs du texte et de l'arrière-plan du ème élément
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid blue;
}
th
{
background-color:pink;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>
section suivante