Tableaux CSS

L'utilisation de CSS peut grandement améliorer l'apparence des tableaux HTML :

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

Try it yourself

Bordures de la table

Pour définir les bordures de la table en CSS, utilisez border Attributs.

L'exemple suivant fixe les bordures noires pour les éléments <table>, <th> et <td> :

The following example specifies the background color and text color of the <th> element: Firstname
Points Bill
50 Steve

Container element (e.g. <div>), to achieve responsive effects:

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

Try it yourself

Attention :Le tableau de l'exemple précédent a des doubles bordures. Cela est dû au fait que le tableau et les éléments <th> et <td> ont des bordures distinctes.

Tableau de pleine largeur

Dans certains cas, le tableau ci-dessus semble petit. Si vous avez besoin d'un tableau qui couvre toute la surface de l'écran (largeur complète), ajoutez width: 100% à l'élément <table> :

Container element (e.g. <div>), to achieve responsive effects:

table {
  width: 100%;
color: white;

Try it yourself

Bordures doubles

Veuillez noter que le tableau ci-dessus a des doubles bordures. Cela est dû au fait que le tableau et les éléments th et td ont des bordures distinctes.

Pour supprimer les doubles bordures, voir l'exemple suivant.

Fusion des bordures de la table

border-collapse Définir via l'attribut si les bordures de la table doivent être repliées en une seule bordure :

The following example specifies the background color and text color of the <th> element: Firstname
Points Bill
50 Steve

Container element (e.g. <div>), to achieve responsive effects:

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

Try it yourself

Si vous ne souhaitez que la table ait une bordure autour d'elle, il suffit de spécifier border To control the spacing between the border and the table content, use

The following example specifies the background color and text color of the <th> element: Firstname
Points Bill
50 Steve

Container element (e.g. <div>), to achieve responsive effects:

table {
  border: 1px solid black;
color: white;

Try it yourself

Largeur et hauteur de la table

La largeur et la hauteur de la table sont définies par width et height Définition des attributs.

L'exemple suivant définit la largeur de la table à 100 % et la hauteur de l'élément <th> à 50px :

The following example specifies the background color and text color of the <th> element: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Container element (e.g. <div>), to achieve responsive effects:

table {
  width: 100%;
color: white;
$300
  height: 50px;
color: white;

Try it yourself

Pour créer une table qui occupe la moitié de la page, utilisez width: 50% :

Container element (e.g. <div>), to achieve responsive effects:

table {
  width: 50%;
color: white;
$300
  height: 70px;
color: white;

Try it yourself

Alignement horizontal

text-align Définir l'alignement horizontal du contenu de <th> ou <td> (gauche, droite ou centré) via l'attribut.

Par défaut, le contenu de l'élément <th> est centré, tandis que le contenu de l'élément <td> est aligné à gauche.

Pour centrer le contenu de l'élément <td>, utilisez text-align: center :

The following example specifies the background color and text color of the <th> element: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Container element (e.g. <div>), to achieve responsive effects:

$300
  text-align: center;
color: white;

Try it yourself

L'exemple suivant aligne à gauche le texte de l'élément <th> :

The following example specifies the background color and text color of the <th> element: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Container element (e.g. <div>), to achieve responsive effects:

$300
  property:
color: white;

Try it yourself

Alignement vertical

vertical-align Définir l'alignement vertical du contenu de <th> ou <td> (haut, bas ou centré) via l'attribut.

Par défaut, l'alignement vertical du contenu des tables est centré (les éléments <th> et <td> sont tous centrés).

L'exemple suivant fixe l'alignement vertical du texte de l'élément <td> en bas :

The following example specifies the background color and text color of the <th> element: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Container element (e.g. <div>), to achieve responsive effects:

td {
  height: 50px;
  vertical-align: bottom;
color: white;

Try it yourself

Table inner padding

on the <td> and <th> elements table inner padding To control the spacing between the border and the table content, use

The following example specifies the background color and text color of the <th> element: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Container element (e.g. <div>), to achieve responsive effects:

border-bottom
  padding
  property:
color: white;

Try it yourself

padding: 15px;

The following example specifies the background color and text color of the <th> element: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

text-align: left; horizontal separation line Add

Container element (e.g. <div>), to achieve responsive effects:

border-bottom
  property, to achieve horizontal separation lines:
color: white;

Try it yourself

th, td {

border-bottom: 1px solid #ddd; hoverable table on the <tr> element

The following example specifies the background color and text color of the <th> element: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Container element (e.g. <div>), to achieve responsive effects:

:hover

Try it yourself

selector, to highlight the table row when the mouse hovers over it:

The following example specifies the background color and text color of the <th> element: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

striped table To achieve the zebra striping effect, use nth-child() selector, and addbackground-color

Container element (e.g. <div>), to achieve responsive effects:

:

Try it yourself

tr:nth-child(even) {background-color: #f2f2f2;}

Table color

The following example specifies the background color and text color of the <th> element: Firstname Lastname
Points Bill Savings
50 Steve $100
94 Elon $150

Container element (e.g. <div>), to achieve responsive effects:

$300
  th {
  background-color: #4CAF50;
color: white;

Try it yourself

}

Responsive table

If the screen is too small to display all the content, the responsive table will display a horizontal scrollbar: First Name Last Name Last Name Last Name Last Name Last Name Last Name Last Name Last Name Last Name Last Name
Points Bill Gates Gates Gates Gates Gates Gates Gates Gates Gates Gates
50 Steve Jobs Jobs Jobs Jobs Jobs Jobs Jobs Jobs Jobs Jobs
94 Elon Musk Musk Musk Musk Musk Musk Musk Musk Musk Musk

67 Add a container with overflow-x:auto

Container element (e.g. <div>), to achieve responsive effects:

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

Try it yourself

Note:In OS X Lion (on Mac), the scrollbar is hidden by default and only appears when in use (even if "overflow:scroll" is set).

More examples

Make a decorative table
This example demonstrates how to create a decorative table.
Set the position of the table header
This example demonstrates how to position the table header.

CSS table properties

property description
border Propriété abrégée. Définir toutes les propriétés de bord en une seule déclaration.
border-collapse Définir si les bordures du tableau doivent être repliées.
border-spacing Définir la distance entre les bordures des cellules adjacentes.
caption-side Définir la position de l'en-tête du tableau.
empty-cells Définir si les bordures et les arrière-plans doivent être affichés sur les cellules vides du tableau.
table-layout Définir l'algorithme de mise en page pour le tableau.