5568 sujets

Sémantique web et HTML

2 tableaux cote à cote + largeur cellule

Bonsoir à tous !

Me voici avec 2 petites questions

La première
Comment mettre 2 tableaux cote a cote (à la meme hauteur)
J'ai entendu parler de les mettre eux même dans un tableau, mais n'y a t'il pas plus simple?

2nd question
J'aimerais que la largeur d'une de mes cellules s'adapte à son contenu, car actuellement si il y a 2 mots dedans (prenom + nom) isl tiennent sur 2 lignes...



Merci d'avance et bonne soirée à tous !
Modérateur
Salut Snipy,

tu peux faire aisément ce genre de chose (tableau cote à cote) en faisant ceci :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<title>Page sans titre</title>
		<style type="text/css" media="screen"><!--
#colonne_g { float: left }
--></style>
	</head>

	<body>
		<div id="global">
			<div id="colonne_g">
				<table width="180" border="1" cellspacing="2" cellpadding="0">
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</table>
			</div>
			<div id="colonne_d">
				<table width="180" border="1" cellspacing="2" cellpadding="0">
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
	</body>

</html>


Certes c'est un peu succinct mais la base de travail y est Smiley cligne .

En ce qui concerne ta deuxième question, il suffit d'éviter de mettre un attribut à la balise td si je ne m'abuse.

@+
Pour la première question, on peut aussi faire flotter les deux tableaux directement (ou le premier des deux uniquement). On aura peut-être besoin d'un clear: left sur l'élément qui les suit, ou bien il faudra les englober dans un conteneur div en overflow: hidden, pour éviter les problèmes liés au positionnement flottant.

Pour la deuxième question, la réponse est en réalité assez complexe car les algorithmes utilisés par les navigateurs pour attribuer automatiquement à chaque cellule sa largeur ne sont pas simples.
Tu peux donner une largeur en pourcentages ou en pixels à un élément td de la colonne concernée, ça peut aider.
Si les deux mots ne doivent pas être séparés, tu peux utiliser une espace insécable (&nbsp;).
Sujet clos
Aller à