Webmaster Hub > Les tableaux

Version complète: sur le forum Webmaster Hub : Les tableaux

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

DarkVaV

samedi 14 avril 2007 à 13:38

Bonjour à tous,

Imaginons que je fasse un tableau tout bête :

CODE

<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

samedi 14 avril 2007 à 13:58

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 :

CODE

<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

CODE

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

samedi 14 avril 2007 à 14:18

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à...

CODE

<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

Monique

samedi 14 avril 2007 à 14:38

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

samedi 14 avril 2007 à 14:54

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

CITATION(DarkVaV @ samedi 14 avril 2007, 15h18)

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

DarkVaV

samedi 14 avril 2007 à 14:59

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

samedi 14 avril 2007 à 15:11

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

samedi 14 avril 2007 à 17:04

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

sarc

samedi 14 avril 2007 à 18:21

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

samedi 14 avril 2007 à 21:00

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

dimanche 15 avril 2007 à 08:35

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

dimanche 15 avril 2007 à 09:21

Salut à tous,

Déjà des problèmes

CSS :

CODE

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 :

CODE

<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

sarc

dimanche 15 avril 2007 à 09:24

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

CODE

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

CODE

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

dimanche 15 avril 2007 à 11:03

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 :

CODE

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

dimanche 15 avril 2007 à 11:08

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 :

HTML

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

CODE

#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

dimanche 15 avril 2007 à 17:11

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

dimanche 15 avril 2007 à 17:40

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

dimanche 15 avril 2007 à 17:47

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

DarkVaV

lundi 16 avril 2007 à 16:15

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.

mardi 17 avril 2007 à 10:16

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.

CODE

[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).

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.