1 reply [Last post]
Atoon's picture
Last seen: 10 years 3 weeks ago
Timezone: GMT-4
Joined: 2006-09-20
Posts: 10
Points: 2

Do you know if in CSS3 or something will be the possibility to treat a random number of elements as if they were surrounded by another tag, in order to emulate tables? I believe that it should help a lot to abandon the usage of tables in layout.

For example, in this snippet (HTML5):

<li><figure><img src="thumb1.jpg" alt=""><figcaption>Caption 1</figcaption></figure></li>
<li><figure><img src="thumb2.jpg" alt=""><figcaption>Caption 2</figcaption></figure></li>
<li><figure><img src="thumb3.jpg" alt=""><figcaption>Longer caption 3</figcaption></figure></li>
<li><figure><img src="thumb4.jpg" alt=""><figcaption>Caption 4</figcaption></figure></li>
<li><figure><img src="thumb5.jpg" alt=""><figcaption>caption 5</figcaption></figure></li>
<li><figure><img src="thumb6.jpg" alt=""><figcaption>Caption 6</figcaption></figure></li>
<li><figure><img src="thumb7.jpg" alt=""><figcaption>Caption 7</figcaption></figure></li>

The most common way to style it to look like a table is with floating elements of a fixed width and height. Some details can be adjusted with pseudo-selectors.

The problem is that since there's no tag that makes the role of a "row", it carries some limitations, like allowing to have the height of a whole row expanded if one li has a longer caption or something. Similar to some problems when I want to style definition lists. Most of the time these are solved by not using lists properly and surrounding everything with lots of divs and lists with a single element, which I feel a bit awkward.

Hugo's picture
Last seen: 5 years 26 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

I would stop thinking in

I would stop thinking in analogous terms of a 'Table' it usually implies a mis-conception of what one is doing, and why on earth would we want to abandon tables? We don't! Tables misused as layout structure died a long time ago, most know now how to code layouts correctly and this isn't an issue that has any regarde to HTML5 or CSS3 necessarily.

You describe a list, style that list to resemble a list however you imagine that list should visually render, if the content or data is tabular then use a table.

You don't really want to take a list and try and say it's a table, not semantically anyway. visually ? style it as you wish, there are a whole heap of display properties to visually render elements in terms of table elements, display:table; display:table-row; display:table-cell;

If I have missed your point forgive me Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me