{"id":228281,"date":"2022-10-07T18:21:00","date_gmt":"2022-10-07T15:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228281"},"modified":"2022-11-09T01:39:30","modified_gmt":"2022-11-08T22:39:30","slug":"comment-fusionner-des-cellules-en-html-et-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-fusionner-des-cellules-en-html-et-wordpress\/","title":{"rendered":"Comment fusionner des cellules en HTML et WordPress"},"content":{"rendered":"\n

Un tableau de donn\u00e9es avec de nombreuses cellules les unes \u00e0 c\u00f4t\u00e9 des autres peut sembler entass\u00e9. Certaines personnes ne voient pas d’inconv\u00e9nient \u00e0 ce type de pr\u00e9sentation de donn\u00e9es, tandis que d’autres pr\u00e9f\u00e8rent savoir comment fusionner des cellules en HTML.<\/p>\n

En fusionnant des cellules dans un tableau, on peut pr\u00e9senter plusieurs \u00e9l\u00e9ments de donn\u00e9es dans une grande cellule. Ce processus entra\u00eene souvent l’affichage d’une grande cellule horizontalement, verticalement ou les deux sur plusieurs lignes ou colonnes.<\/p>\n

Lorsque les cellules d’un tableau s’\u00e9tendent sur plusieurs lignes, cela s’appelle \u00abs’\u00e9tendre sur plusieurs lignes \u00bb. Lorsque les cellules d’un tableau s’\u00e9tendent sur plusieurs colonnes, cela s’appelle \u00abs’\u00e9tendre sur des colonnes\u00bb ou \u00abcolspan \u00bb.<\/p>\n

Ceci est principalement \u00e0 des fins de pr\u00e9sentation ou de rapport pour rendre une feuille de calcul visuellement attrayante. Cet article explique comment fusionner des cellules en HTML et dans l’environnement de travail WordPress.<\/p>\n

Comment fusionner des cellules de tableau en HTML<\/h2>\n

L’attribut colspan peut fusionner plusieurs cellules de tableau dans une colonne d’un<\/p>\n

Balise HTML (donn\u00e9es du tableau). Lors de la fusion de plusieurs cellules de ligne, on peut utiliser l’attribut rowspan. Ces deux attributs seront dans le<\/p>\n

\u00e9tiquette.<\/p>\n

Les exemples suivants montrent comment utiliser ces attributs en HTML et comment ils apparaissent dans le navigateur.<\/p>\n

Comment utiliser l’attribut Rowspan<\/h3>\n

Cet attribut d\u00e9termine le nombre de lignes qu’une cellule fusionn\u00e9e doit s’\u00e9tendre verticalement. Il peut cr\u00e9er une grande cellule verticale<\/strong> \u00e0 partir de deux cellules ou plus qui occupent la m\u00eame colonne, puis l’afficher sur plusieurs lignes.<\/p>\n

Par exemple, le code<\/p>\n

fusionne deux cellules pour cr\u00e9er une grande cellule positionn\u00e9e verticalement.<\/p>\n

Un exemple de code de table HTML qui utilise l’attribut Rowspan<\/p>\n

Le code suivant provient d’un tableau \u00e0 trois colonnes et trois lignes. On peut utiliser l’attribut rowspan="2\u2033 dans le premier<\/p>\n

balise pour cr\u00e9er une seule cellule \u00e0 partir des deux premi\u00e8res cellules de la premi\u00e8re colonne.<\/p>\n

Le nombre dans l’attribut rowspan d\u00e9termine le nombre de cellules utilis\u00e9es pour le<\/p>\n

\u00e9tiquette.<\/p>\n

Voici un exemple de code de tableau HTML avec une cellule qui s’\u00e9tend sur deux lignes. Pour mieux comprendre le fonctionnement de ce code, n’h\u00e9sitez pas \u00e0 cr\u00e9er un rendu visuel dans un navigateur.<\/p>\n

<table>\n<\/code><\/pre>\n
\"Comment<\/a><\/p>\n
Le rendu de ce code dans un navigateur cr\u00e9era un tableau avec une grande cellule qui s’\u00e9tend sur la hauteur de deux lignes. Si vous modifiez la valeur de rowspan sur 3, la premi\u00e8re cellule s’\u00e9tendra sur la hauteur des trois lignes.<\/p>\n
\"Comment<\/a><\/p>\n
Lors de l’expansion d’un<\/p>\n
ligne assurez-vous de supprimer<\/p>\n
balises des autres lignes du tableau (<\/p>\n
). Lorsque la premi\u00e8re cellule s’\u00e9tend sur les trois lignes, il n’y a que deux<\/p>\n
balises dans les deux autres<\/p>\n
Mots cl\u00e9s.<\/p>\n
Comment utiliser l’attribut Colspan<\/h3>\n
Cet attribut d\u00e9termine le nombre de colonnes qu’une cellule fusionn\u00e9e s’\u00e9tendra horizontalement<\/strong>. Il cr\u00e9e une grande cellule horizontale \u00e0 partir de deux cellules ou plus qui occupent la m\u00eame ligne, puis la positionne sur plusieurs colonnes.<\/p>\n
Essentiellement, l’attribut colspan d\u00e9finit le nombre de colonnes affich\u00e9es sur une grande ligne. Par exemple, le code HTML<\/p>\n
fusionnera deux cellules et cr\u00e9era une grande cellule horizontale.<\/p>\n
Deux exemples de code de table HTML utilisant l’attribut Colspan<\/p>\n
Le code suivant est un tableau HTML avec une grande cellule qui s’\u00e9tend sur deux colonnes. Pour mieux comprendre le fonctionnement de ce code, n’h\u00e9sitez pas \u00e0 cr\u00e9er un rendu visuel dans un navigateur.<\/p>\n
<table>\n<\/code><\/pre>\n
Le rendu de ce code dans un navigateur cr\u00e9era un tableau avec une grande cellule qui s’\u00e9tend sur la largeur de deux colonnes. Si vous modifiez la valeur de l’attribut colspan sur 3, la premi\u00e8re cellule s’\u00e9tendra sur la largeur des trois colonnes.<\/p>\n
\"Comment<\/a><\/p>\n
Lorsque les 3 colonnes sont crois\u00e9es, il ne devrait y avoir qu’une seule<\/p>\n
dans la ligne du tableau (<\/p>\n
). Alors, assurez-vous d’enlever tout ce qui reste<\/p>\n
balises lors du d\u00e9veloppement d’un<\/p>\n
colonne.<\/p>\n
\"Comment<\/a><\/p>\n
Voici un autre exemple de tableau HTML avec une cellule qui s’\u00e9tend sur deux colonnes. Pour mieux comprendre le code, cr\u00e9ez un rendu visuel dans votre navigateur via le bloc-notes de votre ordinateur.<\/p>\n
<table><\/code><\/pre>\n
Comment utiliser "0" (z\u00e9ro) dans les attributs Rowspan et Colspan<\/h3>\n
\"Comment<\/a><\/p>\n
Lorsqu’il est utilis\u00e9 dans le colspan et le rowspan dans un navigateur moderne, "0" repr\u00e9sente le plus de colonnes ou de lignes. Par exemple, on peut utiliser rowspan = "0" pour \u00e9tendre une ligne jusqu’\u00e0 la fin d’un tableau au lieu de compter les lignes du tableau.<\/p>\n
Quelles sont les meilleures tables pour utiliser z\u00e9ro\u00a0? Le chiffre z\u00e9ro est particuli\u00e8rement adapt\u00e9 aux tableaux dynamiques. Il est \u00e9galement id\u00e9al pour les grandes tables avec des nombres de colonnes et de lignes qui changent fr\u00e9quemment.<\/p>\n
Comment fusionner des cellules de tableau dans WordPress \u00e0 l’aide du plugin wpDataTables<\/h2>\n
\"Comment<\/a><\/p>\n
Vous pouvez utiliser HTML pour cr\u00e9er des tableaux via la zone de texte ou installer des plugins qui fournissent des options de tableau dans votre champ de texte visuel. Ces options fonctionnent facilement pour les tableaux simples mais deviennent difficiles lorsque vous travaillez avec des tableaux plus grands.<\/p>\n
Le plugin WordPress wpDataTables<\/a> est parfait pour fusionner des cellules dans des tables plus grandes. Il est \u00e9galement id\u00e9al pour cr\u00e9er, personnaliser et modifier ces types de tableaux.<\/p>\n
La fusion de cellules est simple avec wpDataTables. Cela peut \u00eatre fait en utilisant le mode de gestion des cellules en t\u00e9l\u00e9chargeant le plugin et en l’activant. M\u00eame sans exp\u00e9rience avec les plugins WordPress, l’installation de wpDataTables est facile pour tout le monde.<\/p>\n
Utilisation du plug-in wpDataTables<\/h3>\n
\"Comment<\/a><\/p>\n
Lors de la cr\u00e9ation d’un tableau, s\u00e9lectionnez la premi\u00e8re option de la liste, puis cliquez sur "Suivant". Cr\u00e9ez un nom pour votre tableau de donn\u00e9es et choisissez le nombre de lignes et de colonnes que vous souhaitez. Cliquez sur "G\u00e9n\u00e9rer un tableau" pour afficher un nouveau tableau vide.<\/p>\n
\"Comment<\/a><\/p>\n
Vous pouvez s\u00e9lectionner l’un des 17 formats de date pour les colonnes de date et les s\u00e9lecteurs de date interactifs.<\/p>\n
\"Comment<\/a><\/p>\n
Le plugin wpDataTables propose \u00e9galement des habillages int\u00e9gr\u00e9s pour personnaliser les visuels du front-end de la table. Ces skins incluent :<\/p>\n