Les tableaux

[DarkVaV]

Bonjour à tous,

Imaginons que je fasse un tableau tout bête :

<table width="1000" border="1">
<tr>
<td width="200" valign="top">Colonne 1</td>
<td width="200" valign="top">Colonne 2</td>
<td width="200" valign="top">Colonne 3</td>
<td width="400" valign="top">Colonne 4</td>
</tr>
</table>

Si je met un texte dans la colonne 4 qui est plus grand que celui de la colonne 3, et bien je vais avoir un énorme blanc sous la colonne 3... Est-il possible de remédier à celà ?

Car j'ai actuellement ce problème... et ça fait un énorme espace de colonne vide... Exemple ici

En faisant plusieurs tableaux, mais je vois pas comment faire pour que mes trucs débutent quand même cote a cote...

Merci !

[birdyman]

Salut,

La solution est de créer deux lignes dans ton tableau et de fusionner les 2 cellules de la colone ou il y a plus de texte :

<table>
<tr><td>colonne 1</td><td>colonne 2</td><td>colonne 3</td><td rowspan="2" valign="top">colonne 4</td></tr>
<tr><td>colonne 1</td><td>colonne 2</td><td>colonne 3</td></tr>
</table>

pour que le texte de la colonne 4 commence en haut tu spécifie

valign="top"

J'espère que ca répond a ta question

Juste une petite info, l'idéal est de ne pas utiliser de tableaux pour faire la mise en page.

@++

[DarkVaV]

Bonjour,

J'ai pas très bien compris ce que tu m'as dis

En fait, un exemple concret avec le code que j'utilise pour faire ma capture d'écran là...

<table style="margin-left: auto;margin-right: auto;text-align: left;" width="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:500px;" valign="top">
	<img src="images/last-news.png">
<div style="padding-left:3px;" id="lastnews">
<?php include("last/last_news.php"); ?>
</div>

</td>
<td style="width:250px;" valign="top">
<img src="images/autre-actu.png">
<?php include("last/3_actus_en_plus.php"); ?>
</td>
<td style="width:250px;" valign="top">
<img src="images/compte.png">
<?php include("blocks/compte.php"); ?>
</td>
</tr>
</table>

<table style="margin-left: auto;margin-right: auto;text-align: left;" width="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:200px;" valign="top">
<br />
<img src="images/smiley-hasard.png">
<?php include("blocks/smiley-hasard.php"); ?>
</td>
<td style="width:200px;" valign="top">
<br />
<img src="images/skin-hasard.png">
<?php include("blocks/skin-hasard.php"); ?>
</td>
<td style="width:200px;" valign="top">
<br />
<img src="images/avatar-hasard.png">
<?php include("blocks/avatar-hasard.php"); ?>
</td>
<td style="width:400px;" valign="top">
<br />
<img src="images/last-forums.png">
<?php include("last/last_forums.php"); ?>
 </td>
 </tr>
 </table>

Pourrais-tu me dire ce que je dois modifier ?

merci

NB : Concernant la mise en page en tableau, je le sais :-\

Mais je vois pas d'autre moyen pour faire ce que je veux.

Je sais pas comment faire avec des div :S

Modifié 16 Avril 2007 par captain_torche

[Monique]

Bonjour,

Petit préambule :

- Les problèmes de la mise en page par tableaux

- Techniques et astuces pratiques pour une mise en page CSS

- Faire une mise en page sans tableaux

Si vraiment tu veux utiliser un tableau, tu dois faire appel aux feuilles de style pour le mettre en forme : Habillage de tableaux avec des CSS

[ReikiDojo]

Bonjour

Pour comprendre toutes les possibilités les tableaux je te conseile ce site qui montre tout ce que l'on peut faire :

http://cyberzoide.developpez.com/html/table.php3

Sinon pour la mise en page, ce qu'il faut, c'est comprendre les div

J'ai pas très bien compris ce que tu m'as dis

[DarkVaV]

Bonjour,

En fait je cherche une solution qui me permette d'avoir des cellules qui fassent une taille définie.

J'ai fait un schéma pour démontrer ce que je veux faire...

AVANT : (actuellement quoi)

APRES : (ce que je voudrai quoi)

Merci si vous avez une qqconque idée en rapport avec le code avant...

merci

[Sarc]

Ah, avec ça on comprend bien mieux !

Un tableau est fait pour des données tabulaires... Donc avec des lignes et des colonnes ! Ce que tu veux là, c'est pas quelque chose avec des lignes et des colonnes, ce sont seulement des colonnes !

Il faut donc utiliser des balises <div> avec des "float" à droite et à gauche pour faire des colonnes de tailles définies qui flottent à droite ou à gauche de ta page... Lis les liens qui t'ont été donnés avant (notamment ceux de Monique, elle a toujours les meilleurs liens ) qui te permettront de comprendre comment faire.

[DarkVaV]

Mais mon problème c'est que j'ai en gros 4 colonnes comme ça...

[Sarc]

Tu peux tout faire en float:right avec des marges en CSS qui permettent de les placer de la bonne manière...

Par exemple

tout à droite : 160px de largeur

avant dernière à droite : 165px de marge à droite, 160px de largeur

...

[ebola]

Oui laisse tomber les tableaux, avec des balises div tu peut faire très facilement.

Si tu ne connait rien au Xhtml/CSS et à ses balises je te conseil http://www.siteduzero.com/tuto-3-6-0-appre...e-site-web.html c'est très bien expliqué.

[DarkVaV]

Je vais regarder donc cette solution

Merci à vous en tous les cas

Et sinon pour le site du zero j'avais survolé déjà

Je vous tiens bien sur au courant.

(En plus il est vrai que les tableaux c'est pas top pour le validateur XHTML...)

[DarkVaV]

Salut à tous,

Déjà des problèmes

CSS :

body
{
   width: 1000px;
   /*margin: auto; 
   margin-top: 20px;
   margin-bottom: 20px;	 */
   color: #000000;
font-size: 12px;
font-family: Arial;
}

#header {
width: 290px;
}

#navig {
width: 700px;
left:300px;
}

#derniere_news {
width: 500px;
}

#3_dernieres_news
{
  width: 250px;
  left: 500px;
}

#block_compte
{
  width: 250px;
	position: absolute;
  left: 750px;
}

Après dans mon fichier XHTML :

<html>
<head>
<meta http-equiv="content-style-type" content="text/css" />
<link title="style" type="text/css" rel="stylesheet" href="div.css" />
</head>
<body>
<span id="header">
<table width="1000" height="75" cellpadding="0" cellspacing="0" border="0">
	<tr>
	<td align="left">
	<img src="http://127.0.0.1/V3/images/Header.png">
	</td>
	<td align="right">
	<img src="http://127.0.0.1/V3/images/Menu.png">
	</td>
	</tr>
</table>
<span id="derniere_news">
<img src="http://127.0.0.1/V3/images/last-news.png">
</span>
<span id="3_dernieres_news">
<img src="http://127.0.0.1/V3/images/autre-actu.png">
</span>
<span id="block_compte">
<img src="http://127.0.0.1/V3/images/compte.png">
</span>
</body>
</html>

Entre le span derniere_news et celui 3_dernieres_news, il y a un espace... ça fait très moche...

Et si je met des <div> au lieu des <span>, le div derniere_news est en retour à la ligne et mal placé, et celui block_compte une ligne encore dessous, mais bien placé...

J'y comprends plus rien

Aidez moi s'il vous plaît... Merci

Modifié 16 Avril 2007 par captain_torche

[Sarc]

Ce serait sympa que tu mettes une page en ligne avec ton fichier, pour qu'on puisse voir exactement ce que ça donne, parce que je n'ai pas l'imagination infaillible...

Pour que les div se mettent les uns à côté des autres, tu dois utiliser comme style

float:right

Qui mettra le div en "flottant" (donc sans penser aux autres balises, en gros) à droite. Tu dimensionnes cette div avec width. Ensuite, pour la placer plus ou moins à droite, il faut mettre

margin-right:150px

par exemple.

Ensuite, il faut calculer au pixel près pour qu'il n'y ait pas d'espaces entre les div, et tu n'auras pas de soucis.

[DarkVaV]

Bonjour,

ça ne marche toujours pas

Looke ce que ça donne avec les div ici : Clic

Et ce que ça donne avec les span ici : Clic

Et le code du css :

body
{
   width: 1000px;
   /*margin: auto; 
   margin-top: 20px;
   margin-bottom: 20px;	 */
   color: #000000;
font-size: 12px;
font-family: Arial;
}

#derniere_news {
width: 500px;
}

#3_dernieres_news
{
  width: 250px;
  left: 500px;
  float:center;
  margin-left:500px;
}

#block_compte
{
  width: 250px;
  position: absolute;
  left: 750px;
}

Et enfin le code du html tu le vois en faisant la source de la page

Merci

[Sarc]

Pour float, il n'existe pas de valeur center... Il n'existe qu'une valeur right et une valeur left.

Bon la structure qu'il faut avoir par exemple :

<div id="gauche">colonne1</div>
<div id="centre">colonne2</div>
<div id="droite">colonne3</div>

#gauche{float:left;width:200px}
#centre{float:left;margin-left:200px;width:200px;}
#droite{float:left;margin-left:400px}

Avec ça normalement, tu as déjà trois colonnes qui sont bien faites. Ensuite tu peux jouer sur les margin et padding pour une mise en page plus minutieuse.

[DarkVaV]

Personnellement je ne vois pas trois colonnes bien faites...

j'ai fait une page avec que les div, et un css avec que ce que tu m'as donné aussi :-\

[Sarc]

Tu sais pour apprendre correctement HTML et CSS, il faut prendre quelques initiatives... Tu as essayé de changer les valeurs des largeurs et des marges ? Tu as regardé ce que ça faisait ? Tu as essayé de mettre un fond coloré pour chaque div pour regarder comment ils s'articulent ?

Je t'invite à parcourir tous les liens qui sont donnés sur le Hub et qui t'indiqueront la marche à suivre pour changer le style des div... MEttre des couleurs, des bordures, tout ça te permettra de comprendre comment se mettent les colonnes entre elles.

[DarkVaV]

Ok, j'ai changé en mettant comme couleur de fond le vert.

en le faisant flotter à droite le "droite", c'est bon.

Seul problème que j'ia déjà rencontré au début, l'alignement est comme ça:

colonne 1 ...... colonne2

.............................. .................. . colonne 3

Y a un saut de ligne alors... qu'il devrait pas en avoir

Modifié 15 Avril 2007 par DarkVaV

[DarkVaV]

Finalement j'ai trouvé une solution très correcte grâce à ce topic de Webmaster Hub

En tous cas merci à tout ceux qui ont voulu m'aider et tout ceux qui m'ont aidés

Bonne soirée à tous !

NB : Arf, par contre ça fait toujours pas ce que je voulais à la base

[Florent V.]

Tu peux faire un tableau de une ligne et 4 cellules, et dans chaque cellule tu mets tes blocs les uns en dessous des autres, par exemple.

Ou bien conserver le même principe, mais avec quatre div globales pour faire tes quatre colonnes.

[b]HTML :[/b]
<div class="colonne_normale">...</div>
<div class="colonne_normale">...</div>
<div class="colonne_normale">...</div>
<div class="colonne_fin">...</div>

[b]CSS :[/b]
div.colonne_normale {
float: left;
width: 25%;
}
div.colonne_fin {
margin-left: 75%;
}

On évite de faire flotter les 4 colonnes pour éviter quelques menus problèmes d'arrondis des valeurs en pourcentages (ou bien il faut tout mettre en width: 24.5%...). On évitera aussi soigneusement de donner marges, padding et bordures latérales aux colonnes. Si on a besoin de créer des écarts et des retraits, on jouera sur le style de leurs enfants directs.

Si tout ça n'est pas clair pour toi, je te renvoie aux liens fournis par Monique, et t'invite à te former plus avant sur les CSS (sites de référence : Openweb et Alsacréations).

Modifié 17 Avril 2007 par Florent V.