HTML tableau

Répondre
Partager Rechercher
suffit de faire un tableau avec 3 colonnes et de mettres tes tableau dedans et tu peu faire sa autant de fois que tu veux .
Ou tu peu faire un tableau avec 3 colonnes et mettre autant de ligne que tu veux tu peu fractionner les lignes ou les colonnes je te conseil dreamweaver il est excellent pour faire sa si tu maitrise pas trop l'html.
Citation :
Provient du message de Wis/Thunder
3 tableaux dans 1 tableau
<table>
<tr>
<td><table>1....</td>
<td><table>2 ....</td>
<td><table>3....</td>
</tr>
</table>
Beurk ! surtout pas !!!
les tableaux ne sont pas (plus) là pour faire la mise en page... c'est le rôle des CSS

Si tu ne connais pas les CSS, je t'invite à te documenter dessus, par exemple sur ce site, très bien fait.
Par exemple, ça peut donner :
Code:
CSS :
float.table {
   float: left;
   width: 33%;
}
Code:
HTML :
<table class="float">
...</table>
<table class="float">
...</table>
<table class="float">
...</table>
tu peux bien sûr raffiner par exemple en donnant un style différent à chaque tableau.
Citation :
Provient du message de Lango Silma
Beurk ! surtout pas !!!
les tableaux ne sont pas (plus) là pour faire la mise en page... c'est le rôle des CSS
On peut néanmoins avoir une mise en page correcte ( a défaut d'un code propre ) de cette façon.
Le truc simpa avec les tableau en css cest de pouvoir definir une couleur , une taille de tracé pour chaque bord du tableau left right , top , bottom.exemple
.td {
right color : red; left color : black;
}
Citation :
Provient du message de Elric
On peut néanmoins avoir une mise en page correcte ( a défaut d'un code propre ) de cette façon.
ça dépend de ce que tu appelles correcte... en tous cas ta mise en page sera beaucoup plus rigide c'est sûr... c'est en pensant comme ça qu'on arrive à faire des sites qui ne sont bien mis en page qu'en 800x600, si on a une fenêtre plus petite on arrive pas à tout voir.

des bonnes raisons d'utiliser les CSS :
  • c'est plus facile à utiliser que les tableaux (si, si)
  • c'est plus rapide à coder (suffit de définir le positionnement des objets, sans se soucier desdits objets, puis de définir les objets, sans se soucier de leur positionnement)
  • le code est plus lisible
  • le code est plus petit (il n'y a plus 1000 fois la définition de la couleur de background, du positionnement etc. pour un tableau à 1000 cases)
  • c'est plus rapide à charger, et si le CSS est dans un fichier séparé commun à plusieurs pages du sit one ne le charge qu'une seule fois
  • ça permet de faire des sites plus jolis, sans utiliser de javascripts etc (blocs flottants, menus, etc.)
  • sûrement beaucoup d'autres raisons auxquelles je ne pense pas
Plus facile à utiliser que les tableaux, je ne dis pas.

Néanmoins, moi je ne découvre qu'aujourd'hui ( j'admets que je n'ai pas spécialement cherché à me renseigner ) et si demain, je devais monter un site en utilisant cette méthode, je risque d'avoir un nombre d'erreurs élevé.
en HTML la solution des 3 tableaux a l'intérieur des colonnes a tendance à proposer un résultat aléatoire.
Les tableaux à l'intérieur des tableaux ont parfois des problèmes quand il s'agit de mettre des propriétés différentes (fond, taille tableaux, taille cellules, etc...)

Si tu restes sur du HTML je te conseil vivement de rester dans les normes d'un seul tableau avec un jeu de ligne et colonne plus fournit.
Citation :
Provient du message de Wis/Thunder
3 tableaux dans 1 tableau
<table>
<tr>
<td><table>1....</td>
<td><table>2 ....</td>
<td><table>3....</td>
</tr>
</table>
Merci pr tte vos solutions...

J'ai deja fait Thunder mais en fait avec ce système là, Si on a une colonne plus grande qu'une autre, l'autre ne commencera pas d'en haut mais du milieu... Si tu vois ce que je veux dire ;p
Faire une mise en page en imbriquant plusieurs tableaux en un il y a quelques problèmes, en général tu utilises a l'intérieur d'une balise <TD> ou <TABLE>

<TD valign=top/middle/bottom> (pour la cellule)
ou
<TABLE valign=top/middle/bottom> (pour le tableau)

Malheureusement quand il commence a en y avoir plusieurs le code est passé a la trappe, quand il s'agit de dire à chaque tableaux de situer ton contenu a tel endroit il le laissera toujours au milieu par défaut.
ou alors il existe autre chose que valign spécifique pour les tableaux (j'ai un doute la dessus) mais je ne l'ai pas encore découvert

Ma réponse est : simplifies ton tableau au maximum avec des lignes et colonnes uniquement, ou passes a autre chose que du html pour ta mise en page.
Citation :
Provient du message de Lango Silma
ça dépend de ce que tu appelles correcte... en tous cas ta mise en page sera beaucoup plus rigide c'est sûr... c'est en pensant comme ça qu'on arrive à faire des sites qui ne sont bien mis en page qu'en 800x600, si on a une fenêtre plus petite on arrive pas à tout voir.

des bonnes raisons d'utiliser les CSS :
  • c'est plus facile à utiliser que les tableaux (si, si)
  • c'est plus rapide à coder (suffit de définir le positionnement des objets, sans se soucier desdits objets, puis de définir les objets, sans se soucier de leur positionnement)
  • le code est plus lisible
  • le code est plus petit (il n'y a plus 1000 fois la définition de la couleur de background, du positionnement etc. pour un tableau à 1000 cases)
  • c'est plus rapide à charger, et si le CSS est dans un fichier séparé commun à plusieurs pages du sit one ne le charge qu'une seule fois
  • ça permet de faire des sites plus jolis, sans utiliser de javascripts etc (blocs flottants, menus, etc.)
  • sûrement beaucoup d'autres raisons auxquelles je ne pense pas
Je rajouterais aussi qu'avec une belle mise en page uniquement en CSS, tu peux être sûr que ta page passera sous n'importe quel navigateur

A lire :
http://www.pompage.net/
http://www.openweb.eu.org/

Après, à vous de voir si vous souhaitez vous mettre à jour ou pas... ^^
Citation :
Provient du message de Tagnar
Merci pr tte vos solutions...

J'ai deja fait Thunder mais en fait avec ce système là, Si on a une colonne plus grande qu'une autre, l'autre ne commencera pas d'en haut mais du milieu... Si tu vois ce que je veux dire ;p
Si tu tiens quand même à faire avec des tableaux,tu utilises l'attribut valign="top"
CSS je connais pas et j'ai pas le temps d'apprendre en fait

Merci Pepin

Pr le valign, soit je le met pas a la bonne place, soit ça fonctionne pas
J'ai sa...
Code:
<table width="160" border="0" cellpadding="0" cellspacing="0">
                       <tr> 
                        <td width="5" height=10"><img src="coinhg.gif" width="5" height="10"></td>
                        <td width="150" height=10"><img src="milieuh.gif" width="150" height="10"></td>
                        <td width="5" height=10"><img src="image" width="5" height="10"></td>
                      </tr>
                      <tr> 
                        <td width="5" height=10" nowrap background="image">&nbsp;</td>
                        <td width="150" height=10" bgcolor="464646"> 
                          <table width="150" border="0" cellpadding="0" cellspacing="0">
                            <tr> 
                              <td>
                                <div align="center"><img src="image" width="56" height="20"></div>
                              </td>
                            </tr>
                          </table>
                          <table width="150" border="0" cellpadding="0" cellspacing="0">
                            <tr> 
                              <td> 
                                <div align="center">menu 1<br>
                                  menu 2<br>
                                  menu 3</div>
                              </td>
                            </tr>
                          </table>
                        </td>
                        <td width="5" height=10" nowrap background="image">&nbsp;</td>
                      </tr>
                      <tr> 
                        <td width="5" height=10"><img src="image" width="5" height="10"></td>
                        <td width="150" height=10"><img src="image" width="150" height="10"></td>
                        <td width="5" height=10"><img src="image" width="5" height="10"></td>
                      </tr>
                    </table>
Je dois le mettre ou le valign ?
<table width="160" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="5" height=10"><img src="coinhg.gif" width="5" height="10"></td>
<td width="150" height=10"><img src="milieuh.gif" width="150" height="10"></td>
<td width="5" height=10"><img src="image" width="5" height="10"></td>
</tr>
<tr>
<td width="5" height=10" nowrap background="image"> </td>
<td width="150" height=10" bgcolor="464646">
<table width="150" border="0" cellpadding="0" cellspacing="0 valign="top" >
<tr>
<td>
<div align="center"><img src="image" width="56" height="20"></div>
</td>
</tr>
</table>
<table width="150" border="0" cellpadding="0" cellspacing="0" valign="top" >
<tr>
<td>
<div align="center">menu 1<br>
menu 2<br>
menu 3</div>
</td>
</tr>
</table>
</td>
<td width="5" height=10" nowrap background="image"> </td>
</tr>
<tr>
<td width="5" height=10"><img src="image" width="5" height="10"></td>
<td width="150" height=10"><img src="image" width="150" height="10"></td>
<td width="5" height=10"><img src="image" width="5" height="10"></td>
</tr>
</table>
Citation :
Provient du message de Tagnar
CSS je connais pas et j'ai pas le temps d'apprendre en fait
tu en as pour 15 mins à lire un tutoriel quelconque...

et tu gagneras plein de temps après en écrivant du code html 100 fois plus lisible et 100 fois plus concis... et en plus la mise en page sera plus élégante
Citation :
Provient du message de Lango Silma
tu en as pour 15 mins à lire un tutoriel quelconque...

et tu gagneras plein de temps après en écrivant du code html 100 fois plus lisible et 100 fois plus concis... et en plus la mise en page sera plus élégante
Totalement d'accord avec Poulpi ! Je dois dire que le site cité ci dessus Open Web m'a donné envie de franchir le pas et de ne plus faire un mélange hybride de CSS et html.
En plus, franchement le css est vraiment facile à comprendre et beaucoup plus propre !
Citation :
Provient du message de Miaou
Totalement d'accord avec Poulpi ! Je dois dire que le site cité ci dessus Open Web m'a donné envie de franchir le pas et de ne plus faire un mélange hybride de CSS et html.
En plus, franchement le css est vraiment facile à comprendre et beaucoup plus propre !
mais heu je m'appelle pas poulpi !!! et je serais toi je ne dénigrerais pas les tentacules, sinon quand je vais dominer le monde tu seras le premier à être réduit en esclavage

sinon pour revenir dans le sujet et en remettre une couche sur les CSS, je rappelle que le format CSS est l'aboutissement de nombreux développeurs web qui pendant des années ont souffert du fait que le html soit inadapté à la mise en page... donc maintenant que ça existe, çc'est vraiment bête de pas les utiliser... surtout que (je sais je me répète mais c'est important) les CSS sont vraiment intuitifs et faciles à utiliser, bien plus que le html. Donc si tu maitrises le html tu en as très peu de temps pour apprendre à les maitriser, et ce temps sera très vite rentabilisé étant donné que tu auras moins d'efforts à fournir pour faire ta page web
valign n'est pas un attribut de la balise <table>, mais de <td> ou <tr>.

Donc dans le code de ta table, tu dois mettre valign="top" dans la balise <td> de la cellule contenant la table.

Mais comme tu peux le voir, c'est le gros bordel à mettre en place, et à relire ensuite c'est l'horreur...

La lisibilité du code, c'est primordial si tu veux faire des changements plus tard.

Et puis les fichiers générés pèsent pas loin de 50 à 80% Ko de moins, à relire, c'est plus rapide ^^
En gros ça doit me donner sa ?
Code:
<td width="160">
                    <table width="160" border="0" cellpadding="0" cellspacing="0">
                      <tr valign="top">
                        <td>&nbsp;</td>
                      </tr>
                    </table>
Si c sa ben ça fonctionne pas :/
Code:
<table>
 
 <tr>
  
  <td valign="top"> <!-- colonne 1, contenu en haut -->
   <table>
    <tr>
     <td> </td>
    </tr>
   </table>
  </td> <!-- fin de la colonne 1 -->

  <td valign="middle"> <!-- colonne 2, contenu au milieu -->
   <table>
    <tr>
     <td> </td>
    </tr>
   </table>
  </td> <!-- fin de la colonne 2 -->
  
  <td valign="bottom"> <!-- colonne 3, contenu en bas -->
   <table>
    <tr>
     <td> </td>
    </tr>
   </table
  </td> <!-- fin de la colonne 3 -->
 
 </tr>

</table>
En gros, c'est ça.
Mais bon, c'est vraiment un gros bordel

Je crois que je préfère largement ça :

Code:
<div id="colonne1">
 <!-- contenu de ta colonne -->
</div>

<div id="colonne2">
 <!-- contenu de ta colonne -->
</div>

<div id="colonne3">
 <!-- contenu de ta colonne -->
</div>
Et que l'on peut ensuite placer où l'on veut avec un CSS de ce type là :

Code:
div#colonne1 {
width: 160px;
position: absolute;
top: 0;
left: 0;
}

div#colonne2 {
position: absolute;
top: 0;
right: 170px;
left: 170px;
}

div#colonne3 {
width: 160px;
position: absolute;
top: 0;
right: 0;
}
Enfin, les largeurs en px, c'est pas forcément le mieux mais... enfin, c'est plus clair, non ?
Répondre

Connectés sur ce fil

 
1 connecté (0 membre et 1 invité) Afficher la liste détaillée des connectés