473,326 Members | 2,255 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

How to eliminate space between table border and table contents?

I have a simple html page that contains an image in a single table cell,
surrounded by a border: <http://www.softrains.com/lc/test.html>. I would
like to eliminate the space between the table border and the table
contents. I have tried setting margin: 0 in CSS everywhere, as well as
cellmargin/cellpadding in HTML.

What is the best way to eliminate the extra space between a table border
and its contents?

Thanks,
-Mike
Dec 6 '05 #1
11 11321
Michael Mayo wrote:
I have a simple html page that contains an image in a single table cell,
surrounded by a border: <http://www.softrains.com/lc/test.html>. I would
like to eliminate the space between the table border and the table
contents.
What is the best way to eliminate the extra space between a table border
and its contents?


Add border-collapse:collapse to table style

Louise
Dec 6 '05 #2
Michael Mayo wrote:

I have a simple html page that contains an image in a single table cell,
surrounded by a border: <http://www.softrains.com/lc/test.html>. I would
like to eliminate the space between the table border and the table
contents. I have tried setting margin: 0 in CSS everywhere, as well as
cellmargin/cellpadding in HTML.

What is the best way to eliminate the extra space between a table border
and its contents?


Don't use a table for this. Use a style-sheet or local style to
set the border on the image itself. Center the image using a div
with a centered style:
<div style="text-align:center"><img . . .></div>
(But I would probably use <p align="center">, which is still
tolerated under HTML 4.01 transitional.)

Tables should be used only to present information in a tabular
arrangement.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.
Dec 6 '05 #3
Why not eliminate the table and just add

style="border: solid #41A0D0 2px;"

to the image itself? Is that not what you want?

Dec 6 '05 #4
On Tue, 06 Dec 2005 07:12:10 -0800, Adam Risser wrote:
Why not eliminate the table and just add
style="border: solid #41A0D0 2px;"
to the image itself? Is that not what you want?


The page I presented is a bit oversimplified. In the final version, the
image will be at the top of a table containing the entire page, with a
border drawn around the entire page. So, I don't think this will work.

Thanks,
-Mike
Dec 6 '05 #5
On Tue, 06 Dec 2005 01:38:14 +0000, boclair wrote:
Add border-collapse:collapse to table style


Thanks very much for that answer! I read the w3c document on this and
it seems that the newer "collapsing border" model is much more versatile.
However, I also discovered that I could do it in the old model by
specifying a 'border-spacing' property:

border-collapse: separate;
border: solid #41A0D0 2px;
border-spacing: 0px;

Is there a preferred way to do it?

Thanks,
-Mike

Dec 6 '05 #6
On Mon, 05 Dec 2005 18:32:08 -0800, David Ross wrote:
Don't use a table for this.
Tables should be used only to present information in a tabular
arrangement.


You're right, but for political reasons I can't do it this way. I would
probably be beheaded in public.

-Mike
Dec 6 '05 #7
in comp.infosystems.www.authoring.html, none wrote:
On Tue, 06 Dec 2005 07:12:10 -0800, Adam Risser wrote:
Why not eliminate the table and just add
style="border: solid #41A0D0 2px;"
to the image itself? Is that not what you want?


The page I presented is a bit oversimplified. In the final version, the
image will be at the top of a table containing the entire page, with a
border drawn around the entire page. So, I don't think this will work.


Then something else will work. Wrapping anything to a table just to get a
border is a stupid idea, because it doesn't work on any browser, let
alone work similarly. And understanding how it should work, and how it
works in different browsers is not exactly simple. And it is not even
correct...

Wrap things to div instead, and give div a border. (and never wrap just
one element in something to get border, unless you need multible
borders/backgrounds/whatever)

Far more easy to get right. Unless you really need to get it work pixel
perfectly on NN3 or IE3, but then, why would you even consider CSS?

Anyway, if you happened to have image in table, and you would need to get
rid of that space, you could do some or all off:

table {border-spacing:0;} /* thakes away spacing between cells in
separated borderr modell*/
table {border-collapse:collapse;} /* changes border modell*/
img {vertical-align:top} /* aligns image to top of line*/
img {display:block;} /* changes image to block thus it is not rendered
on baseline*/


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Dec 6 '05 #8
On Tue, 06 Dec 2005 17:52:54 +0100, Lauri Raittila wrote:
Then something else will work. Wrapping anything to a table just to get a
border is a stupid idea, because it doesn't work on any browser,
What do you mean by 'doesn't work'? I agree that it isn't the right way to
do it, but I'm hoping that it will work anyway in most cases.

Wrap things to div instead, and give div a border. (and never wrap just
one element in something to get border, unless you need multible
borders/backgrounds/whatever)
As I mentioned previously, I can't use the div tag anywhere in my html for
political reasons -- it has been officially declared an enemy of the
revolution.

img
{vertical-align:top} /* aligns image to top of line*/ img {display:block;}
/* changes image to block thus it is not rendered on baseline*/


Hrm...aren't vertical-align:top and display:block the default for images?

Thanks,
-Mike
Dec 7 '05 #9
In article <pa****************************@nowhere.invalid> ,
none <no***@nowhere.invalid> wrote:
On Tue, 06 Dec 2005 17:52:54 +0100, Lauri Raittila wrote:
[snip]
Wrap things to div instead, and give div a border. (and never wrap just
one element in something to get border, unless you need multible
borders/backgrounds/whatever)


As I mentioned previously, I can't use the div tag anywhere in my html for
political reasons -- it has been officially declared an enemy of the
revolution.
[snip]


Sounds more like a counter-revolution.

--
= Eric Bustad, Norwegian bachelor programmer
Dec 7 '05 #10
none wrote:
On Tue, 06 Dec 2005 17:52:54 +0100, Lauri Raittila wrote:

img
{vertical-align:top} /* aligns image to top of line*/ img {display:block;}
/* changes image to block thus it is not rendered on baseline*/


Hrm...aren't vertical-align:top and display:block the default for images?


No. vertical-align: baseline and display: inline would be much closer
to the default presentation of <img> elements in most browsers.

Steve

Dec 7 '05 #11
in comp.infosystems.www.authoring.html, none wrote:
As I mentioned previously, I can't use the div tag anywhere in my html for
political reasons -- it has been officially declared an enemy of the
revolution.


Then you should perhaps try some other forum, as your problem clearly is
not HMTL nor CSS.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Dec 7 '05 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Bruce W...1 | last post by:
I made my first PHP page that uses includes. http://php.didah.com/main.php But I can't get rid of a gap (about 5 pixels) between the table rows. The content of each include file is one line like...
23
by: MattB | last post by:
Hello please help, I have a table cell with a div in it. The div has a width of 300px. but when it is rendered it puts extra space into the table cell. Here's the style <style>...
0
by: Mark Moore | last post by:
I'm trying to layout a couple text input fields and their corresponding labels without using a table. When I was trying to debug my understanding of CSS, I was *very* surprised to see that span's...
13
by: DM | last post by:
If I put three images next to each other (each within an anchor tag) they all line up horizontally as expected with no space between them. I.e., they're sitting flush up against each other. ...
31
by: Royal Denning | last post by:
I am designing a table with 2 columns and 20 rows. I want to insert small images (each with a link) and a text title in each cell of the table. On refresh of the page, I would like to have the...
11
by: Norman L. DeForest | last post by:
Am I misunderstanding the CSS specifications or is Firefox (version 1.0.6) (and Opera) doing the wrong thing? It appears that Firefox 1.0.6 includes the border in width calculations for tables...
11
by: Michael Mayo | last post by:
I have a simple html page that contains an image in a single table cell, surrounded by a border: <http://www.softrains.com/lc/test.html>. I would like to eliminate the space between the table...
2
ramprabu
by: ramprabu | last post by:
Hello, I will give the sample code of html. Here first table only apply border 1 width. other tables are border 0. The problem is border=0 means border was not visible but it takes white border...
3
by: jerrygadd | last post by:
Hi can anyone please help? I have a need to make a table of fixed size, containing three rows, where the middle row auto expands to fill the remaining space between the top and bottom rows. ...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.