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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table Spacing 1

Status
Not open for further replies.
at51178

at51178

Technical User
Mar 25, 2002
587
US
Hey Guys


I have a design problem

I am kind of new to Html and Javascript

but I am creating a form with tables and everytime I create a new table or put together more than one image together in a table I get a gap in between the two items I tried doing border=0 cellspacing=0 cellpadding=0 but nothing seems to work What I would like to do is have two or more table right next to each other without any gaps.
 
Sort by date Sort by votes
Don't fully understand your question. Are you trying to put two tables beside each other but getting an space, or are you trying to put two images in two table data's and getting a space? If it's the latter, it's probably because the browser is dividing the table into even rows. Say you have four rows, and your table width is 100%. That means each is a quarter of table, roughtly. Say, for example, that each is 200 pixels wide, but your picture is only 150, hence the gap. try specifying how wide the table data's should be and see if that works.
 
Upvote 0 Downvote
Sorry I wasn't too specific


1)I have two tables and there is a gap between the two which I would like to close

2)I also have another situation where I have one table one row and I would like to put two pictures in the table side by side but I get a gap between the two pictures.



I would like to know if there is anyway of closing the gaps.
this is the code that I am using.

<html>
<head>
<body>
<table Width=100% Height=29 border=0 cellpadding=0 cellspacing=0 >
<tr>
<td>
<img src=Home.bmp height=29 border=0>
<img src=button.bmp height=29 border=0>
</td>
</tr>
</table
</body>
</head>
</html>
 
Upvote 0 Downvote
Without seing your code it'a impossible to explore the problem.
Make sure that you don't have any spaces or carriage returns between cell contents and closing </td> tags.

This is bad:
<td>
c o n t e n t
</td>

while this is good:
<td>
c o n t e n t</td>

 
Upvote 0 Downvote
I think I've answered your question about the images in my first post, if not let me know. Just one thing, *.bmp files are only supported by IE and they're also pretty big compared to gifs or jpegs. You might want to reconsider, unless your site if an intranet site.

As for the space between the tables, I don't know how to solve that. I thougth maybe creating a nested table would work but I tried it and I don't think it will. Why don't you just create two tables? Post some code and we'll try to help you out.

[wavey]
 
Upvote 0 Downvote
Thanks for all the help guys I been fooling around with this problem for quite some time

here is my code with the two tables


if you look at preview view of msn.com you can see how the tables are together and there are no gaps in between that is what I am trying to accomplish.

hope this code helps a little

<html>
<head>
<body>
<table Width=100% Height=29 border=0 cellpadding=0 cellspacing=0 >
<tr>
<td>
<img src=Home.bmp height=29 border=0>
<img src=button.bmp height=29 border=0>
</td>
</tr>
</table
<table Width=100% Height=29 border=0 cellpadding=0 cellspacing=0 >
<tr>
<td>
<img src=Home.bmp height=29 border=0>
<img src=button.bmp height=29 border=0>
</td>
</tr>
</table
<table Width=100% Height=29 border=0 cellpadding=0 cellspacing=0 ><tr><td>
<img src=Home.bmp height=29 border=0>
<img src=button.bmp height=29 border=0></td></tr></table
</body>
</head>
</html>

 
Upvote 0 Downvote
As I said, you have to remove ALL whitespaces and carriage returns. In your case not only before </td> tag, but also between ALL <img> tags as well. So it will look like <img src=...><img src=...> placed on one line.
This is the code tha does what you want:

<html>
<head>
<body>
<table Width=100% Height=29 border=0 cellpadding=0 cellspacing=0 >
<tr>
<td>
<img src=Home.bmp height=29 border=0><img src=button.bmp height=29 border=0></td>
</tr>
</table>
<table Width=100% Height=29 border=0 cellpadding=0 cellspacing=0 >
<tr>
<td>
<img src=Home.bmp height=29 border=0><img src=button.bmp height=29 border=0></td>
</tr>
</table>
<table Width=100% Height=29 border=0 cellpadding=0 cellspacing=0 ><tr><td><img src=Home.bmp height=29 border=0><img src=button.bmp height=29 border=0></td>
</tr></table>
</body>
</head>
</html>

An alternative is to place each image into separate table cell, and this is better thing to do.

Also, all images should have both width/height values specified. This is not affecting on gaps, but the right thing to do in html.
As already said, .bmp format is not valid - accepted formats are gif, jpg and png.
 
Upvote 0 Downvote
**********
you have to remove ALL whitespaces and carriage returns
**********
Starway... are you sure about this? As far as I know, whitespace is ignored. For example if you wrote Hello there (2 spaces) it would be rendered as Hello There by the browser (with one space). That's why there's a non-breaking space, if you want to inser extra space you'd have to write hello &nbps;there - this would result in two spaces. Whitespace is encourage to improve readability. You don't want all your code squashed into one line, it makes it difficult to read.

Anybody feel free to correct me here... but I'm pretty sure I'm right.
 
Upvote 0 Downvote
Thanks starway it worked you were right about the way the code was being written

was also thinking the way y2k did well I am going to experiment a little further and see if I run into any road blocks

again thanks a lot
 
Upvote 0 Downvote
to y2k1981:
Yes I'm sure. Just test the original code and the one I posted to see the difference.

If there are more that 1 whitespaces they are always ignored and produce 1 only.
But if there's 1 whitespace it doesn't disappear, and always pops up in a place where you don't expect for it. The same thing is for carriage returns - sometimes you just don't spot the gap they create (and this thread is a good example of it). They don't produce gaps between tables, but do produce them between the elements inside one cell.

Writing everything in one line is not the right way to do it. In order to avoid it, as I said, you have to place each image in separate cell - and this is an accepted way to do these things.
If you don't want to make many cells - remove all 'invisible' spaces and make your code unreadable. There's no other option.
 
Upvote 0 Downvote
Yeah, now I see your point. I never really thought about that! I know that you can use the table data's to seperate the images, but it never occured to me that a carriage return would put in a space until you explained it now!

[wavey]
 
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
883
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
162
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
166
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
144
vacunita
vacunita
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
174
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top