+ Post New Thread
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
Web Development Thread, Replace tables with div? in Coding and Web Development; I'm trying to replace a tables layout with a div layout for a simple portal page to show icons and ...
  1. #1

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200

    Replace tables with div?

    I'm trying to replace a tables layout with a div layout for a simple portal page to show icons and text as links.

    the problem is i never really picked up <div> stuff so have never had to use it. how would i go about replicating this layout?
    basically it's 4 large tables in a row, 25% width each. inside each of those tables is a smaller table which has two cells, one for a header, one for an image. the idea is that the text sits above the image, but the larger cell containing the both has a border so it looks like one big clickable button.

    helpdesk.png was just used as a standard 64x64 image to see how it looked and the "outer" class just adds a border to it while testing

    HTML Code:
    <table width="70%" height="200" cellpadding="3" cellspacing="3" class="links" align="center">
    <tr>
    
    <td width="25%" class="outer">
    <table align="center">
    <tr>
    <th>Header</th>
    </tr>
    <tr>
    <td><img src="images/helpdesk.png"></td>
    </tr>
    </table>
    </td>
    
    <td width="25%" class="outer">
    <table align="center">
    <tr>
    <th>Header 1</th>
    </tr>
    <tr>
    <td><img src="images/helpdesk.png"></td>
    </tr>
    </table>
    </td>
    </td>
    
    <td width="25%" class="outer">
    <table align="center">
    <tr>
    <th>Header2 with a bit more text</th>
    </tr>
    <tr>
    <td><img src="images/helpdesk.png"></td>
    </tr>
    </table>
    </td>
    </td>
    
    <td width="25%" class="outer">
    <table align="center">
    <tr>
    <th>Header</th>
    </tr>
    <tr>
    <td><img src="images/helpdesk.png"></td>
    </tr>
    </table>
    </td>
    </td>
    	
    </tr>
    </table>

  2. #2

    LosOjos's Avatar
    Join Date
    Dec 2009
    Location
    West Midlands
    Posts
    5,578
    Thank Post
    1,473
    Thanked 1,227 Times in 835 Posts
    Rep Power
    753
    Is there a particular reason you want to make a table out of div tags?

  3. #3

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200
    mainly because the rest of the page its on has div tags and i wanted to keep in line with them if they could replicate what the table does.
    if a table is the best solution for this then i'll keep it to be honest

  4. #4


    Join Date
    May 2009
    Posts
    3,289
    Thank Post
    290
    Thanked 885 Times in 663 Posts
    Rep Power
    341
    You could do that with 4 div's , 5 divs or even 9 divs - depends what you want to do! I'd create a div to hold the whole section inside which would be four other div's floated to sit next to each other and sized to how you want them. Personally, I think the div vs table things is often misplaced evangelical type advocacy, table tags have their place, especially when you just want to hack something together quickly.

  5. #5

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200
    this is it, basically i want it to look like a tile menu. four tiles next to each other, each with a bit of text and a picture. but without using jscript or anything else, just basic html. the idea is in the future if we need more tiles, i can just copy and paste the code from the top row to add another row.
    so should i just stick with tables? the problem i had is that the text and the image sit right in the middle, and even with valign it wont move, so you have a big tile with everything bunched in the middle of it

  6. #6
    Mako's Avatar
    Join Date
    Apr 2009
    Location
    North Yorkshire
    Posts
    443
    Thank Post
    51
    Thanked 109 Times in 83 Posts
    Rep Power
    72
    This is what I came up with;

    HTML Code:
    <body style="text-align:center">
    <div style="height:200px; width:600px; margin:0px auto 0px auto;">
    	<div style="display:inline; float:left; padding:20px;">
    	<h4>Header</h4>
    	<img src="http://www.yoursite.com/images/helpdesk.png">
    	</div>
    	
    	<div style="display:inline; float:left; padding:20px">
    	<h4>Header 1</h4>
    	<img src="http://www.yoursite.com/images/helpdesk.png">
    	</div>
    
    	<div style="display:inline; float:left; padding:20px;">
    	<h4>Header 2 with a bit more text</h4>
    	<img src="http://www.yoursite.com/images/helpdesk.png">
    	</div>
    	
    	<div style="display:inline; float:left; padding:20px;">
    	<h4>Header</h4>
    	<img src="http://www.yoursite.com/images/helpdesk.png">
    	</div>
    
    </div>
    </body>
    I don't have your images so I don't know how big they are.

    By placing "text-align:center" on the body, each div has its image aligned centrally beneath the text. You can fiddle with the individual stylings of each, however if they're all going to be the same, just specify the styles in a .css file and assign them a class.
    The padding gives a nice spacing between each div. Display inline and float left places them in a row.

    I've set a fixed width to the container div, as this helps with using floating divs. Play around with the settings to get the desired result.

    Tables are negated.

    Without knowing exactly what it is you're after, that's the result I got based on your code. The body tags are there for effect only, and to show where to place the text-align style. Don't put that in the midst of your page, else you'll have two sets of <body> tags.

    Let me know if that helps.
    Last edited by Mako; 22nd June 2011 at 02:35 PM.

  7. Thanks to Mako from:

    MK-2 (22nd June 2011)

  8. #7


    Join Date
    May 2009
    Posts
    3,289
    Thank Post
    290
    Thanked 885 Times in 663 Posts
    Rep Power
    341
    If you want just html you might as well stick to tables. You will need some CSS (even if you do it inline) to achieve the same with <div> or at least you will if you want compatibility and make the html manageable!

    To stack up divs next to each other you use the float property. Have a look at This tutorial and also have a gander at the CSS box model.

  9. Thanks to pcstru from:

    MK-2 (22nd June 2011)

  10. #8

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200
    thanks for the help and advice guys. i think as this is a low impact site, i'll stick with the tables rather than creating more work for myself! but ill keep in mind the div layouts for any other pages.
    cheers

  11. #9
    Marci's Avatar
    Join Date
    Jun 2008
    Location
    Wakefield, West Yorkshire
    Posts
    896
    Thank Post
    84
    Thanked 235 Times in 194 Posts
    Rep Power
    82
    What Mako posted is correct... just compare the AMOUNT of code he posted to do the job vs the amount used to do it with tables...

    Mako's code could be reduced further by defining styles in the head rather than inline as there wouldn't be a need to reproduce the formatting for each div, just call them by class.

    So you'd put the following inbetween your <head></head> tags:
    Code:
    <style type="text/css">
    .container {
    width: 768px;
    margin-left:auto;
    margin-right:auto;
    }
    
    .box {
    width:180px;
    text-align:center;
    float:left;
    margin-left:10px;
    margin-bottom:10px;
    border:#000 1px solid;
    }
    </style>
    and this in the page body...

    Code:
    <div class="container">
    <div class="box"><h4>Header1</h4><img src="img1.jpg" alt="img1" /></div>
    <div class="box"><h4>Header2</h4><img src="img2.jpg" alt="img2" /></div>
    <div class="box"><h4>Header3</h4><img src="img3.jpg" alt="img3" /></div>
    <div class="box"><h4>Header4</h4><img src="img4.jpg" alt="img4" /></div>
    </div>
    Now, if at a later date you want to add more tiles, just add another <div class="box"> *snip* </div> per tile. Above is for 4 tiles in a row. Below will produce 2 rows of 4.

    Code:
    <div class="container">
    <div class="box"><h4>Header1</h4><img src="img1.jpg" alt="img1" /></div>
    <div class="box"><h4>Header2</h4><img src="img2.jpg" alt="img2" /></div>
    <div class="box"><h4>Header3</h4><img src="img3.jpg" alt="img3" /></div>
    <div class="box"><h4>Header4</h4><img src="img4.jpg" alt="img4" /></div>
    <div class="box"><h4>Header5</h4><img src="img5.jpg" alt="img5" /></div>
    <div class="box"><h4>Header6</h4><img src="img6.jpg" alt="img6" /></div>
    <div class="box"><h4>Header7</h4><img src="img7.jpg" alt="img7" /></div>
    <div class="box"><h4>Header8</h4><img src="img8.jpg" alt="img8" /></div>
    </div>
    Have a look at http://www.hotdesign.com/seybold/everything.html

    The point of CSS & semantically correct coding is that it massively reduces bandwidth, increases page load times, degrades gracefully for other devices, and is far more accessible to those who may use screen readers etc. Tables should only be used to represent tabular data basically, not for layout and styling.

    That said, the code that you use should fall in line with whatever code is compliant for the DOCTYPE statement at the top of your file... otherwise it'll fail validation.
    Last edited by Marci; 22nd June 2011 at 03:42 PM.

  12. Thanks to Marci from:

    RabbieBurns (23rd June 2011)

  13. #10


    Join Date
    May 2009
    Posts
    3,289
    Thank Post
    290
    Thanked 885 Times in 663 Posts
    Rep Power
    341
    Quote Originally Posted by Marci View Post
    What Mako posted is correct... just compare the AMOUNT of code he posted to do the job vs the amount used to do it with tables...

    Mako's code could be reduced further by defining styles in the head rather than inline as there wouldn't be a need to reproduce the formatting for each div, just call them by class.
    That's a bit unfair. The original table code could be reduced substantially (to one table with one row and four cells) and styling with css can be applied equally well to tables.
    Have a look at Why tables for layout is stupid: problems defined, solutions offered: Everything on one page)

    The point of CSS & semantically correct coding is that it massively reduces bandwidth, increases page load times, degrades gracefully for other devices, and is far more accessible to those who may use screen readers etc. Tables should only be used to represent tabular data basically, not for layout and styling.
    I'd agree with most of that in principle but for trivial pages in limited environments, tables are reasonably efficient in terms of bandwidth, may never be intended for mobile devices and the most expensive resource is actually the coders time and those who come after to maintain it. Personally I find it takes me much longer to achieve results using div styled with css than it does to use a table and there are lot's of things that will trip you up. I'm not a highly skilled web developer but I'm not a novice either. If it takes me longer, it will eat up other staffs time too.

  14. #11

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200
    thanks to everyone. this is basically going to be one page that displays a tiled menu of links to our internal resources. so its never going to be under heavy load and will forward on to more content immediately, there is no need to stick on the page longer than 10 secs.
    if it were for a bigger public facing page obviously i'd research more into what was the best way

  15. #12

    Join Date
    Jun 2010
    Location
    Milton Keynes
    Posts
    144
    Thank Post
    0
    Thanked 17 Times in 13 Posts
    Rep Power
    10
    If you're interested, I can post the code I used for my homepage at my last job - it did exactly what you want and was marked up as a single list - if I remember correctly,it used zero divs.

    I'm a bit fanatical about css and not using fifty million divs for everything - for example, why on earth bother with a wrapper (or container) div when you could just style the body element?

  16. #13


    Join Date
    Feb 2007
    Location
    51.403651, -0.515458
    Posts
    9,416
    Thank Post
    243
    Thanked 2,825 Times in 2,084 Posts
    Rep Power
    814
    Is this the sort of thing you're looking to do?

    http://www.sohtanaka.com/web-design/...-w-css-jquery/



    or

    Last edited by Arthur; 25th June 2011 at 05:44 PM.

  17. #14

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    200
    sorry to resurrect an old thread. i've just got around to redoing a few of the intranet bits so decided to go with div for now.
    the problem i'm having is this:

    i've used the code @Marci said, altered it slightly to fit my needs, but when I put them on the page, they align from the left. I know somewhere i read you can use margin-left/right: auto to make it centered but the problem is i need the left and right margins set to give it a space between images.
    is there any other way of centering the icons at all? i've put the code below:

    CSS
    PHP Code:
    .staff-container {
    width90%;
    margin-left:auto;
    margin-right:auto;
    }

    .
    staff-box {
    width:20%;
    text-align:center;
    float:left;
    margin-left:5px;
    margin-right:5px;
    background: [URL=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=e2ebe8]#e2ebe8[/URL]
    padding-top5px;
    padding-bottom10px;
    border:#000 1px solid;

    HTML
    HTML Code:
    <div class="staff-container">
    
    <div class="staff-box"><h4>Online Booking</h4><img src="http://www.edugeek.net/images/bookingsystem.png"></div>
    <div class="staff-box"><h4>Online Helpdesk</h4><img src="http://www.edugeek.net/images/helpdesk.png"></div>
    
    </div>
    so the staff-container div is centred fine, but the staff-box divs align from the left and stack up next to each other, where i'd like them to stack up from the centre and fill out from there
    Last edited by MK-2; 8th July 2011 at 11:41 AM. Reason: clarification

  18. #15

    sonofsanta's Avatar
    Join Date
    Dec 2009
    Location
    Lincolnshire, UK
    Posts
    5,137
    Thank Post
    917
    Thanked 1,524 Times in 1,037 Posts
    Blog Entries
    47
    Rep Power
    655
    Got it.

    Instead of using float: left; on the divs, use display: inline-block;

    Then in the container CSS, add text-align: center; and it should do the trick for you.

    Explanation if you like, but experimentation shows it working additional cells go onto the line below automatically and centered, although you may want to use vertical margins to separate them.

  19. Thanks to sonofsanta from:

    MK-2 (8th July 2011)

SHARE:
+ Post New Thread
Page 1 of 2 12 LastLast

Similar Threads

  1. DIV Games Studio / DIV Arena
    By LosOjos in forum General Chat
    Replies: 4
    Last Post: 9th February 2012, 12:26 PM
  2. Text not wrapping within a div
    By FatBoy in forum Web Development
    Replies: 4
    Last Post: 7th April 2010, 02:44 PM
  3. Interactive Tables
    By loopylala in forum Hardware
    Replies: 2
    Last Post: 8th October 2009, 05:18 PM
  4. Append count() to Div/class
    By danIT in forum Web Development
    Replies: 3
    Last Post: 1st September 2008, 04:52 PM
  5. Replies: 2
    Last Post: 1st February 2008, 10:24 AM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •