table border problem

gib65

02-16-2012, 08:23 PM

Hello,

I have the following HTML:

<html>

<head>
</head>

<body>

<table style="height: 100%;" cellspacing=0 cellpadding=0 border=1>

<tr><td colspan=2 style="height: 100px; text-align: center;">
<span style="font-size: 24px;">
<img src="H&R banner.jpg" border=0></span></td></tr>

<tr>

<td style="width: 200px; padding-top: 10px; text-align: center;">
<iframe style="width=100%; height: 100%;" src="news.html" scrollable=yes frameborder=no></iframe>
</td>

<td style="width: 530px;">
<table style="width: 100%; height: 100%" cellspacing=0 cellpadding=0 border=0>

<tr>
<td style="height: 50px; background: url('menu_bg.jpg'); text-align: center;">

<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td><img src="home.jpg" border=0></td>
<td><img src="properties.jpg" border=0></td>
<td><img src="about.jpg" border=0></td>
<td><img src="contact.jpg" border=0></td>
</tr>
</table>

</td></tr>

<tr>
<td style="text-align: center;">
<iframe style="width: 100%; height: 100%;" src="content.html" srollable=yes frameborder=0></iframe>
</td>
</tr>

</table>
</td>

</tr>
</table>

</body>
</html>

The line in bold is causing me trouble.

If I change border=1 to border=0, suddenly my table goes all out of wack. The banner at the top all of a sudden shift about 20 pixels to the right becoming misaligned with everything else in the table.

Does anyone know why this is?

Taro

02-16-2012, 08:49 PM

Hello gib65,

Did you try testing the code multiple times? I copied and tested the coding myself and did not see a problem with the alignment; changing the border should not have any affect on the property.

But there is a chance that even changing the thickness of the border can cause your arrangements of the segments to disarrange themselves. For example, if your container is 300 x 300 pixels, your banner must be a maximum of 300 pixels. Adding a border can add pixel thickness, therefore exceed the container limit and causing displaying errors to appear on your webpage. You can decrease the size of your table and allow room for a border.

Also, you can try using an external CSS style sheet; you'll have less problems working with the coding, having all HTML pages abide by the style rules. Hope these helps.

clausrei

02-16-2012, 09:00 PM

Maybe the position of the banner div is distorted, The browser tries to displays the table and the banner div next to each other (After you take a pixel off ) In that case have a look at THIS (http://www.barelyfitz.com/screencast/html-training/css/positioning/) or try to add this to your banner CSS clear: both;

Or it is some conflicting CSS. You should put your CSS style into a proper <style type="text/css"> ....</style> in you header. It is good practice ! Have a look at this tutorial: http://www.w3schools.com/css/. (http://www.w3schools.com/css/)

gib65

02-16-2012, 09:40 PM

Taro

02-16-2012, 10:04 PM

Taro,

Thanks but it's shift by way too much to be the difference between border/no border.

clausrei,

I'm not using divs. It's just an img in a table cell.

I put all my CSS in the header and it's till shifting.

I uploaded the page to these two sites so that you can see what I mean:

http://www.shahspace.com/border1/ <-- border=1
http://www.shahspace.com/border0/ <-- border=0

Hello gib65,

Based on the links you posted, I actually don't see any abnormal shifts. Could the problem now be the web browser you were using? Different browsers have different compatibilities when reading the codes of certain webpages. This is what I see on Mozilla Firefox:

Major Payne

02-17-2012, 04:35 PM

Best to do a table layout using a separate CSS file or at least embedded CSS. Might try:

<table style="table-layout: fixed; width: XXXpx; margin: 0 auto; padding: 0; border-collapse: collapse; border: 1px solid #c0c0c0;" summary="">Always tell browsers what you want them to do.

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Why tables for layout is stupid: http://www.hotdesign.com/seybold/
How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/how-convert-manually-your-html-tables-css
Basic Tables [Bad Examples!]: http://www.yourhtmlsource.com/tables/basictables.html
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

gib65

02-17-2012, 06:26 PM

Thanks everyone,

The problem WAS that the banner didn't fit within the predefined dimensions of the table once borders were set to 0. What I wasn't expecting was that it would be shifted according to it's own discretion in that case.

felgall

02-17-2012, 08:19 PM

What I wasn't expecting was that it would be shifted according to it's own discretion in that case.

Well the exact size of the columns and rows in a table is supposed to be dependent on the size of the tabular data it contains. You don't want the data getting chopped off because one piece of data is bigger than the rest. So it makes perfect sense for tables to restructure themselves to fit the data they contain in a way that wouldn't make sense outside of a table.

loksewaexam

02-18-2012, 01:01 PM

The problem WAS that the banner didn't fit within the predefined dimensions of the table once borders were set to 0.
http://www.loksewaexam.com