Tableau avec colgroup

Résolu

foxy50 Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Utilisateur anonyme - 23 avril 2015 à 22:02

Bonjour,
Je veux créer un tableau ayant 4 colonnes dont le contenu de la première est centré, celui de la seconde est aligné à droite, celui de la troisième est centré et celui de la dernière est aligné à gauche. Pour commencer, j'avais utilisé des attributs "align" à chacun de mes "td". Ca marche mais validator.w3.org n'est pas content. Il me demande d'utiliser du CSS à la place. J'étais parti pour créer 3 classes (aligné au centre, à gauche et à droite) quand je suis tombé sur colgroup qui devrait me simplifier la tâche et m'éviter de nombreux copier-coller. Idéalement, si je ne me trompe pas, ça devrait donner :


<table border="1">
   <colgroup>
    <col align="center"/>
    <col align="right"/>
    <col align="center"/>
    <col align="left"/>
   </colgroup>

   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>

Mais ça ne marche pas. Le contenu de toutes mes cellules est aligné à gauche. J'ai essayé sur un autre exemple:

<!DOCTYPE html>
<html lang="fr">
 <body>
  <table border="1">
   <colgroup span="3" width="50px" align="center">
   </colgroup>
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
   
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
   
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
   
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
   
  </table>
 </body>
</html>

J'obtiens ceci :

En gros, le align="center" semble inactif et je ne vois pas où est le problème.

Afficher la suite

A voir également:

Tableau avec colgroup
Tableau word - Guide
Tableau ascii - Guide
Trier un tableau excel - Guide
Tableau croisé dynamique - Guide
Imprimer tableau excel sur une page - Guide

4 réponses

Réponse 1 / 4

Utilisateur anonyme

Bonjour

Le problème est que l'attribut align n'est pas supporté en HTML5.
https://www.w3schools.com/tags/tag_col.asp
Le validateur t'a dit d'utiliser du CSS à la place, pourquoi ne veux-tu pas le faire ? Ce n'est pas incompatible avec l'utilisation de colgroup, du moins je le suppose (pas essayé).

Réponse 2 / 4

foxy50 Messages postés 3 Date d'inscription Statut Membre Dernière intervention

Je n'avais pas fait attention que l'attribut align n'était pas supporté.

J'ai modifié mon code en insérant du css mais sans succès.
Voici ce que ça donne:

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="windows-1252" />
		<title>essai</title>
		<link rel="stylesheet" type="text/css" href="css/essai2.css"/>
	</head>
	<body>
		<table border="1">
			<colgroup span="3" width="50px" class="tableau">
			</colgroup>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			
		</table>
	</body>
</html>

Et le css associé:

.tableau{
	text-align:center;
	}

Malheureusement, rien n'a changé. Mon contenu est toujours aligné à gauche.

Réponse 3 / 4

Utilisateur anonyme

Je n'ai pas fait l'essai, mais je suppose qu'il faut mettre des class sur les col à l'intérieur du colgroup, pas sur le colgroup lui-même. Le align, tu le mettais bien sur les col, pas sur le colgroup.

Utilisateur anonyme

Effectivement, après essai, ça ne marche pas pour le text-align alors que ça marche pour background-color.
Il y a des choses que j'ai bien du mal à comprendre en CSS.

Réponse 4 / 4

foxy50 Messages postés 3 Date d'inscription Statut Membre Dernière intervention

En fait, ça ne change rien d'appliquer la class sur le colgroup ou le col. Aucune de ces solutions ne marche. J'ai réussi à résoudre mon problème à l'aide de "td:nth-last-child()".
Par exemple, td:nth-last-child(1) correspond à la dernière colonne du tableau.
td:nth-last-child(2) correspond à l'avant-dernière colonne du tableau.

Au début, j'ai testé "td:nth-child()" qui fait la même chose mais en commençant par le début. td:nth-child(1) correspond à la première colonne du tableau. Mais j'ai eu un problème car mon tableau avait dans sa première colonne un rowspan ce qui fait que ça me créait un décalage.

Voici donc le code de mon tableau:


<table class="jour equip-a score equip-b">
							
	<tr class="couleuralternative">
		<td rowspan="2"><b>1<sup>ère</sup> journée<br/>4 et 11 avril</b></td>
		<td>Saint-Lô</td> 
		<td>10-15</td>
		<td>Rouen</td> 
	</tr>
		
	<tr class="couleuralternative">
		<td>Le Havre</td>
		<td>Victoire du Havre par forfait</td>
		<td>Les Andelys</td>
	</tr>
							
	<tr>
		<td rowspan="2"><b>2<sup>e</sup> journée<br/>18 avril</b></td>
		<td>Les Andelys</td> 
		<td>-</td>
		<td>Rouen</td> 
	</tr>
		
	<tr>
		<td>Saint-Lô</td>
		<td>10-15</td>
		<td>Le Havre</td>
	</tr>
...
</table>

Et le css correspondant :

table{
	border-collapse: collapse;/*colle les bordures du tableau*/ 
	border: 2px solid black;
	background-color: #99FFFF;
	margin:auto;
	}
	
td{
	border: 2px solid black;
	}
	
.couleuralternative{
	background-color:#FFFF00;
	}	
	
.equip-b td:nth-last-child(1){
	text-align: left;
	}	

.score td:nth-last-child(2){
	text-align: center;
	}	

.equip-a td:nth-last-child(3){
	text-align:right;
	}

.jour td:nth-last-child(4){
	text-align: center;
	}

Ceci me donne le résultat suivant :

C'est exactement ce que je voulais.
Merci de m'avoir aidé. En espérant que ça puisse aider d'autres personnes.

Discussions similaires

Formule taux de marque

Tableau croisé dynamique - absence de certaines données

generateur de combinaison du loto 5/90

Votre réponse

Discussions similaires