Thread: Table layout without Tables
Results 1 to 10 of 10
Related
-
need help for table layout Forum: HTML Forum
Replies: 1 -
TABLES- can any one help me stop the text streching the tables. Forum: HTML Forum
Replies: 2 -
Need Help - Table / Template stretching out my layout! Forum: HTML Forum
Replies: 2 -
How can you make a table border on only one side of the table? Forum: HTML Forum
Replies: 5 -
Avoiding nested tables or grouping separate tables in chunks Forum: HTML Forum
Replies: 2
-
09-05-2006, 01:28 PM #1
Table layout without Tables
Hi there,
I'd like to create a layout within the main column of a 3 column layout which has the same symmetry as a table, but not using the table tags.
I was looking for something like
( the dash line represents a horizontal rule or the top or bottom border of a div - whatever is easier and the names, ages, occupations and location should all line up neatly - hope that makes sense)
---------------------------------------------------------
John Smith 25 Engineer New York
---------------------------------------------------------
William Thomas 23 Nurse Los Angeles
---------------------------------------------------------
Sarah Giles 29 Doctor San Fran
---------------------------------------------------------
Catherine Fox 21 IT Support Texas
That kind of thing - was wondering what the easiest way to do it was. Had some ideas, but they all seem so long.
ThanksLast edited by Richardf; 09-05-2006 at 01:46 PM.
-
09-05-2006, 01:35 PM #2
Re: Table layout without Tables
Try this - and browse the site if it's not quite what you're after.
Also remember - if you need a table, use a table. If you're using tables to create a positional layout, you want to look for an alternative, but if you're using a table because it's tabular, then carry on.
-
09-05-2006, 03:30 PM #3bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: Table layout without Tables
Hi there Richardf,
and a warm welcome to these forums.
Have a look at this simple example...
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- #container { width:678px; margin:25px auto; border:1px solid #000; padding:2px; } .name { width:200px; line-height:50px; border:1px solid #000; padding-left:5px; float:left; } .age { width:50px; line-height:50px; border:1px solid #000; padding-left:5px; float:left; } .job { width:200px; line-height:50px; border:1px solid #000; padding-left:5px; float:left; } .home { width:200px; line-height:50px; border:1px solid #000; padding-left:5px; float:left; } #clear { clear:both; } --> </style> <script type="text/javascript"> <!-- //--> </script> </head> <body> <div id="container"> <div class="name">John Smith</div> <div class="age">25</div> <div class="job">Engineer</div> <div class="home">New York</div> <div class="name">William Thomas </div> <div class="age">23</div> <div class="job">Nurse</div> <div class="home">Los Angeles</div> <div class="name">Sarah Giles</div> <div class="age">29</div> <div class="job">Doctor</div> <div class="home">San Francico</div> <div class="name">Catherine Fox</div> <div class="age">21</div> <div class="job">IT Support</div> <div class="home">Texas</div> <div id="clear"></div> </div> </body> </html>
-
10-30-2006, 04:12 AM #4
Re: Table layout without Tables
My site has a 3 column layout without tables using absolute positioning of divisions.
There are many advantages to this such as improving your search engine ranking if done properly and your site can also be viewed in text browsers since they cannot display table data.
Borders can be used to divide the columns or rows.
You can view my web page at: http://OfficeAngel.Biz and then view one its css files at http://OfficeAngel.Biz/design2d.css for some ideas.Last edited by Office Angel; 10-30-2006 at 04:17 AM.
-
11-06-2006, 05:30 PM #5
Re: Table layout without Tables
Hi there guys,
Thanks for the response and advice and sorry about the delay.
DeadMeatGF, Thanks for the link - I will check it out. The reason I want to create it without tables, is because I understand that if you create it using tables, then its very difficult to adapt for other media, such as handhelds and mobiles/cells.
Coothead, thanks for the warm welcome. The method that you proposed does work, but occassionally the individual would have two jobs, and when you enter two occupations into the occupation column, it would break the design. Also specificying the height, created a fixed layout, which made it inaccessible.
Office Angel, absolute positioning would work, but I am trying to create my first accessible website. If I create it using absolute positioning, will fix the heights and make the site inaccessible.
Thanks
-
11-07-2006, 02:05 PM #6bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: Table layout without Tables
Hi there Richardf,
well, you never mentioned that these people are multi-talented and have more than one occupation.
Well you could, in that case, try it like this...
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- #container { width:678px; margin:25px auto; border:1px solid #000; padding:2px; } .name { width:195px; height:32px; line-height:32px; border:1px solid #000; padding:0 5px; float:left; overflow:auto; } .age { width:45px; height:32px; line-height:32px; border:1px solid #000; padding:0 5px; float:left; } .job { width:195px; height:32px; line-height:32px; border:1px solid #000; padding:0 5px; float:left; overflow:auto; } .home { width:195px; height:32px; line-height:32px; border:1px solid #000; padding:0 5px; float:left; overflow:auto; } #clear { clear:both; } --> </style> <script type="text/javascript"> <!-- //--> </script> </head> <body> <div id="container"> <div class="name">John Smith</div> <div class="age">25</div> <div class="job">Engineer <br />actor<br />postman<br />banker</div> <div class="home">New York</div> <div class="name">William Thomas </div> <div class="age">23</div> <div class="job">Nurse<br />public executioner<br />pencil sharpener<br />shepherd</div> <div class="home">Los Angeles</div> <div class="name">Sarah Giles</div> <div class="age">29</div> <div class="job">Doctor<br/>pole dancer<br />deep sea diver<br />crab extractor</div> <div class="home">San Francico</div> <div class="name">Catherine Fox</div> <div class="age">21</div> <div class="job">IT Support <br />doctor <br />engineer</div> <div class="home">Texas</div> <div id="clear"></div> </div> </body> </html>
-
11-13-2006, 03:30 AM #7
Re: Table layout without Tables
Originally Posted by Richardf
-
11-15-2006, 04:49 PM #8
Re: Table layout without Tables
Originally Posted by Office Angel
-
11-27-2006, 01:04 AM #9
Re: Table layout without Tables
Can anybody tell me about the different positionings?
With regards,
Mandar Thsoar
-
12-04-2006, 07:47 PM #10
Re: Table layout without Tables
I'd check out DynamicDrive.com. They have some very good CSS-based layouts including the 3 column layout you're looking for in both fixed and liquid flavors.
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum