Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table alignment NIGHTMARE !!!

Status
Not open for further replies.
poulet

poulet

Programmer
Feb 22, 2003
4
0
0
US
I got five cells on a row in a HTML table.
I give a specific width to the first, the third and the fifth ones but not for the others.
The way I set the dimensions is :
TD.myStyle {
background: url(xxx.png);
padding: 0px
width: 28px;
}
I do that to make the pic fit perfectly to the cell, but it doesn't work for all of them :( Why ?????????

And I'd like the fourth cell to fit exaclty the text inside and the second one to fill the necessary space to spread allover the page width.

Please Help Me, I'm getting mad !!!
 
Sort by date Sort by votes
setting the colspan and rowspan spec's can usually give you the effect you want.

can you post the table so we can get a better idea of waht you are trying to do though _________________________________________________________
for the best results to your questions: FAQ333-2924
Is your question a most FAQ?? Find out here FAQ333-3048
 
Upvote 0 Downvote
Here are html and css extracts :
(Sorry 4 french language :)

<TABLE bgcolor=yellow cellspacing=0 width=&quot;100%&quot;>
<TR>
<TD class=coin_superieur_gauche></TD>
<TD class=fil_superieur></TD>
<TD class=gauche_onglet></TD>
<TD class=centre_onglet>Projet Mémenda</TD>
<TD class=droite_onglet</TD>
</TR>
<TR>
<TD class=fil_gauche></TD>
<TD class=contenu colspan=3>Bla bla bla bla bla</TD>
<TD class=fil_droit></TD>
</TR>
<TR>
<TD class=coin_inferieur_gauche></TD>
<TD class=fil_inferieur colspan=3></TD>
<TD class=coin_inferieur_droit></TD>
</TR>
</TABLE>



TD.coin_superieur_gauche {
background: url(../coin_superieur_gauche.jpg);
height: 33px;
padding: 0px;
width: 10px;
}
TD.fil_superieur {
background: url(../fil_superieur.jpg);
background-repeat: repeat-x;
height: 33px;
padding: 0px;
width: auto;
}
TD.gauche_onglet {
background: url(../gauche_onglet.jpg);
height: 33px;
padding: 0px;
width: 28px;
}
TD.centre_onglet {
background: url(../centre_onglet.jpg);
background-repeat: repeat-x;
color: white;
font-weight: bold;
height: 33px;
padding: 5px;
padding-top: 0px;
width: 200px;
}
TD.droite_onglet {
background: url(../droite_onglet.jpg);
height: 33px;
padding: 0px;
width: 29px;
}
TD.fil_gauche {
background: url(../fil_gauche.jpg);
background-repeat: repeat-y;
padding: 0px;
width: 10px;
}
TD.fil_droit {
background: url(../fil_droit.jpg);
background-repeat: repeat-y;
padding: 0px;
width: 29px;
}
TD.coin_inferieur_gauche {
background: url(../coin_inferieur_gauche.jpg);
height: 10px;
padding: 0px;
width: 10px;
}
TD.fil_inferieur {
background: url(../fil_inferieur.jpg);
background-repeat: repeat-x;
height: 10px;
padding: 0px;
}
TD.coin_inferieur_droit {
background: url(../coin_inferieur_droit.jpg);
height: 10px;
padding: 0px;
width: 29px;
}
 
Upvote 0 Downvote
not sure if you just did not paste the contents of the cells but if not then,
the first thing is- your dimensions will not take effect for a cell as stands. you either need to place a blank gif in the cell or a space for them to actually take effect.
eg: (take spaces out of & n b s p ;)
noticer the border setting to see the actual size here.
<body>
<TABLE border=1 bgcolor=yellow cellspacing=0 width=&quot;100%&quot;>
<TR>
<TD class=coin_superieur_gauche>& n b s p ;</TD>
<TD class=fil_superieur>& n b s p ;</TD>
<TD class=gauche_onglet>& n b s p ;</TD>
<TD class=centre_onglet>Projet Mémenda</TD>
<TD class=droite_onglet>& n b s p ;</TD>
</TR>
<TR>
<TD class=fil_gauche>& n b s p ;</TD>
<TD class=contenu colspan=3>Bla bla bla bla bla</TD>
<TD class=fil_droit>& n b s p ;</TD>
</TR>
<TR>
<TD class=coin_inferieur_gauche>& n b s p ;</TD>
<TD class=fil_inferieur colspan=3>& n b s p ;</TD>
<TD class=coin_inferieur_droit>& n b s p ;</TD>
</TR>
</TABLE>
</body>

second thing is the images sizes are going to be critical. size the image and not the cell for those particular cells. and I like to also src the image instead of the css image background attrib settings as
eg:
<TD class=coin_inferieur_droit><img src=&quot;../coin_inferieur_droit.jpg&quot; height=10 width=29></TD>

next you need &quot; &quot; around the images in the css or they will not show up. at least not every browser will catch that. also the class=&quot; &quot; should be performed.


hope that gets you going
_________________________________________________________
for the best results to your questions: FAQ333-2924
Is your question a most FAQ?? Find out here FAQ333-3048
 
Upvote 0 Downvote
In addition to onpnt's &quot;as-always-excellent&quot; advice, you might want to change the width of the table from &quot;100%&quot; to something much smaller - say &quot;50%&quot;. Regardless of the table width specification, the table cells are going to conform to what you put in them - for the most part. In this I mean that if you spceify a cell as 100 px wide and place an image in that cell that is 150 px wide, the cell will expand to fit the image.

If you're intent on forcing the table cells to fit your images than you'll have to explicitly define your table width in pixels rather than percentages of viewable screen. You'll also have to define the width of EVERY table cell and not just some of them. There's always a better way...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
384
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
88
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
91
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
80
vacunita
vacunita
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
94
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top