{"id":226311,"date":"2022-08-29T15:51:00","date_gmt":"2022-08-29T12:51:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226311"},"modified":"2022-11-08T03:31:05","modified_gmt":"2022-11-08T00:31:05","slug":"comment-centrer-un-tableau-avec-css-guide-rapide","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-centrer-un-tableau-avec-css-guide-rapide\/","title":{"rendered":"Comment centrer un tableau avec CSS (Guide rapide)"},"content":{"rendered":"\n

L’utilisation de tableaux dans la conception de sites Web a une histoire int\u00e9ressante. Avant l’adoption de CSS, les tableaux n’\u00e9taient pas seulement utilis\u00e9s pour afficher des donn\u00e9es tabulaires de mani\u00e8re conventionnelle, mais \u00e9taient plut\u00f4t plus couramment utilis\u00e9s pour contr\u00f4ler des mises en page compl\u00e8tes.<\/p>\n

\u00c0 l’\u00e9poque, les tableaux HTML<\/a> \u00e9taient utilis\u00e9s pour d\u00e9finir \u00e0 la fois la structure et l’apparence visuelle des pages Web, o\u00f9 le positionnement du tableau pouvait \u00eatre sp\u00e9cifi\u00e9 directement en HTML. Par exemple, pour d\u00e9finir l’alignement d’un tableau au centre, on pourrait simplement \u00e9crire :<\/p>\n

<table align=\"center\"><\/code><\/pre>\n
Cependant, aligner vos tableaux de cette mani\u00e8re n’est plus correct et est obsol\u00e8te dans HTML5. En effet, les normes Web modernes dictent la s\u00e9paration de la structure (HTML) et du style (CSS), et la m\u00e9thode ci-dessus viole ce principe.<\/p>\n
HTML ne doit jamais \u00eatre utilis\u00e9 pour d\u00e9finir la fa\u00e7on dont un \u00e9l\u00e9ment appara\u00eet ; c’est maintenant le travail de CSS. Alors, quelle est la bonne fa\u00e7on de centrer un tableau en CSS\u00a0?<\/a> Dans cet article de notre \u00e9quipe de wpDataTables, nous abordons cette question et vous montrons quelques conseils pour aligner correctement vos tableaux.<\/p>\n
Nous connaissons une chose ou deux sur les tables, \u00e9tant donn\u00e9 que nous avons cr\u00e9\u00e9 un plugin de table WordPress<\/a> g\u00e9nial, alors plongeons-nous.<\/p>\n
Comment puis-je utiliser CSS pour centrer un tableau\u00a0?<\/h3>\n
CSS d\u00e9finit l’apparence de la page, vous permettant de contr\u00f4ler l’apparence et le positionnement de chaque \u00e9l\u00e9ment, y compris l’\u00e9l\u00e9ment table et tous ses sous-\u00e9l\u00e9ments tels que th, tr et td.<\/p>\n
Tout d’abord, passons en revue la "bonne" fa\u00e7on de centrer un tableau avec CSS. Si vos marges droite et gauche sont de valeur \u00e9gale, les navigateurs modernes devraient afficher le tableau centr\u00e9. Un moyen simple d’y parvenir consiste \u00e0 d\u00e9finir les deux marges sur automatique.<\/p>\n
Un exemple de la fa\u00e7on d’\u00e9crire ceci en CSS est ci-dessous :<\/p>\n
table<\/code><\/pre>\n
Notez que vous ne pouvez pas simplement centrer le tableau de la m\u00eame mani\u00e8re que vous le feriez avec du texte, par exemple en utilisant "text-align: center". C’est parce que l’\u00e9l\u00e9ment de tableau est un \u00e9l\u00e9ment de niveau bloc, par opposition \u00e0 un \u00e9l\u00e9ment en ligne. "texte -align: center" ne centrera que le contenu en ligne, tel que le texte dans le tableau, plut\u00f4t que le tableau lui-m\u00eame.<\/p>\n
Cependant, pour les anciennes versions d’Internet Explorer, il existe un bogue dans lequel les \u00e9l\u00e9ments de niveau bloc sont trait\u00e9s comme des \u00e9l\u00e9ments en ligne. Ainsi, la seule fa\u00e7on de centrer un tableau pour fonctionner avec certaines versions d’IE est de d\u00e9finir explicitement "text-align: center" sur l’\u00e9l\u00e9ment parent du tableau (par exemple, l’\u00e9l\u00e9ment body comme indiqu\u00e9 ci-dessous) :<\/p>\n
body {<\/code><\/pre>\n
Vous pouvez tester le comportement de diff\u00e9rents navigateurs avec diff\u00e9rents styles, soit en utilisant \u00abmargin-left: auto ; margin-right: auto\u00bb ou \u00abtext-align: center \u00bb.<\/p>\n
Nous verrons comment centrer un tableau dans les navigateurs modernes et plus anciens afin qu’il ait l’air correct.<\/p>\n
Les exemples auront le format g\u00e9n\u00e9ral suivant\u00a0:<\/p>\n
<div>\n\n<table>\n\n<\/table>\n\n<\/div><\/code><\/pre>\n
Les styles sont appliqu\u00e9s soit<\/p>\n
,<\/p>\n
ou parfois les deux.<\/p>\n
La section de feuille de style avec laquelle nous allons jouer pour d\u00e9finir les marges est\u00a0:<\/p>\n
.center1<\/code><\/pre>\n
Cet exemple fonctionnera bien sur les navigateurs les plus r\u00e9cents. Cela fonctionnera \u00e9galement sur la plupart des navigateurs plus anciens. Une fois que vous avez utilis\u00e9 cette m\u00e9thode, ouvrez-la dans diff\u00e9rents navigateurs pour v\u00e9rifier son apparence.<\/p>\n
CSS pour les anciens navigateurs et les nouveaux navigateurs ensemble\u00a0:<\/p>\n
.centertbl<\/code><\/pre>\n
Comment \u00e7a marche? La premi\u00e8re partie est mise dans le<\/p>\n
. Cela centrera une table dans Internet Explorer 5 et Netscape 4. La deuxi\u00e8me partie s’applique au<\/p>\n
dans un<\/p>\n
.<\/p>\n
Les param\u00e8tres des marges vous permettront de centrer un tableau dans les navigateurs qui fonctionnent bien avec CSS. Ensuite, le texte en ligne sera remis \u00e0 l’alignement gauche par d\u00e9faut, rempla\u00e7ant le "text-align: center" initial pour la prise en charge des anciens navigateurs.<\/p>\n
Comment centrer avec une marge<\/h3>\n
L’une des fa\u00e7ons les plus courantes de centrer un tableau consiste \u00e0 d\u00e9finir les marges inf\u00e9rieure et sup\u00e9rieure sur 0, et les marges gauche et droite sur automatique.<\/p>\n
Voici une m\u00e9thode couramment utilis\u00e9e\u00a0:<\/p>\n
table {<\/code><\/pre>\n
Ou vous pouvez le faire de cette fa\u00e7on :<\/p>\n
table {<\/code><\/pre>\n
Si vous recherchez un tableau d’une largeur exacte, vous pouvez le faire comme vous le feriez habituellement et la marge automatique divisera l’espace restant.<\/p>\n
table {<\/code><\/pre>\n
Une autre fa\u00e7on de proc\u00e9der consiste \u00e0 utiliser des pourcentages pour d\u00e9finir la largeur\u00a0:<\/p>\n
table {<\/code><\/pre>\n
Alignement des cellules\u00a0: alignement du texte ou alignement vertical<\/h3>\n
Si vous voulez savoir comment centrer du texte en CSS, il y a deux parties pour aligner du texte dans une cellule ; horizontalement et verticalement. Horizontalement indique si le texte s’alignera au centre, \u00e0 gauche ou \u00e0 droite de cette cellule. Ceci est contr\u00f4l\u00e9 par la propri\u00e9t\u00e9 text-align.<\/p>\n
Verticalement, c’est si c’est au milieu, en haut ou en bas de la cellule. Ceci est contr\u00f4l\u00e9 par la propri\u00e9t\u00e9 vertical-align.<\/p>\n
Vous appliquez les propri\u00e9t\u00e9s ci-dessous \u00e0 l’\u00e9l\u00e9ment TH ou TD pour aligner votre texte verticalement et horizontalement comme vous le souhaitez. Par exemple:<\/p>\n
td {\ntext-align: center;\nvertical-align: top;\n}<\/code><\/pre>\n
\"Comment<\/a><\/p>\n
Justifier le texte consiste \u00e0 ajouter des espaces entre tous les mots jusqu’\u00e0 ce qu’ils correspondent parfaitement \u00e0 l’espace disponible sur la ligne. La ligne finale ne justifie pas.<\/p>\n
Conseils de style de table<\/h3>\n
Avant de conclure, nous avons pens\u00e9 qu’il pourrait \u00eatre utile d’avoir une liste de conseils rapides pour votre r\u00e9f\u00e9rence. Ceux-ci vous aideront lorsque vous cr\u00e9erez un tableau en CSS.<\/a><\/p>\n