Tableaux CSS

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>

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

Tableaux CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]