Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1072 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1556924
Spir
Words are timeless
Posté le 08-05-2007 à 18:07:17  profilanswer
 

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.

mood
Publicité
Posté le 08-05-2007 à 18:07:17  profilanswer
 

n°1556962
Fused
Posté le 08-05-2007 à 19:32:39  profilanswer
 

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


n°1557179
Spir
Words are timeless
Posté le 09-05-2007 à 09:48:39  profilanswer
 

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
n°1557190
anapajari
s/travail/glanding on hfr/gs;
Posté le 09-05-2007 à 10:08:20  profilanswer
 

ç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?

n°1557200
Spir
Words are timeless
Posté le 09-05-2007 à 10:24:05  profilanswer
 

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.

n°1557314
Spir
Words are timeless
Posté le 09-05-2007 à 13:05:03  profilanswer
 

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
n°1557577
Fused
Posté le 09-05-2007 à 19:08:12  profilanswer
 

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.

n°1557587
Spir
Words are timeless
Posté le 09-05-2007 à 19:31:10  profilanswer
 

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
n°1560316
Spir
Words are timeless
Posté le 14-05-2007 à 17:19:47  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[HTML/CSS/Javascript] Récuperer l'id du texte séléctionnéscript permettant de générer des pages html
variable a la place d'un indice dans un tableau en jsTrier un tableau à double dimension ?
Remplir une cellule de tableau avec un div[C#] Recherche dans un tableau
[html] executer ou pas le fichier index.htmGenerer des fichiers index.html
récupérer valeur dans page html[JSP] créer tableau dynamique en servlet
Plus de sujets relatifs à : [html / css] gerer la largeur des cellules dans un tableau


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR