5568 sujets

Sémantique web et HTML

Tableau avec 2 formulaires par lignes et validation w3c

Bonjour à tous.
J'essaye désespérément de faire un code qui est équivalent à celui-ci:
<table>
	<tbody>
		<tr>
			<td></td>
			<td>Pseudo</td>
			<td>Mdp</td>
			<td>Mail</td>
			<td>SuperAdmin</td>
			<td></td>
		</tr>
		<tr>
			<td>
				<form method="post" action="./?id=10">
					<input value="Supprimer" src="../img/delete.png" alt="Supprimer" type="image">
				</form>
			</td>
			<form method="post" action="./?id=10">
				<td><input value="pre" name="pseudo" type="text"></td>
				<td><input value="" name="mdp" type="password"></td>
				<td><input value="sdg" name="mail" type="text"></td>
				<td><input name="sa" type="checkbox"></td>
				<td><input value="Modifier" src="../img/modify.png" alt="Modifier" type="image"></td>
			</form>
		</tr>
	</tbody>
</table>

(Avec plus de lignes bien sûr)
Mais valide w3c. J'en ai déduit qu'il fallait abandonner les tableaux. J'ai trouvé cette page http://giminik.developpez.com/articles/xhtml-css/table-multi-form/ mais je n'arrive pas à l'adapter avec 2 formulaires par lignes, les cellules vont automatiquement à la ligne lors d'un </form><form>.
A l'aide!!!
Bonjour sousoulebarbu,

En regardant et en testant ton code XHTML, je me suis rendu compte que tu n'utilisais pas comme il se doit les tableaux.

1. Tu utilises les tableaux pour faire de la mise en page or, les tableaux ne doivent pas servir à faire cette dernière mais à insérer des données tabulaires.
2. Je te conseil de revoir comment bien construire un tableau.
3. Ensuite, je te conseil fortement de lire ces tutoriels :

- Construire un site sans tableaux.
- Aligner des elements sans tableaux je pense que celui-là devrait t'aider à pallier ton problème.
- Comment utiliser l'élément label dans les formulaires.

Voilà Smiley cligne .
La simple question de la validité ne t'oblige pas à supprimer le tableau (que ce soit un tableau de mise en forme ou une structuration pertinente de ton contenu). Par contre, celui-ci doit être contenu dans ton formulaire. Tu auras donc:
- un formulaire (un seul élément FORM pour une action ou saisie de données particulière);
- dans ce formulaire, un tableau de mise en page.

Pour que ce tableau soit accessible, par contre, il doit pouvoir être linéarisé correctement. C'est à dire que la lecture ligne par ligne, de gauche à droite, doit être cohérente. Si tu as tes labels dans une ligne et tes champs à la ligne suivante, c'est raté.

Un autre problème que tu rencontres, c'est que tu essaies de combiner en un tableau (et formulaire) unique un ensemble de fonctionnalités différentes:
- créer un enregistrement;
- modifier un enregistrement;
- supprimer un enregistrement.

Ça fait beaucoup à condenser dans une interface valide, accessible, utilisable avec JavaScript désactivé, etc. Ce n'est pas une mission impossible, mais ça demande un minimum d'expertise en HTML (accessible) et en JavaScript (non-intrusif).
Pourquoi ne pas utiliser le positionnement flottant pour bien positionner tes lignes ?

a écrit :
Ça fait beaucoup à condenser dans une interface valide, accessible, utilisable avec JavaScript désactivé, etc. Ce n'est pas une mission impossible, mais ça demande un minimum d'expertise en HTML (accessible) et en JavaScript (non-intrusif).


Pour plus de précisions sur le Javascript (non-intrusif), lire ceci.
Bonjour à tous, déjà merci beaucoup pour vos réponses.
J'ai essayé pour la n-ième fois d'utiliser de blocs avec du css, mais ça ne fonctionne pas comme je veux:
<html>
<head>
	<style type="text/css">
.ligne {
  clear: both;
  margin:0px;
}
.flottante {
	width: 150px;
	margin-left:5px;
	float: left;
	background-color: #FF0000;
}
.conteneur {
width: 550px;
}

	</style>
</head>
<body>
<div class="conteneur">
	<div class="ligne">
		<form><span class="flottante">boîte verte 1</span></form>
		<form>
		<span class="flottante">boîte verte 2</span>
		<span class="flottante">boîte verte 3</span>
		</form>
	</div>

	<div class="ligne">
		<form><span class="flottante">boîte verte 1</span></form>
		<form>
		<span class="flottante">boîte verte 2</span>
		<span class="flottante">boîte verte 3</span>
		</form>
	</div>
</div>
</body>
</html>

Ie saute une ligne entre chaque ligne, mais pas ff, je ne comprend pas pourquoi!!!
edit: ça vient de la présence de form, mais comment éviter ça???
Modifié par sousoulebarbu (31 Aug 2009 - 19:37)
Bon alors:

1. Tu travailles à priori en mode Quirks (j'ai pas vu de Doctype dans ton code?). Donc le comportement d'IE avec les CSS est... comment dire... en gros c'est comme si tu demandes à Internet Explorer 6, 7 et 8 d'utiliser le moteur de rendu d'IE 5.5 pour afficher les pages. Ça s'appelle un comportement suicidaire.

2. Ta structure HTML est toujours du grand n'importe quoi. Qu'est-ce que c'est que ces FORM dans tous les sens? Impossible que ça donne une page HTML cohérente (et je dis même pas accessible...).
Sujet clos
Aller à