473,651 Members | 2,917 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.c om/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 11347
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.c om/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:collap se 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.c om/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:collap se 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.infosystem s.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:collap se;} /* 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.inval id>,
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

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

Similar topics

7
15994
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 this: <img src="images/nav.gif" width="100" height="600" hspace="0" vspace="0" border="0"> No head or body tags. Just a 100 x 600 gif image. Here's the code for the main.php page:
23
18498
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> #treecontainer {
0
15186
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 with borders behave counter-intuitively (IMHO) when using style="white-space: nowrap;". Below is a fairly small chunk of XHTML that demonstrates what I'm talking about. What gives? -Mark
13
6120
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. However, in my design I need them to be laid out like this: XXXXXXXXooooooooo XXXXXXXXooooooooo XXXXXXXXooooooooo XXXXXXXXLLLLLLLLL
31
6958
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 contents of each cell (picture/link and associated text) rotate randomly. Note that the text titles must remain with their associated picture and link (I don't want to scramble all the elements--just rotate the entire contents of the table cell).
11
3570
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 but not in height calculations. Oh, and Opera version 8.02 does the same thing. |<-->| |<-->| <------ border |<------------>| <------ table contents
11
3354
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 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,
2
7693
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 space. I want to remove this space. How can I solve? <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server">
3
3848
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. Here is what I have so far, unfortunately using height:100% for the middle row blows the size of the table! <html> <head> <title>Auto expanding middle row!</title>
0
8357
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8700
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8465
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8581
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7298
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5612
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4285
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2701
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1588
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.