Completely custom table style?

[miturian]

Hello, my friend and I are both pretty inexperienced with web design, and as we enjoy learning-by-doing, we have designed a small project for ourselves wherein we wish to design a bookshelf with a varying number of displayed books (think ios newsstand kind of layout).

However, we are rather unsatisfied with the table stylings available (pretty much anything which comes up at a google-search of “custom table css”). We were thinking that one way to get what we want would be if we were able to overlay images on top of the “table graphics” – meaning column and row dividers. We would also like to make the whole thing interactive, such that a hover over one book would enlarge it.

Is this possible, and are we attacking the problem in the right way? Is CSS the right way to be thinking about this, or should we be looking into some other web-related technology? As the the size of the table should depend on the content, we were thinking that the html-code would be generated with some javascript once the number of books was known.

Constructive criticism will be much pondered :)

[Paulie_D]

Is there a reason why you are using a table?

I’m not saying it’s actually wrong in this situation (as I understand it) but there are, perhaps better layout options with simpler methods.

[givingbacksmiles]

I agree with Paulie_D. I think using a table might not be as rewarding as creating your own layout. I think as he said it would simplify things in the long run.

[miturian]

There is no particular reason why we would prefer tables, only that it seemed sensible, as the layout we are considering is tablesque. What is the alternative? Lots of div’s? Do you know of any examples, here or somewhere else, where we might see how to build a layout like this from the bottom?

Thanks in advance :)

[Paulie_D]

>What is the alternative? Lots of div’s?

Yes….but with a table you have lots of cells so it’s as pretty much the same.

However with divs you have much more flexibility in terms of layouts, Css targeting and browser size behaviours with Media Queries etc.

If you have design mock-up it would enable us to help you a lot more if you cold let us have a look.

[miturian]

The “lots of divs” was meant completely non-sarcastically. I’m sorry if it came across differently. A mock-up of the layout can be seen here: http://www.kaarebmikkelsen.dk/example.

[miturian]

So.., is it possible that someone could take a look at our mock-up and comment? What is the proper way of getting this kind of layout?

thank you in advance!

[Kitty Giraudel]

> However with divs you have much more flexibility in terms of layouts,

True. You can make div’s behave like tables and table-cells. Opposite is not true.

[Paulie_D]

>What if you want a grid-like structure with flexible heights, where the whole structure functions like a grid regardless of the amount of content in each cell/sub-div/li?

Masonry.js

[Paulie_D]

Getting back to the example provided (http://www.kaarebmikkelsen.dk/example/)

Floated Divs would be fine for that.

[miturian]

Thank you very much, the comments are much appreciated!

[Author]

Posts