Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 286
  • Last Modified:

Tables Question

Hello,

Thanks for reading our question!  Here is some code for two tables, one on top of the other.

<table width="100%">
<tr><td colspan="2">
top row
</td></tr>
</table>
<table width="100%">
<tr><td>
left column
</td><td>
right column
</td></tr>
</table>

Is there any way to specify 11px of space between the upper and lower tables?

Additionally, please would you comment on this structure for a web page layout.  Workable?  Flexible?  

Many thanks,

Yunkaa
0
yunkaa
Asked:
yunkaa
  • 8
  • 6
  • 3
  • +4
2 Solutions
 
minichickenCommented:
Something like this?


<table width="100%"  border="0" cellspacing="11" cellpadding="0">
  <tr>
    <td colspan="2">Top row </td>
  </tr>
  <tr>
    <td>Left column </td>
    <td>Right column </td>
  </tr>
</table>
0
 
RoonaanCommented:
<table>..table1..</table>
<table style="margin-top:11px;">..table2..</table>

As to comment on using tables for layouting.. Well, this isn't like its is properly done. Tables are for displaying tabular data, not for layouting. For layouting you should use <div> elements and css: www.w3schools.com/css

Regards

-r-
0
 
jmanGJHS97Commented:
There's nothing wrong with using tables for layout purposes.  It's a style choice to use them rather than <div> elements.  Plus, you can easily assign a css class to a table, just like you can with a div.  If you want to use the layout you've chosen, you can do this:

<table width="100%">
<tr><td>
top row
</td></tr>
</table>
<table width="100%" style="margin-top:11px">
<tr><td>
left column
</td><td>
right column
</td></tr>
</table>

I assume the "colspan=2" part was because you have 2 columns in the bottom table.  Well, the colspan text isn't necessary because the 2 columns are contained within the bottom table, so the top table only needs to span the bottom table, regardless of the number of columns.  You can take out the colspan=2 part.

Are you planning on using the left column of the bottom table for a navigation menu of some type?  Then I assume the right column will be for the content of your page.  If so, this is a very common layout for a webpage, and you should not have much trouble using it.

Jeff
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
taz_zillaCommented:
Tables within tables is my prefered way to layout a web page.
Have one table for the entire page, specifying the exact width of each section in pixels.
Once you break the page up into large sections, you put tables inside the sections that you want to add information into.

Here is one approach like this:
One header row section for top 10% page,
One body row section for middle 80% of page,
One footer row section for lower 10% of page

Put 3 columns in the body row:
One for navigation about 20% of width
One for space about 5% of width (use a single pixel image, that is the same color as background to hold this space - You can find these on many pages, or make your own)
One for main body section for right 75% of width

The navigation column and the main body column should have tables in them to separate cleanly the text & images.

Enjoy,
Mark
0
 
COBOLdinosaurCommented:
No points to me on this.  Roonaan gave the correct answers tables are for tabular data.  CSS is for layout.  

I'm responding because there is mis-information, distortion, and bad advice in this thread that needs to be corrected.  The top-experts listed for this topic didn't get there by just posting what passes as an answer.  The philosophy in this and other WEB TAs is that we server by helping members learn to do thing the right way. Give a man a fish... he eats one day; teach him to fish and he will find his own way to prosperity.

Using table for layout management is like building wooden ships because wood floats and steel sinks.  Anyone who still advocates the uses of relic 20th century methods should be restricted to supporting IE3, Nestcrap 3 and other pre-historic browsers that could not support modern CSS approach to layout management in 4 dimensions.

jmanGJHS97,

You have no information in your profile so I can only go by your posted comment.  It appears you either lack experience or you are an old time developer still using a 1996 calendar.

>>> There's nothing wrong with using tables for layout purposes
100% wrong based on the recommendations and guidelines of the international standards body.

>>> It's a style choice to use them rather than <div> elements.
The fact that you equate div to replacment of tables with CSS layout indicates you have used very little CSS, or you would understand that a div is just another container, and for many layout sections is not the best choice.

>>>Plus, you can easily assign a css class to a table, just like you can with a div.
Again a lack of any depth in CSS.  The statement ignores inheritance issues, sever restriction on table element styling, and far less dynamic capabilities for table elements then any other group of elements in teh HTML tag set.

taz_zilla,

Very interest.  It is exactly those kind of layouts that we have to fix week after week,  because, it takes you down a path to impossible to maintain sites.  That is the kind of layout more suitable for some at the level of using Frontpage.

yunkaa,

I see an excellent link for w3schools is already posted and you also might want to look at:
http://www.alistapart.com/topics/css/
For any who want to see what can be done with just CSS for layout, try some of thae layout at zengarden... all the same page, but with different CSS:
http://www.csszengarden.com/

That is fine for pretty , but layout for practical applications is a different game; and of course we all know that the best way to manage form layout is with tables NOT!

For any who think tables are the way to go.  See my article and go right ahead and do the sample pages using tables:

http://cd-articles.fateback.com/Formsin4.html

Cd&
l
0
 
yunkaaAuthor Commented:
Hello CD!, taz_zilla, jmanGJHS97, Roonaan and minichicken,

Thanks so much everyone for taking the time to have a look at our question and responding!!  CD, we will definitely start on CSS, though it seems very daunting.  Any insights into its structure that could make it easier to learn -- things that if we keep in mind will make its structure make more sense as we learn it; make it easier to anticipate?  Also, please, if you have time, could you show us how to get the same effect through CSS for our little two table page we posted?

Many thanks x 1 x 10^6,

Yunkaa
0
 
yunkaaAuthor Commented:
Oh, one other thing.  In the lower table, can CSS set the width of columns, too?  We wanted the left column to be 130px, the right to be 615px.

Many thanks x 1 x 100^60,

Yunkaa
0
 
RoonaanCommented:
<table>
<colgroup>
  <col style="width:130px;" />
  <col /><!-- i am not sure whether there is actually a 2nd column. I thought there was, but you didn't mention it in your last comment -->
  <col style="width:615px;" />
</colgroup>
<thead>
 <tr>
   <th>Del</th>
   <th>Copy</th>
   <th>Remark</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>1.1</td>
  <td>1.2</td>
  <td>1.3</td>
</tr>
 <tr>
  <td>2.1</td>
  <td>2.2</td>
  <td>2.3</td>
</tr>
...
...
</table>

Regards

-r-
0
 
yunkaaAuthor Commented:
Hello  Roonaan,

Thanks for your message!  We tried the code you wrote.  It gave tables, but the widths seem to be not enacted.  I think we descibed the appearance poorly.  What we would like the tables to look like is:

|-----------------------TOP TABLE ---------------------------| 745px
|----left col.---130px---||--------right col.-----615px------|

Many thanks,

Yunkaa


0
 
taz_zillaCommented:

CD & Roonaan,

Using CSS is no doubt the best technology to use, but my design was indead a couple of years ago, and I had to create an extensively commented template in order to make it work for me.  It was a pain, but it worked exactly like what Yunkaa is trying to do.

I will bone up on CSS due to your comments, thanks all,
Mark
0
 
COBOLdinosaurCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
</head>
<body style="body:margin:0">
<div style="width:745px;">
<div style="width:130px;float:left;background-color:gold;">
left column
</div>
<div style="width:615px;float:left;background-color:silver">
right column
</div>
</div>
</body>
</html>

However that is not the way I would normally structure.  It is rigid that way.  I prefer to use pecentages and let things get re-rendered based on user settings.  That makes design more of a challenge because we need to let the data flow so the user has more control.

Anytime you are presenting data and you need the columns of a table to hold size you handle it with CSS by fixing the table layout:

<table style="width:745px;table-layout:fixed">
<tr>
<td style="width:130px">left column</td>
<td style="width:615px">right column</td>
</tr>
</table>

Here a page that has a lot of different approaches to lay out:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Cd&
0
 
yunkaaAuthor Commented:
Hello Roonaan, taz_zilla and CD!,

CD, how can we have a top table 745 px across the 130, 615 columns?  The top table will be for a banner.  

|-----------------------Top Banner Table---------------------------| 745px
|----for links--130px---||-----for content---right col.---615px---|


Also, really, have to say thank you.  Never knew online pages could be so light, and so elegant!!  It's a big incentive to learn more, for sure.  Before, we just had HTML.  Now, with CSS better for layout, does HTML assume any exclusive role?  How should we look at the jobs of the two languges?  CD, when you hear HTML, you think...what role?  Is HTML on the way out?  Do we need to learn it?

Many thanks x 1 x 10,000^600,

Yunkaa
0
 
yunkaaAuthor Commented:
CD, please can you look at this link you provided:

http://cd-articles.fateback.com/Formsin4.html

The link won't come up for us.  We would like to read these articles.

Many, many thanks,

Yunkaa
0
 
COBOLdinosaurCommented:
Here it is with a banner, with 11px of seperation.

As for HTML on the way out. No, it remains as the underlying structural component.  It's role has changed, ad will continue to change as XML becomes more important, but the basic mark still has to be there to hold every thing together.

I check the link and it is coming up alright.  It is sitting on a freeserver, so sometimes they are a little slow, but I have not had any reports that it is not available.  Are you getting an error page?

BTW, points for the Q still go to Roonaan who answer the original question.  I've sort of hijack it an taken it in a different direction, and points mean a lot less then seeing somwone start to see the benefits of modern approaches.

Cd&
0
 
yunkaaAuthor Commented:
Hello CD,

Is there any way to have a 12 px left margin inside the right column?

Many super millions of thanks,

Yunkaa :)
0
 
RoonaanCommented:
A 12px margin INSIDE would mean a 12px padding wouldn't it?

Then you just could have
<colgroup>
 <col ...leftcol...></col>
 <col style="padding-left:12px;"></col>
</colgroup>

Regards

-r-
0
 
COBOLdinosaurCommented:
You could just add padding-left:12px to the style on the right column but that will create a cross-broeser issue because of the way IE calculates the width.  So you just use a span to carry the style.

<div style="width:615px;float:left;background-color:silver;">
<span style="padding-left:12px">
right column
</span>
</div>


 Cd&
0
 
COBOLdinosaurCommented:
As I think about it, the style is probably better carried by a div, orhter wise you could run into ptoblems with multi-line content:

<div style="width:615px;float:left;background-color:silver;">
<div style="padding-left:12px">
right column
</div>
</div>

Cd&
0
 
Michel PlungjanIT ExpertCommented:
<flamebait>

<div style="width:615px;float:left;background-color:silver;">
<div style="padding-left:12px">
right column
</div>
</div>

Is SO much easier and simpler understand for everbody than

<table width="615" backgroundColor="silver">
<tr>
  <td width="12"><img src="spacer.gif"></td>
  <td>Right column</td>
</tr>
</table>

</flamebait>

I want to do CSS, I really do, but to see the amount of browser issues and workarounds and stuff makes me wanna puke.

I would even agree with you on the "the old browsers are dead" except the simple browsers are back on phones and pdas and they do not support css yet.
0
 
COBOLdinosaurCommented:
>>>but to see the amount of browser issues and workarounds and stuff makes me wanna puke.

The workarounds (mostly hacks actually)  are only necessary for 20th century developers who think layouts are supposed to be grids; that all browsers should look the same; that CSS means div; and who have never read:
http://www.w3.org/TR/WCAG20/

or anything related to accessibility.

As for browser issues they are almost non-existent between modern browsers if you use a HTML 4.01 doctype and code to the standards.  The differences are minor and manageable.

As for hand-helds... that is no different then trying to support Mac.  If they are part of the target you need different styling.  It is no different now than it was when we had issues in HTML and javascript between IE4 and NS4.  Until there is only one browser; there will be differences.

As far as I am concerned I write code to standard so it runs correctly in standards compliant browsers.  The I tweak it for major flaws in the relics like IE6.   Then I give my users all the stylign options they want.  In the end the users are interested in content, and if a page looks great or look ugly they won't even notice, as long as they find what they want and and it is in a usable format.  

I can change a the look and feel of an app in a couple of minutes, and I can give my user dozens of preference options, by using CSS to handle layout management and presentation. Time is money, and CSS saves me a tonne of time.

Cd&
0
 
COBOLdinosaurCommented:
The worst trend I see going on right now and I am going to start saying more when I see it is styled lists for menus.  That goes 100% against the accessibility guidelines and turns the list into something it is not supposed to be.  A lot of it seems to come out of the Jeff Zeldman school of design that assumes presentation is more important than content, and promotes easily broken layouts by using absolute positoning all over the place.

Cd&
0
 
Michel PlungjanIT ExpertCommented:
That is my problem too...
When someone tried to do absolute positioning on this site
http://ep.espacenet.com/
especially on the left menu and the tabs, they forgot that the site also needs to be in finnish and the long words mess up the presentation so the content OVERLAP

This overlapping made me abandon pure css for the time being.
I will revisit it in a few weeks and rewrite the pages if at all possible.

Help will be needed so prepare yourself oh CSS guru and advocate ;)
0
 
COBOLdinosaurCommented:
I let Sean do the hard questions.  I just look for points on easy questions. ;^)

Cd&
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 6
  • 3
  • +4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now