Jump to content

trouble with tables


tinman

Recommended Posts

I wrote the following code

 

<style type="text/css">

 

.tbgen

{

border:4px solid #B88A00;

padding:10px 10px;

background:#FFFFE5;

border-radius:15px;

-moz-border-radius:15px;

}

 

h4

{

margin-bottom: -10px;

margin-top:0cm;

}

 

</style>

</head>

 

<body bgcolor="EBB000">

<table cellpadding="0" cellspacing="10">

<tr>

<td>

a

</td>

<td>

b

</td>

</tr>

<tr>

<td>

<div class="tbgen">

c

</div>

</td>

<td rowspan="4">

<div class="tbgen" style="min-height:2000px">

d

</div>

</td>

<tr>

<td>

<div class="tbgen">

e

</div>

</td>

</tr>

<tr>

<td>

<div class="tbgen">

f

</div>

</td>

</tr>

<tr>

<td>

<div class="tbgen">

g

</div>

</td>

 

</tr>

</tr>

</table>

 

and have done what I can think of to get rid of the spacing above and below the cells in column 1 but in chrome cell g is off by itself and in firefox column 1 spaces all cells equally in respect to the current size of column 2. Could anyone please assist me with my problem? Thank you for your time and consideration.

Link to comment
Share on other sites

For starters, you have a redundant </tr> at the bottom right before the closing table tag.

 

Setting your cellspacing from 10 to zero will help with the spacing issue, and if you add a * {margin: 0; padding: 0;} to your CSS, you'll take caer of any browser default settings.

 

However, Safari, Opera, Chrome shows c, e, and f as big as their content makes them, and g takes up the remaining space (set your min height to something more manageable like 300 while you're working on this); while

Firefox and IE9 space c, e, f, and g equally to cover the height of d.

 

Try setting the height of cells c, e, f, and g to what height you want, that should solve this problem.

 

But I hope you're now working on a table to use it for layout -- that's bad and very outdated practice.

Link to comment
Share on other sites

Tables are for tabular data, and yes, the 'modern' way (as of going on 10 years ago now) is to use CSS for formatting and layout. Divs are just one of the tags used to make that happen.

 

And yes, by setting margins and padding to zero on all browsers, I'm doing a reset.

Link to comment
Share on other sites

Tables are for tabular data, and yes, the 'modern' way (as of going on 10 years ago now) is to use CSS for formatting and layout. Divs are just one of the tags used to make that happen.

 

And yes, by setting margins and padding to zero on all browsers, I'm doing a reset.

 

Thank you, you have been incredibly helpful, I think I'll be spending a lot of time on this forum. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...