Programming Forums > Web Development and Design > HTML / XHTML / CSS

dmorales · Apr 5th, 2005, 1:13 PM

I have read you shouldn't use tables for layout with css, but I was wondering why when it seems like tables would be a great way to layout a page?

I haven't done too much with css, but it seems like tables would work fine. I can see how it might be easier to edit certain things for a site with multiple pages, but is there another reason their not used?

dayglowdave · Apr 5th, 2005, 1:46 PM

I do and this is how:

(Toggle Plain Text)

< style type="text/css" >

      #tab1     {

                    position: absolute;
                    top: 50px;           
                    left: 50px;
                    z-index: 0;

             }

< /style >

The position: absolute; forces the palcement.

Top: ; is how far you want it from the top (remember that coordinates (0,0) is the upper-left hand corner.

Left: ; is how far you want it from the left.

z-index: ; is the LAYER that you want it at. for instance you could ave to tables, images, textareas or whatever over lapping and which ever has the higher z-index will be on top.

Anyway on to the second half. On your table you will do something like this:

(Toggle Plain Text)

< table width="" height="" style="border: 1px dotted #000000;" id="tab1" >

     <tr>
            <td>

            </td>
     </tr>

</table>

where it says, 'id' in the table declaration is where you put the name of the positioned element which is tab1.

Hope that helps.

Infinite Recursion · Apr 5th, 2005, 2:09 PM

I also use CSS within my HTML tables for my navigation menu at my page below... works fine. To my knowledge, there is no technical reason not to use them.

dmorales · Apr 5th, 2005, 2:52 PM

so would you use it to layout a page like this:

11111111111111111
11111111111111111
22220000000000000
22220000000000000
22220000000000000
22220000000000000
22220000000000000
22220000000000000

I see it as one large table. Is that right? or do I use css postitioning elements?

My book explains by telling you that each element can be thought of in it's own box, with margins and padding. Thenyou can postion those boxes according to your page layout; however, it seems to me it would be more orderly to use one giant table and then postition everything else accordingly in each cell.

Infinite Recursion · Apr 5th, 2005, 3:05 PM

If you want your layout to look like that... just use a table.
You can use the styles in your CSS code within the elements of the tables, like the cells, hyperlinks, etc...

dayglowdave · Apr 5th, 2005, 3:29 PM

copy this and paste it into a new document and view it as a webpage:

(Toggle Plain Text)

<html>

<head><title>CSS EXAMPLE</title>
<style type="text/css">

      #tab1     {

                    position: absolute;
                    top: 0px;           
                    left: 0px;
                    z-index: 0;

             }

      #tab2    {

                    position: absolute;
                    top: 150px;           
                    left: 0px;
                    z-index: 0;

             }

      #tab3     {

                    position: absolute;
                    top: 150px;           
                    left: 200px;
                    z-index: 0;

             }

</style>

</head>

<body>


<table width="800" height="150" style="border: 1px solid #000000;" id="tab1">
<tr>
</tr>
</table>

<table width="200" height="350" style="border: 1px solid #000000;" id="tab2">
<tr>
</tr>
</table>

<table width="600" height="350" style="border: 1px solid #000000;" id="tab3">
<tr>
</tr>
</table>

</body>

</html>

It'll give you an idea

dmorales · Apr 5th, 2005, 4:24 PM

Thanks, I just wanted to make sure I wasn't teaching my self the improper way of doing it. I figure it would be a lot better than having to go back and fix something because it was not functional.

dayglowdave · Apr 5th, 2005, 4:36 PM

Cerulean · Apr 6th, 2005, 3:14 PM

Quote:

If you want your layout to look like that... just use a table.

No no no. Stop using tables for page layouts.
Tables were designed for displaying tabular data. A couple of people looked at tables and thought "hey! If I get rid of the border I can lay out my webpage using these things", and so nested tables were born - those ugly, clunky things. For more information on why table-based layouts are bad, use your favourite search engine and get reading.
That's a simple layout CSS-wise - just a div for the header, a div for the body, and in the body you have the left bar and the main content bar. Google for "2 column CSS layout" and browse through the thousands of hits you get.

Jonnno · Apr 6th, 2005, 3:43 PM

I have to agree entirely that tables are not for page layout. Yes they are easy to hack, but they make a mess of your html and confuse webcrawlers like googlebots. Also using CSS to format your layout and so on makes it so much easier to change in the future to maintain it and also when used properly, in a seperate CSS file, can lead to less code in your page and faster download times. It is just part of the drive to separate content from formatting.

Learn CSS. It's not that hard really.

Apr 5th, 2005, 1:13 PM	#1
dmorales Programmer Join Date: Feb 2005 Posts: 74 Rep Power: 4	Using tables with css I have read you shouldn't use tables for layout with css, but I was wondering why when it seems like tables would be a great way to layout a page? I haven't done too much with css, but it seems like tables would work fine. I can see how it might be easier to edit certain things for a site with multiple pages, but is there another reason their not used?

Apr 5th, 2005, 1:46 PM	#2
dayglowdave Newbie Join Date: Apr 2005 Location: Kansas Posts: 22 Rep Power: 0	I do and this is how: (Toggle Plain Text) < style type="text/css" > #tab1 { position: absolute; top: 50px; left: 50px; z-index: 0; } < /style > < style type="text/css" > #tab1 { position: absolute; top: 50px; left: 50px; z-index: 0; } < /style > The position: absolute; forces the palcement. Top: ; is how far you want it from the top (remember that coordinates (0,0) is the upper-left hand corner. Left: ; is how far you want it from the left. z-index: ; is the LAYER that you want it at. for instance you could ave to tables, images, textareas or whatever over lapping and which ever has the higher z-index will be on top. Anyway on to the second half. On your table you will do something like this: (Toggle Plain Text) < table width="" height="" style="border: 1px dotted #000000;" id="tab1" > <tr> <td> </td> </tr> </table> < table width="" height="" style="border: 1px dotted #000000;" id="tab1" > <tr> <td> </td> </tr> </table> where it says, 'id' in the table declaration is where you put the name of the positioned element which is tab1. Hope that helps.

Apr 5th, 2005, 2:09 PM	#3
Infinite Recursion Programming Guru Join Date: Jul 2004 Location: United States Posts: 3,467 Rep Power: 8	I also use CSS within my HTML tables for my navigation menu at my page below... works fine. To my knowledge, there is no technical reason not to use them. __________________ http://jasonpowers.net "There are a thousand hacking at the branches of evil to one who is striking at the root."

Apr 5th, 2005, 3:05 PM	#5
Infinite Recursion Programming Guru Join Date: Jul 2004 Location: United States Posts: 3,467 Rep Power: 8	If you want your layout to look like that... just use a table. You can use the styles in your CSS code within the elements of the tables, like the cells, hyperlinks, etc... __________________ http://jasonpowers.net "There are a thousand hacking at the branches of evil to one who is striking at the root."

Apr 5th, 2005, 3:29 PM	#6
dayglowdave Newbie Join Date: Apr 2005 Location: Kansas Posts: 22 Rep Power: 0	copy this and paste it into a new document and view it as a webpage: (Toggle Plain Text) <html> <head><title>CSS EXAMPLE</title> <style type="text/css"> #tab1 { position: absolute; top: 0px; left: 0px; z-index: 0; } #tab2 { position: absolute; top: 150px; left: 0px; z-index: 0; } #tab3 { position: absolute; top: 150px; left: 200px; z-index: 0; } </style> </head> <body> <table width="800" height="150" style="border: 1px solid #000000;" id="tab1"> <tr> </tr> </table> <table width="200" height="350" style="border: 1px solid #000000;" id="tab2"> <tr> </tr> </table> <table width="600" height="350" style="border: 1px solid #000000;" id="tab3"> <tr> </tr> </table> </body> </html> <html> <head><title>CSS EXAMPLE</title> <style type="text/css"> #tab1 { position: absolute; top: 0px; left: 0px; z-index: 0; } #tab2 { position: absolute; top: 150px; left: 0px; z-index: 0; } #tab3 { position: absolute; top: 150px; left: 200px; z-index: 0; } </style> </head> <body> <table width="800" height="150" style="border: 1px solid #000000;" id="tab1"> <tr> </tr> </table> <table width="200" height="350" style="border: 1px solid #000000;" id="tab2"> <tr> </tr> </table> <table width="600" height="350" style="border: 1px solid #000000;" id="tab3"> <tr> </tr> </table> </body> </html> It'll give you an idea

Apr 5th, 2005, 2:52 PM	#4
dmorales Programmer Join Date: Feb 2005 Posts: 74 Rep Power: 4	so would you use it to layout a page like this: 11111111111111111 11111111111111111 22220000000000000 22220000000000000 22220000000000000 22220000000000000 22220000000000000 22220000000000000 I see it as one large table. Is that right? or do I use css postitioning elements? My book explains by telling you that each element can be thought of in it's own box, with margins and padding. Thenyou can postion those boxes according to your page layout; however, it seems to me it would be more orderly to use one giant table and then postition everything else accordingly in each cell.

Apr 5th, 2005, 4:24 PM	#7
dmorales Programmer Join Date: Feb 2005 Posts: 74 Rep Power: 4	Thanks, I just wanted to make sure I wasn't teaching my self the improper way of doing it. I figure it would be a lot better than having to go back and fix something because it was not functional.

Apr 5th, 2005, 4:36 PM	#8
dayglowdave Newbie Join Date: Apr 2005 Location: Kansas Posts: 22 Rep Power: 0	yup

Apr 6th, 2005, 3:43 PM	#10
Jonnno Newbie Join Date: Mar 2005 Posts: 13 Rep Power: 0	I have to agree entirely that tables are not for page layout. Yes they are easy to hack, but they make a mess of your html and confuse webcrawlers like googlebots. Also using CSS to format your layout and so on makes it so much easier to change in the future to maintain it and also when used properly, in a seperate CSS file, can lead to less code in your page and faster download times. It is just part of the drive to separate content from formatting. Learn CSS. It's not that hard really.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > HTML / XHTML / CSS

Using tables with css