Solved

Tables Question

Posted on 2004-10-13
25
242 Views
Last Modified: 2010-04-09
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
Comment
Question by:yunkaa
  • 8
  • 6
  • 3
  • +4
25 Comments
 
LVL 12

Expert Comment

by:minichicken
ID: 12305464
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
 
LVL 49

Accepted Solution

by:
Roonaan earned 250 total points
ID: 12305803
<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
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 12310009
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
 
LVL 1

Expert Comment

by:taz_zilla
ID: 12310372
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 12313238
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
 

Author Comment

by:yunkaa
ID: 12317268
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
 

Author Comment

by:yunkaa
ID: 12317312
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 12317349
<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
 

Author Comment

by:yunkaa
ID: 12317697
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
 
LVL 1

Expert Comment

by:taz_zilla
ID: 12321360

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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12321468
<!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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:yunkaa
ID: 12321775
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
 

Author Comment

by:yunkaa
ID: 12321895
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12323545
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
 

Author Comment

by:yunkaa
ID: 12366114
Hello CD,

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

Many super millions of thanks,

Yunkaa :)
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12367101
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12369246
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12369295
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13471849
<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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13472088
>>>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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13472122
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13472237
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13472467
I let Sean do the hard questions.  I just look for points on easy questions. ;^)

Cd&
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Overlay image or texture over text and png files 5 54
How to represnt 52 selections 1 32
2 CSS questions 11 33
Help with HTML 7 39
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now