Question

I am implementing search page in php.
I need to show the results like the following image

how can i achieve this kind of designing using css. I want it a fluid design using percentages with an addition i.e alternate row color changed.

Also let me know how can i limit a column to have not more than say 50 words. full detail will be available through a hyperlink on each row.

Answer 1

That’s a perfect situation to use a table.

Don’t just assume that “tableless design is better than design with tables”, tables are meant to be used with tabular data and your design clearly fits.

About even/odd row coloring, if you target the modern browsers, use the following rule:

table tr:nth-child(even) { background-color: #c0ffee; }
table tr:nth-child(odd) { background-color: #123456; }

If you target also the older browsers, you can use javascript for that, JQuery comes in handy:

$('table tr:even').css('background-color: #123456');

Or add the classes manually in your server-side code.

About the limitation of number of characters/words in the row, that’s usually done on server side. If you use a template engine like Smarty, then you’re likely to have a function for that, but that’s no big thing to roll up by yourself too.