5568 sujets

Sémantique web et HTML

Problème tableau HTML + colspan ....

Bonjour,

J'ai un problème qui me rend chèvre.... Je fais un tableau, pour représenter des réservations de postes. C'est tout bête, les horaires en colonne, et les postes sur les lignes. Je "colspan" les cellules qui correspond à la réservation d'un poste.
Ça donne ça :
http://keyserpub.free.fr/tableau_reservation_1.png
Donc une réservation de 8h30 à 9h30 et une réservation de 10h15 à 12h30 pour le poste 1.

Mon problème, c'est quand je veux mettre une réservation au poste 2, de 10h00 à 11h00 par exemple : toutes les cellules se décalent, ça me donne un truc bizarre :
http://keyserpub.free.fr/tableau_reservation_2.png

Au lieu d'avoir un truc comme ça (fait sous photoshop du coup) :
http://keyserpub.free.fr/tableau_reservation_3.png

Je vois pas comment m'en sortir...

Je vous montre mon code (c'est du rapide, juste pour les captures d'écran) : 

<html>
	<head>
		<title>Test</title>
		<style type="text/css">
			td  { width:10px; }
			td.firstCell { width:50px; }
			td.resa { background-color:#0066FF; }
		</style>
	</head>
	<body>
		<table border="1">
			<!-- entete -->
			<tr>
				<td class="firstCell">&nbsp;</td>
				<td colspan="4">8h00</td>
				<td colspan="4">9h00</td>
				<td colspan="4">10h00</td>
				<td colspan="4">11h00</td>
				<td colspan="4">12h00</td>
			</tr>
			<!-- Ligne 1 du tableau -->
			<tr>
				<td class="firstCell">Poste 1</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td colspan="4" class="resa">&nbsp;</td>  <!-- de 8h30 a 9h30 -->
				<td>&nbsp;</td>
				<td>&nbsp;</td>

				<td>&nbsp;</td>
				<td colspan="9" class="resa">&nbsp;</td>  <!-- de 10h15 a 12h30 -->
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<!-- Ligne 2 du tableau -->
			<tr>
				<td class="firstCell">Poste 2</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>

				<td colspan="4" class="resa">&nbsp;</td>  <!-- de 10h00 a 11h00 -->
				
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>

				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</body>
</html>


Une idée pour moi? pour que mon tableau reste bien fixe, quelque soit les "colspan" que je fais??

Merci Smiley smile
Modifié par mr_Keyser (30 Jul 2009 - 12:14)
Merci pour ta réponse.

Oui j'ai remarqué ça, mais pourquoi ?? Sinon il "équilibre" les largeurs de cellules, c'est ça?
Tiens, je ne connaissais pas cette astuce. Niveau sémantique c'est moyen par contre.
Vraiment aucune solution par CSS alors ? (je viens de tenter le « table-layout » sans succès)
Oui, j'aimerai bien du tout css, car j'arrive pas à rendre invisible la dernière ligne de mon tableau.

J'ai essayé le table-layout aussi, mais ca marche pas...


Merci
Bonjour

Une autre approche consiste à donner un background coloré à chaque TD concernée, ça solutionnera ton prob bien plus simplement. Pour éviter les espaces entre TD tu "collapseras" ta table en css.

L'avantage c'est que ta table étant fixe (nbre de TD constant) chaque TD peut être identifiée (td id="a1") et du coup tu peux facilement automatiser le tout par un formulaire, alors que tes colspan, en modifiant la structuration de base, ne le permettent pas aussi facilement.

Wcag précise que l'information ne doit pas passer exclusivement par la couleur. Tu ajouteras donc à chaque TD colorée un border-bottom (ou autre) de la même couleur que le fond, comme ça même avec les couleurs désactivées ta signalétique fonctionnera bien.
Sujet clos
Aller à