Search code examples
htmlcsstabular

Can a table be styled like this? Or would something else be better?

Basically I am working on some practices since last week to start learning html and css, and I wanted to create a table of sorts to display items with the option to see more info and take/buy it. I was thinking in adding some background icons or image hence the strange looking table.

My question is. Can something like that be styled or would a normal table be better? To illustrate my point I did a mockup of sorts.

Oh! And as not to make another question just for that, can a dropdown list be made to have checkboxs without using jQuery? I'm afraid that is completely out of my reach with my current knowledge.

http://i59.tinypic.com/25z47dh.png

enter image description here

Thanks a lot in advance Best Wishes

Solution

  • You have a few options:

    You may use display: table and assign table 'rows' and 'columns' on div tags.

    Or

    You may use float: left which will line everything like a table and be more responsive.

    Or

    You may use display: inline-block which will behave a lot like the floats except you get a little bit more control on box height.

    There is no correct answer here but my preference is with inline-block since browser support tends to be superior than floats while keeping everything responsive.