Le regard d'un tableau HTML peut être grandement améliorée avec CSS:
| Compagnie | Contact | Pays |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Allemagne |
| Berglunds snabbkop | Christina Berglund | Suède |
| Centro comercial Moctezuma | Francisco Chang | Mexique |
| Ernst Handel | Roland Mendel | Autriche |
| Île de négociation | Helen Bennett | Royaume-Uni |
| Koniglich Essen | Philip Cramer | Allemagne |
| Rire Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italie |
Table Borders
Pour spécifier les bordures du tableau en CSS, utilisez la border propriété.
L'exemple ci - dessous spécifie une bordure noire pour <table> , <th> et <td> éléments:
Notez que la table dans l'exemple ci-dessus a des frontières doubles. En effet , la table et le <th> et <td> éléments ont des frontières distinctes.
Réduire Table Borders
Le border-collapse propriété définit si les frontières de la table doivent être regroupées en une seule frontière:
Exemple
table
{
border-collapse: collapse;
}
table, th, td
{
border: 1px solid black;
} Essayez - le vous - même » Si vous voulez seulement une bordure autour de la table, ne spécifier la border propriété pour <table> :
Tableau Largeur et Hauteur
Largeur et hauteur d'une table sont définies par les width et la height des propriétés.
L'exemple ci - dessous définit la largeur de la table à 100%, et la hauteur de la <th> éléments à 50px:
Alignement horizontal
Le text-align propriété définit l'alignement horizontal (comme à gauche, à droite ou au centre) du contenu de <th> ou <td> .
Par défaut, le contenu de <th> éléments sont centre-alignés et le contenu de <td> éléments sont aligné à gauche.
L'exemple suivant gauche aligne le texte dans <th> éléments:
Alignement vertical
Le vertical-align propriété définit l'alignement vertical (comme en haut, en bas ou au milieu) du contenu de <th> ou <td> .
Par défaut, l'alignement vertical du contenu dans une table est moyenne (pour les <th> et <td> éléments).
L'exemple suivant définit l'alignement du texte vertical vers le bas pour <td> éléments:
Tableau Rembourrage
Pour contrôler l'espace entre la frontière et le contenu d'une table, utilisez le padding bien sur <td> et <th> éléments:
diviseurs horizontaux
| Prénom | Nom de famille | Des économies |
|---|---|---|
| Peter | Griffon | 100 $ |
| Lois | Griffon | 150 $ |
| Joe | Swanson | 300 $ |
Ajouter le border-bottom propriété à <th> et <td> pour diviseurs horizontaux:
Tableau Hoverable
Utilisez le :hover sélecteur sur <tr> pour mettre en évidence les lignes de table sur la souris au- dessus:
| Prénom | Nom de famille | Des économies |
|---|---|---|
| Peter | Griffon | 100 $ |
| Lois | Griffon | 150 $ |
| Joe | Swanson | 300 $ |
Tables à rayures
| Prénom | Nom de famille | Des économies |
|---|---|---|
| Peter | Griffon | 100 $ |
| Lois | Griffon | 150 $ |
| Joe | Swanson | 300 $ |
Pour les tables zébrés, utilisez le nth-child() sélecteur et ajouter une background-color à tous les même (ou impaires) lignes de la table:
Table des couleurs
L'exemple ci - dessous indique la couleur et le texte de fond couleur de <th> éléments:
| Prénom | Nom de famille | Des économies |
|---|---|---|
| Peter | Griffon | 100 $ |
| Lois | Griffon | 150 $ |
| Joe | Swanson | 300 $ |
Tableau Responsive
Une table réactive affiche une barre de défilement horizontale si l'écran est trop petit pour afficher le contenu complet:
| Prénom | Nom de famille | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Forgeron | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Veille | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Ajouter un élément conteneur (comme <div> ) avec overflow-x:auto autour de la <table> élément pour le rendre sensible:
Exemple
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Essayez - le vous - même » 
Autres exemples
Faites un tableau de fantaisie
Cet exemple montre comment créer une table de fantaisie.
Réglez la position de la légende du tableau
Cet exemple montre comment positionner la légende de table.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»
Propriétés CSS de table
| Propriété | La description |
|---|---|
| border | Définit toutes les propriétés de la frontière dans une déclaration |
| border-collapse | Indique si oui ou non les bordures du tableau doivent être réduits |
| border-spacing | Indique la distance entre les bordures de cellules adjacentes |
| caption-side | Indique l'emplacement d'une légende de la table |
| empty-cells | Indique si oui ou non pour afficher les frontières et fond sur les cellules vides dans une table |
| table-layout | Définit l'algorithme de mise en page à utiliser pour une table |