[html / css] gerer la largeur des cellules dans un tableau

gerer la largeur des cellules dans un tableau [html / css] - HTML/CSS - Programmation

Marsh Posté le 08-05-2007 à 18:07:17    

Hello,
j'ai un souci avec un tableau en HTML.
J'aimerai pouvoir gerer la taille de mes cellules en largeur.
Par exemple j'ai ceci:

Code :
  1. <table>
  2. <tr>
  3.   <td>1</td>
  4.   <td>2</td>
  5.   <td>3</td>
  6. </tr>
  7. <tr>
  8.   <td>4</td>
  9.   <td>5</td>
  10.   <td>6</td>
  11. </tr>
  12. <table>


J'aimerai par exemple que mes cellules 1 et 3 fassent 16 pixel de largeur tandis que celle de 4 et 6 en fassent 10px. Comment faire?
Bien sur j'ai colle du code css pour chacune de mes cellules mais ca ne marche pas. Les cellules 4 et 6 gardent la largeur des cellules 1 et 3.
Merci.

Reply

Marsh Posté le 08-05-2007 à 18:07:17   

Reply

Marsh Posté le 08-05-2007 à 19:32:39    

<tr> correspond à une ligne.
 
Tu ne peux pas avoir deux cellules d'une même colonne avec des dimensions différentes.
 
Si tu spécifie une dimension de 10 px à tes cellules 4 et 6 et une dimension de 16px à tes cellules 1 et 3, les 4 et 9 prendrons les dimensions du dessus car elles sont plus larges.
 
Néamoins voilà ce que tu demandes :
 

Code :
  1. <table>
  2. <tr>
  3.   <td width="16px">1</td>
  4.   <td>2</td>
  5.   <td width="16px">3</td>
  6. </tr>
  7. <tr>
  8.   <td width="10px">4</td>
  9.   <td>5</td>
  10.   <td width="10px">6</td>
  11. </tr>
  12. <table>


Reply

Marsh Posté le 09-05-2007 à 09:48:39    

Fused a écrit :

<tr> correspond à une ligne.
 
Tu ne peux pas avoir deux cellules d'une même colonne avec des dimensions différentes.
 
Si tu spécifie une dimension de 10 px à tes cellules 4 et 6 et une dimension de 16px à tes cellules 1 et 3, les 4 et 9 prendrons les dimensions du dessus car elles sont plus larges.
 
Néamoins voilà ce que tu demandes :
 

Code :
  1. <table>
  2. <tr>
  3.   <td width="16px">1</td>
  4.   <td>2</td>
  5.   <td width="16px">3</td>
  6. </tr>
  7. <tr>
  8.   <td width="10px">4</td>
  9.   <td>5</td>
  10.   <td width="10px">6</td>
  11. </tr>
  12. <table>



C'est ce que j'avais fait justement. Mais ca ne marche pas.
 
Comme je le disais dams mon premier message j'avais colle du code css mais il ne fonctionne pas tout comme ce que tu m'as donne.

Code :
  1. .td_petit{
  2. width: 10px;
  3. }
  4. .td_grand{
  5. width: 16px;
  6. }


Message édité par Spir le 09-05-2007 à 09:50:56
Reply

Marsh Posté le 09-05-2007 à 10:08:20    

ça peut pas marcher ce que tu demandes!!!
Ne serait-ce que pour tracer la bordure droite de la 1ere colonne...
 
Maintenant la vraie question, c'est pourquoi as-tu besoin d'avoir deux cellules d'une même colonne de taille différente?

Reply

Marsh Posté le 09-05-2007 à 10:24:05    

anapajari a écrit :

ça peut pas marcher ce que tu demandes!!!
Ne serait-ce que pour tracer la bordure droite de la 1ere colonne...
 
Maintenant la vraie question, c'est pourquoi as-tu besoin d'avoir deux cellules d'une même colonne de taille différente?


Oui, c'est bien ce que je pensais. Je vais me dermerder autrement.
 
C'est pour faire une interface old school en utilisant les tableaux. Je sais c'est tres mal d'utiliser les tableaux pour faire du design, il vaut mieux utiliser les CSS. Et je suis bcp plus a l'aise avec les css mais bon, la j'ai pas le choix. C'est pour un theme pour WebSphere Portal. Il me faut un design solide qui passe sur tout les navigateur. J'ai choisi la facilite a l'opimisation et a la proprete. Tout est en CSS sauf un tableau avec 8 cellules qui me permet d'afficher un box avec des bords arrondi de taille variable qui fait toute la largeur de la page.
Une ligne pour le header
Une ligne pour la navigtion
Une autre pour le contenu
Une derniere poru le footer
 
Et dans chaque ligne 3 cellules: une pour le bord de gauche, une pour le fond du milieu et la derniere pour le bord de droite.
 
Bien sur avant de me lancer la dedans j'ai cherche des solutions CSS comme celle-ci:
http://www.modxcms.com/simple-roun [...] boxes.html
 
Mais la mon Box prend tout l'ecran, donc j'aurai eu une image enorme, donc au final l'histoire des tableaux depanne...
Mais j'ai une idee pour contourner mon souci.

Reply

Marsh Posté le 09-05-2007 à 13:05:03    

J'explique en image mon souci:
 
Voici ce que j'avais:
http://img244.imageshack.us/img244/8974/tableau1ag7.png
Le petit trait qu'on peut voir c'est pour le bas de mon menu "top nav" (il est inclu dans les images qui forme les deux cellules de gauche et droite de la deuxieme ligne TopNav). C"est de la qu'est ne mon pb. Au debut ma nav etait simple: des tab avec un border qui raccordait ce petit trait. Mais des que j'ai eu deux niveau de nav ca a mis le souk puisque mon trait n'etait pas au bon endroit, donc le trait n'etait plus relie. Bref ce qu'il fallait que je fasse c'est vire ce trait de l'image et le cree entierement avec la css et non pas a moitie (Pour resume le trait etait forme par la css et par l'image de fond du tableau).
 
Voici une image qui montre comment son construit mes cellules:
http://img242.imageshack.us/img242/4446/tableau1outlinepn9.png
 
La solution:
http://img516.imageshack.us/img516/9418/tableau2ho0.png
http://img242.imageshack.us/img242/6510/tableau2outlinefq7.png
 
Comme on peut le voir sur la derniere image ce que j'ai fait c'est que j'ai fragmente les image des cellules de gauche et droite du header et du footer en deux. tandis que pour les autres lignes j'ai ajoute a la cellule du milieu la propriete colspan a 3.
 
Si quelqu'un connait un plan pour faire la meme chose en tableless extensible au maximum et compatible avec tout les navigateurs ca m'interesse.


Message édité par Spir le 09-05-2007 à 13:06:17
Reply

Marsh Posté le 09-05-2007 à 19:08:12    

Tout simplement en CSS comme la plupart des sites aujourd'hui.
 
Je te laisse à ce tutoriel qui te permettra de comprendre tout ça.
 
http://css.alsacreations.com/Faire [...] design-css
 
N'utilise les tableaux uniquement pour ce pour quoi ils sont destinés : pour afficher des données.

Reply

Marsh Posté le 09-05-2007 à 19:31:10    

Fused a écrit :

Tout simplement en CSS comme la plupart des sites aujourd'hui.
 
Je te laisse à ce tutoriel qui te permettra de comprendre tout ça.
 
http://css.alsacreations.com/Faire [...] design-css
 
N'utilise les tableaux uniquement pour ce pour quoi ils sont destinés : pour afficher des données.


Tu n'as pas du lire mes messages en entier. Faire comme ce tuto n'est pas un problème. Mais faire ce que je veux faire c'est autre chose.
Sinon oui je sais bien comme je disais faire ce que je fais avec des tableaux c'est mal.
 
 

Spir a écrit :

Bien sur avant de me lancer la dedans j'ai cherche des solutions CSS comme celle-ci:
http://www.modxcms.com/simple-roun [...] boxes.html
 
Mais la mon Box prend tout l'ecran, donc j'aurai eu une image enorme, donc au final l'histoire des tableaux depanne...


Message édité par Spir le 09-05-2007 à 19:34:12
Reply

Marsh Posté le 14-05-2007 à 17:19:47    

Bon c'est cool j'ai reussi a faire la meme chose en tableless. J'ai pas mal lutter, j'ai du bidouiller  mais au final c'est plus propre.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed