Build a table with CSS

Question

I'm trying, without success, to develop particular simple layout with CSS. I'd like to achieve something like this:

BookImage        BookImage        BookImage
BookTitle        BookTitle        BookTitle

Up to know I have this:

<div class="center">
<h2>Science</h2> 
  <div class="ThreeColumns">
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
  </div>

.threeColumns{
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */
    column-count: 3;
    }

The problem is that I'm not getting what I want. It is as if each tag (<img> or <p></p>) is seen as a "column". I'd like a way to group <img> and <p>, put them together and obtain my layout. I thought <div> could do it but I was wrong.

score 6 · Answer 1 · answered Jun 12 '13 at 18:48

6

When you're looking for a result like that, just use <table> with <tr>s and <td>s. You can style backgrounds, borders, etc. with CSS.

answered Jun 12 '13 at 18:48

Mooseman

18,763
14
70
93

Can you explain why on the web are so famous the "never use tables", "they are not the way to go", "use CSS instead" which inspired my decision??? – Luigi Tiburzi Jun 12 '13 at 19:14
Tables are meant for tabular data. It could be argued that the data you are attempting to display is tabular. Tables are NOT for laying a page out. – Lavie Tobey Jun 12 '13 at 19:18
Tables should only be used for presenting tabular data. Tabular data is basically a spreadsheet. (possibly related: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1). – cimmanon Jun 12 '13 at 19:19
2

@cimmanon A spreadsheet is one, specialised, case of a table. However tables can be used for many more purposes! There's no need to be afraid of tables. Tables are not aggressive. Tables are not evil. – Mr Lister Jun 12 '13 at 19:30
1

@MrLister No, tables have a single purpose: to present tabular data. Tables should never be used for layout. This is the OP's information presented as tabular data: http://cssdeck.com/labs/xdv3gbr7. This is the OP's information being presented in a table for layout purposes: http://cssdeck.com/labs/esagrefd. You can make the former *correct* usage of tables *look* like the later via CSS: http://cssdeck.com/labs/d6ndjio4 – cimmanon Jun 12 '13 at 19:42
Excuse my ignorance, could you explain me why in your third example you added a table head and a first field to each table entry but you don't display it. Of course I understand why you are not displaying them but don't why you add them, is just to have a reference in case of JS editing? Thanks – Luigi Tiburzi Jun 13 '13 at 06:00

score 4 · Answer 2 · answered Jun 12 '13 at 18:49

4

If you're truly building a table, why don't you utilize all the <table> tags. General rule of thumb someone told me on this site once before was that it's okay to use tables when the data is actually tabular but not for layouts. If you're data is tabular, which it appears that it is, why reinvent the wheel.

answered Jun 12 '13 at 18:49

War10ck

12,387
7
41
54

2

A long time ago, code monkeys all around the world used tables for layouts, which is why *"tableless design"* eventually became a thing. There was a general cry that you should *never use tables for styling* (which is the right way to go). But as human communication goes, a lot of people only got the *never use tables* part of the message. I think that's why I see so many people trying to do tables that are not... 's.
– Geeky Guy Jun 12 '13 at 18:52
1

That doesn't necessarily mean *this* is a table. – cimmanon Jun 12 '13 at 18:53
1

@Renan Agreed. I was actually taught that ``s were a bad thing. It was only on this site, that someone properly explained them to me and let me know that it's not `
`s that are bad, but the way they are abused for layouts purposes.
– War10ck Jun 12 '13 at 18:54
The only reference to table is in the question's title. The OP just wants the elements to appear in columns similar to tables. – cimmanon Jun 12 '13 at 18:57
Ok. I see what you're saying. It just seems that the `` tag would be appropriate. Why make a div layout that mimics a table with columns like a table? That almost seems like an improper method of coding to me...just my opinion though. :) The OP is free to do as they please. I just wanted to let them know like someone explained to me that tables are not completely evil.
– War10ck Jun 12 '13 at 19:00
1

The data sample *could* imply tabular data. If the elements should spill into additional rows, then tables would not be appropriate here: http://cssdeck.com/labs/o2eewrka – cimmanon Jun 12 '13 at 19:07
1

I love tables. Tables are very versatile. Tables are the Swiss army knife of HTML elements. Learn how to use them well and your work will be very rewarding. And if someone else tries to use a table, never automatically assume they want to use them for layout purposes only. – Mr Lister Jun 12 '13 at 19:25

score 1 · Answer 3 · answered Jun 12 '13 at 18:55

1

The key you're looking for is the break-inside property.

.ThreeColumns div {
    -webkit-column-break-inside: avoid; /* this is the old name */
    break-inside: avoid; /* this is the new name */
}

However, Firefox doesn't support this property at all, even though it does support most of the other columns properties.

answered Jun 12 '13 at 18:55

cimmanon

67,211
17
165
171

This property, in his case, can be forced by setting div as inline-block element, so they remain in one column. It's a work around or a trick if you like. – G-Cyrillus Jun 12 '13 at 19:03

score 0 · Answer 4 · answered Jun 12 '13 at 18:46

0

You'll also need display:table on your container div, and display:table-cell on your child div's.

answered Jun 12 '13 at 18:46

landons

9,502
3
33
46

score 0 · Answer 5 · edited Jun 12 '13 at 20:37

To avoid divs to spray from a column to another, set them as an inline-boxe/content.

<div class="center">
<h2>Science</h2> 
  <div class="ThreeColumns">
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
  </div>

.threeColumns{
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */
    column-count: 3;
    }
.threeColumns > div {
    display:inline-block;
    }

Build a table with CSS

5 Answers5