Grow your CSS skills. Land your dream job.

Completely custom table style?

  • # June 17, 2013 at 3:42 pm

    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 :)

    # June 18, 2013 at 6:01 am

    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.

    # June 18, 2013 at 9:50 am

    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.

    # June 18, 2013 at 12:21 pm

    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 :)

    # June 18, 2013 at 12:26 pm

    >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.

    # June 18, 2013 at 4:53 pm

    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.

    # June 26, 2013 at 5:14 pm

    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!

    # June 26, 2013 at 5:15 pm

    > 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.

    # June 27, 2013 at 12:25 am

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

    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?

    # June 27, 2013 at 1:09 am

    >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

    # June 27, 2013 at 2:58 am

    @Paulie_D

    I was referring to a grid like this

    http://codepen.io/Krish1980/pen/ckJhK

    I haven’t seen masonry do that. The grid that Pinterest, for instance, has is not quite the same.

    # June 27, 2013 at 4:37 am

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

    Floated Divs would be fine for that.

    # June 28, 2013 at 12:53 am

    Thank you very much, the comments are much appreciated!

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".