224 users online (0 members and 224 guests)  

> > > > Table layout without Tables

  Results 1 to 10 of 10

Related

  1. need help for table layout    Forum: HTML Forum
    Replies: 1
  2. TABLES- can any one help me stop the text streching the tables.    Forum: HTML Forum
    Replies: 2
  3. Need Help - Table / Template stretching out my layout!    Forum: HTML Forum
    Replies: 2
  4. How can you make a table border on only one side of the table?    Forum: HTML Forum
    Replies: 5
  5. Avoiding nested tables or grouping separate tables in chunks    Forum: HTML Forum
    Replies: 2
  1. 09-05-2006, 01:28 PM #1
    Richardf
    Richardf is offline
    Richardf's Avatar
    New User
    Status
    Offline
    Join Date
    Sep 2006
    Posts
    7

    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.
    Thanks
    Last edited by Richardf; 09-05-2006 at 01:46 PM.
    Reply With Quote Reply With Quote
  2. 09-05-2006, 01:35 PM #2
    DeadMeatGF
    DeadMeatGF is offline
    DeadMeatGF's Avatar
    Moderator
    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    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.
    Reply With Quote Reply With Quote
  3. 09-05-2006, 03:30 PM #3
    coothead
    coothead is offline
    coothead's Avatar
    bald 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>
    Reply With Quote Reply With Quote
  4. 10-30-2006, 04:12 AM #4
    Office Angel
    Office Angel is offline
    Office Angel's Avatar
    New User
    Status
    Offline
    Join Date
    Oct 2006
    Location
    USA
    Posts
    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.
    Reply With Quote Reply With Quote
  5. 11-06-2006, 05:30 PM #5
    Richardf
    Richardf is offline
    Richardf's Avatar
    New User
    Status
    Offline
    Join Date
    Sep 2006
    Posts
    7

    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
    Reply With Quote Reply With Quote
  6. 11-07-2006, 02:05 PM #6
    coothead
    coothead is offline
    coothead's Avatar
    bald 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>
    Reply With Quote Reply With Quote
  7. 11-13-2006, 03:30 AM #7
    Office Angel
    Office Angel is offline
    Office Angel's Avatar
    New User
    Status
    Offline
    Join Date
    Oct 2006
    Location
    USA
    Posts
    4

    Re: Table layout without Tables

    Quote Originally Posted by Richardf
    Hi there guys,
    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
    You could use percent figures in your absolute positioning style statements which should automatically adjust the layout to whatever screen size. For instance top:2%; rather than top:15px;
    Reply With Quote Reply With Quote
  8. 11-15-2006, 04:49 PM #8
    DeadMeatGF
    DeadMeatGF is offline
    DeadMeatGF's Avatar
    Moderator
    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: Table layout without Tables

    Quote Originally Posted by Office Angel
    You could use percent figures in your absolute positioning style statements which should automatically adjust the layout to whatever screen size. For instance top:2%; rather than top:15px;
    There's a few problems with percents, though - quite often if you don't add up to 100% it breaks the layout, on the other hand, if you do add up to 100% it spills over onto the next line.
    Reply With Quote Reply With Quote
  9. 11-27-2006, 01:04 AM #9
    mandar-seo
    mandar-seo is offline
    mandar-seo's Avatar
    New User
    Status
    Offline
    Join Date
    Jun 2006
    Location
    Pune, India
    Posts
    16

    Re: Table layout without Tables

    Can anybody tell me about the different positionings?

    With regards,
    Mandar Thsoar
    Reply With Quote Reply With Quote
  10. 12-04-2006, 07:47 PM #10
    Svoboda
    Svoboda is offline
    Svoboda's Avatar
    New User
    Status
    Offline
    Join Date
    May 2006
    Posts
    4

    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.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread