Tableaux CSS (Tableaux)

Les tableaux sont généralement utilisés pour afficher des données en tableau.

Utiliser une feuille de style CSS

Lorsque vous construisez un tableau sans style ou attributHTML table，le navigateur les affichera sans aucune bordure. La mise en page des tableaux avec des styles CSS peut grandement améliorer leur apparence.

Les sections suivantes vous montreront comment utiliser CSS pour contrôler le layout et la représentation des éléments de tableau pour créer des tableaux élégants et cohérents. L'utilisation de styles CSS pour les tableaux peut grandement améliorer leur apparence.

Ajouter des bordures à la table

CSS borderC'est la meilleure méthode pour définir la bordure du tableau.

Le cas suivant définira une bordure noire<table>，<th>et<td>élément.

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

Réduire les bordures du tableau

Si vous avez vu la sortie de l'exemple précédent, vous remarquerez que chaque cellule de tableau a une bordure distincte et qu'il y a un certain écart entre les bordures des cellules adjacentes. Cela se produit parce que par défaut, les bordures des cellules de tableau sont séparées. Mais vous pouvez utiliser l'élémentborder-collapseLes attributs sur les bordures individuelles du tableau plieront les bordures en une seule bordure <table> :

Dans l'exemple suivant, les règles de style plieront les bordures des cellules du tableau et appliqueront une bordure noire d'un pixel aux éléments du tableau et des cellules du tableau.

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

Vous pouvez également supprimer l'espace entre les bordures des cellules de tableau en définissant la valeur CSS.border-spacingL'attribut est de 0. Mais, il ne supprime pas l'espace, mais ne fusionne pas comme lorsque vous définissez la bordure border-collapse pour collapse.

Ajustement de l'espace interne du tableau

Par défaut, les cellules de tableau créées par le navigateur sont exactement suffisantes pour contenir les données de la cellule. Pour ajouter plus d'espace autour du contenu de la cellule de tableau, vous pouvez utiliser l'attribut CSS padding, comme indiqué ci-dessous :

th,　td　{
　　　　padding:　15px;
}

border-spacingSi les bordures du tableau sont séparées (réglage par défaut), vous pouvez également utiliser les attributs CSS pour ajuster l'écart entre les bordures des cellules.

Les règles de style suivantes s'appliquent entre toutes les bordures du tableau10Écart en pixels :

table　{
　　　　border-spacing:　10px;
}

Contrôle du布局 du tableau

Par défaut, le tableau s'étend et se rétrécit pour容纳其中包含的数据。当数据填充到表中时，只要有空间，数据就会继续扩展。但是，有时需要为表格设置固定宽度以管理布局。

Vous pouvez utiliser la propriété CSS table-La propriété layout pour effectuer cette opération. Cette propriété définit l'algorithme utilisé pour布置 les cellules, les lignes et les colonnes du tableau. Cette propriété prend l'une des deux valeurs suivantes :

• auto —Utilisez l'algorithme de mise en page automatique du tableau. Avec cet algorithme, vous pouvez ajuster la largeur du tableau et des cellules pour les adapter au contenu. C'est la valeur par défaut.

• fixed -Utilisez l'algorithme de mise en page du tableau fixe. Avec cet algorithme, la mise en page horizontale du tableau ne dépend pas du contenu des cellules ; elle dépend uniquement de la largeur du tableau, de la largeur des colonnes et de l'épaisseur des bordures ou des espaces entre les cellules.

Dans l'exemple suivant, les règles de style indiquent que le tableau est mis en page en utilisant l'algorithme de mise en page fixe et a300 pixels de largeur fixe.

table　{
　　　　width:　300px;
　　　　table-layout:　fixed;
}

sans-La valeur fixe de la propriété layout, sur de grands tableaux, l'utilisateur ne voit aucune partie du tableau jusqu'à ce que le navigateur présente tout le tableau.

traitement des cellules vides

La propriété-La propriété cellsCSS contrôle les bords, et dans le cas où le tableau n'a pas de contenu apparent, une cellule utilise un modèle de fond de cellule avec un cadre séparé.

Cette propriété peut prendre l'une des trois valeurs suivantes : show, hide ou inherit.

Les règles de style suivantes masquent les cellules vides dans l'élément table.

table　{
　　　　border-collapse:　separate;
　　　　empty-cells:　hide;
}

contrôle la position de l'en-tête du tableau

La propriété-sideCSS pour définir la position verticale de la boîte d'en-tête du tableau.

Les règles de style suivantes placent les en-têtes de tableaux sous leurs parents. Cependant, pour modifier l'alignement horizontal du texte de la légende, vous pouvez utiliser la propriététext-alignAttributs.

caption　{
　　　　caption-side:　bottom;
}