View Full Version : Display tag

03-01-2005, 11:20 AM

I am converting my site to css layout rather than using tables. Everything so far is going very nicely, thanks to all the trhreads and FAQs I have read in this forum and the links out.

My current question is this: how do you use css to imitate a table containing 4 rows, each row containg 5 cells? The current table is used to display small images in a grid.

I notice that the css style "display" has many table elements - should I use those? If so, can anyone give me an example?

Thank you!


03-01-2005, 11:34 AM
The various table display values would be very useful in some cases, if it weren't for the most ubiqitous browser -IE- not supporting them, which sadly limits their usefulness.

An alternative approach for your table would be to float all the images; if they all have the same dimensions, or one of a limited set of known dimensions, margins could be used to make them take up all the same space.
Suppose you float them all left, they will line up next to eachother until horizontal space runs out; the next image will line up to the left on the next "row", and so on.

If you can give some more info on the image sizes, or a link to the current page, I can give you an example of the CSS and markup involved.

03-01-2005, 11:38 AM
It depends on what the content is.

Remember, the purpose of CSS instead of tables is so that the HTML properly marks up the content within. What are the images that are in a grid? If it's a table of some sort to begin with, then use a table.

If it's a list of images, such as an image gallery, for example, you could do something like this: http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

To help you out a little more we'll need to know a little more about what the info-- and not just the design-- is.

Whoops... beat me to it :D

03-01-2005, 12:46 PM
Thanks guys.

Okay, (gulp), here's the urls:

http://www.webdesign4schools.co.uk/navigation.html (current site)
http://www.test.webdesign4schools.co.uk/navigation.html (css version under development)


http://www.webdesign4schools.co.uk/backgrounds.html (current site)
http://www.test.webdesign4schools.co.uk/backgrounds.html (css version under development)

The first page's table is to give examples of Flash buttons, which are different sizes. The second page's table is to show background images.

I got into web design as a teacher when I was asked to do my school's website. I then did a site for my husband's school and then my son's. Things have sort of gone from there.

Edited to add: the link to the float tutorial looks excellent - I'm experimenting now!

03-01-2005, 01:16 PM
Wow. Thats a nice site!


03-01-2005, 01:17 PM
Hmmmmm... I'm tempted to say: "leave it as is", but tables aren't really the best solution in the semantic sense of the way; I think an unordered list would do nicely here, which gives you a nice set of container elements to style, and a container around them at the same time.

I would certainly advice to get rid of the inline styles, especially in the second example; things like width, margins and repeat settings can be covered in one single style rule; all the background images though would have to be set individually, which can be accomplished via ids. This doesn't seem a whole lot more efficient, but it does respect the seperation concept.

Start with whipping up an unordered list and see if you can work out the style rules; if you run into a snag, we'll glad to help you along.

03-01-2005, 01:19 PM
Thank you Dan - I really appreciate that! I feel so inferior compared to the true "professionals" and very shy/embarrased to expose my work when everyone else is so good at what they do.

Well, I think I'm getting there - still very untidy, but getting there...


03-01-2005, 01:22 PM
Ronald, I think we both clicked "submit" at the same time! Okay, I'll try a list style approach and see what happens. Thanks.

03-01-2005, 01:30 PM
By the way: that site does look pretty good. We'll have you on the rack for the coding some more :p , but the visual design and layout is really promising.

03-01-2005, 01:40 PM
Thank you! I love improving my skills and having new challenges with coding - gives me focus! I've finished tidying up http://www.test.webdesign4schools.co.uk/navigation2.html and it looks okay I think. It would be nice to actually get the pseudo-table in the centre of the page now, so I'm going to have another browse through all these threads to see if I can find how to do this.

Edited to add: the backgrounds page is done now and seems to works well. I will experiment with unordered list approach too to see which works best. I put a container around the "tables" and used
.container {
width: 700px;
left: 50%;
margin-left: -350px;
position: relative;
to try and centre the "tables". I only have an old monitor set at 800x600 - does the layout work in higher resolutions with the container style?