CODEWITHSUNDEEP
htmlcsshtml-table
125369
125369

Reputation: 3657

Alternative for the following design using CSS

I have got a requirement where the outlook is as shown in the attached imageProject Outline Image

I have accomplished the task by making use of tables in HTML and styling using CSS.

The criteria is that the images in a row is almost the same (i.e the two images) and the content changes for every row. So the content is different on every row but the images remain the same for every row. Just for info there will be multiple number of rows. What would be the best practice to implement such as design other than using tables, where it should also be flexible to change the content. Or using tables is the best option.

Suggestions from the professionals are appreciated.

Upvotes: 0

Views: 133

Answers (4)

JorgeLuisBorges
JorgeLuisBorges

Reputation: 538

Like mez said - you need to think about repeating content - and learning about floats. I'd really advise working through this site

http://css.maxdesign.com.au/floatutorial/

it will teach you all the basics of designing with divs.

In the meantime - here's roughly what your're after. I've added background colours and made up all the heights and widths, as they weren't specifie, but it should get you started.

If you look at the html, I've annotated what is just a repeat of earlier content.

http://jsfiddle.net/zandergrin/k8EsP/3/

Upvotes: 0

Jordan Wallwork
Jordan Wallwork

Reputation: 3114

It is generally advisable to use pure css for things like this, rather than tables. Tables cause your page to render slower, as the content needs to be loaded before the rendering engine can correctly draw them.

Try something like this

Upvotes: 2

SpaceBeers
SpaceBeers

Reputation: 13947

I don't want to write it for you but I've made a quick mock up for you to have a look at - http://jsfiddle.net/spacebeers/TAJdw/

You don't want to use tables for anything other than tabular date anymore. You're much better off spending your time researching CSS.

Have a look at my example. It's what one instance of a content container could look like. What you want to do from there is look at getting two of them in a row. Build the CSS for the .container class, then copy another instance of .contentContainer in and see what results you get.

I'm happy to provide help if you want but it's always good to have a crack at it yourself. You'll get better answers on here and avoid unnecessary downvoting of your question.

Upvotes: 2

adamhuxtable
adamhuxtable

Reputation: 479

I would consider using a div with a background image style to it so that for each row with the same image all you will need to do is put that specific div class in. Then you can just position the outer div's to get it to look correctly, although tables are not the most efficient way of build web pages they still work.

Upvotes: 0

Related Questions