Replace tables with div?

**MK-2** · 22nd June 2011, 01:52 PM

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>

**LosOjos** · 22nd June 2011, 02:10 PM

Is there a particular reason you want to make a table out of div tags?

**MK-2** · 22nd June 2011, 02:13 PM

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

**pcstru** · 22nd June 2011, 02:16 PM

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.

**MK-2** · 22nd June 2011, 02:23 PM

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

**Mako** · 22nd June 2011, 02:31 PM

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.

**pcstru** · 22nd June 2011, 02:39 PM

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.

**MK-2** · 22nd June 2011, 02:59 PM

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

**Marci** · 22nd June 2011, 03:14 PM

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.

**pcstru** · 22nd June 2011, 04:23 PM

Originally Posted by Marci

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.

**MK-2** · 23rd June 2011, 10:03 AM

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

**thepineapplehead** · 24th June 2011, 05:33 PM

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?

**Arthur** · 25th June 2011, 05:33 PM

Is this the sort of thing you're looking to do?

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

or

**MK-2** · 8th July 2011, 11:35 AM

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 {
width: 90%;
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-top: 5px;
padding-bottom: 10px;
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

**sonofsanta** · 8th July 2011, 12:04 PM

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.

LinkBack

Thread Tools

Search Thread

Replace tables with div?

Thanks to Mako from:

Thanks to pcstru from:

Thanks to Marci from:

Thanks to sonofsanta from:

Similar Threads

DIV Games Studio / DIV Arena

Text not wrapping within a div

Interactive Tables

Append count() to Div/class

A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK

Thread Information

Users Browsing this Thread

Posting Permissions