Replace tables with div?

[MK-2]

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

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

 

</pre><table width="70%" height="200" cellpadding="3" cellspacing="3" class="links" align="center">





Header


images/helpdesk.png







Header 1


images/helpdesk.png








Header2 with a bit more text


images/helpdesk.png








Header


images/helpdesk.png






</

[LosOjos]

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

[MK-2]

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]

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]

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]

This is what I came up with;

 

Header
http://www.yoursite.com/images/helpdesk.png



Header 1
http://www.yoursite.com/images/helpdesk.png



Header 2 with a bit more text
http://www.yoursite.com/images/helpdesk.png



Header
http://www.yoursite.com/images/helpdesk.png

 

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

tags.

 

Let me know if that helps.

Edited June 22, 2011 by Mako

[pcstru]

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

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]

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]

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

tags:

<br />
.container {<br />
width: 768px;<br />
margin-left:auto;<br />
margin-right:auto;<br />
}<br />
<br />
.box {<br />
width:180px;<br />
text-align:center;<br />
float:left;<br />
margin-left:10px;<br />
margin-bottom:10px;<br />
border:#000 1px solid;<br />
}<br />

 

and this in the page body...

 

Header1img1.jpg
Header2img2.jpg
Header3img3.jpg
Header4img4.jpg

 

Now, if at a later date you want to add more tiles, just add another

*snip*

per tile. Above is for 4 tiles in a row. Below will produce 2 rows of 4.

 

Header1img1.jpg
Header2img2.jpg
Header3img3.jpg
Header4img4.jpg
Header5img5.jpg
Header6img6.jpg
Header7img7.jpg
Header8img8.jpg

 

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.

Edited June 22, 2011 by Marci

[pcstru]

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]

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]

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]

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

 

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

 

http://i.imgur.com/npwHL.png

 

or

 

http://i.imgur.com/3iA1l.jpg

Edited June 25, 2011 by Arthur

[MK-2]

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

.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

Online Booking
Online Helpdesk

 

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

Edited July 8, 2011 by MK-2
clarification

[sonofsanta]

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.

[MK-2]

bugger, i had tried inline:block but think i forgot to take out float:left. cheers for that dude, massive help