Aller au contenu

Les tableaux

DarkVaV

Par DarkVaV
dans (X)HTML et CSS

 Partager

Sujets conseillés

DarkVaV

DarkVaV

Posté
Posté

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

birdyman

Posté
Posté

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

DarkVaV

Posté
  • Auteur
Posté (modifié)

Bonjour,

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

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é par captain_torche
DarkVaV

DarkVaV

Posté
  • Auteur
Posté

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)

shema.png

APRES : (ce que je voudrai quoi)

shemafin.png

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

merci

Sarc

Sarc

Posté
Posté

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 :P) qui te permettront de comprendre comment faire. ;)

Sarc

Sarc

Posté
Posté

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

...

DarkVaV

DarkVaV

Posté
  • Auteur
Posté

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

DarkVaV

Posté
  • Auteur
Posté (modifié)

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é par captain_torche
Sarc

Sarc

Posté
Posté

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

DarkVaV

Posté
  • Auteur
Posté

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

Sarc

Posté
Posté

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

DarkVaV

Posté
  • Auteur
Posté

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

colonneshd4.th.png

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

Sarc

Sarc

Posté
Posté

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

DarkVaV

Posté
  • Auteur
Posté (modifié)

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é par DarkVaV
DarkVaV

DarkVaV

Posté
  • Auteur
Posté

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.

Florent V.

Posté
Posté (modifié)

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é par Florent V.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...