[CSS3-tables] proposal for table-row-start display value

Proposal
========
Add a new display value, "table-row-start", to the CSS3 Table module.

An element with display:table-row-start will be rendered identically
to an element with display:table-cell, except that an anonymous
table-row block will be created around it, starting just before the
element and containing all consecutive table-cell siblings of the
element (but not table-row-start siblings).

If an element with this display value has a parent with
display:table-row, this is instead treated as display:table-cell.

Reasoning
=========
There are many instances where an author may have an essentially
linear stream of elements which they want to display as a table, and
it would be inconvenient/impossible to produce the appropriate nested
structure required to denote table rows in the traditional manner.

One example is an HTML definition list, where each dt/dd pair should
be displayed as a separate row in a table.  This is currently
impossible to reproduce with the CSS table model.  The html5 dialog
element suffers from the same problem.

Another example is a document with a number of headers and content
following each header, where each header and the following content
should be displayed as a table row.  This can be achieved within the
current CSS table model by wrapping each group in div (or section for
html5) tags, but only if you have access to the original HTML.

Additional Notes
================
table-row-end would of course be a reasonable alternative to this
proposal, but I believe that table-row-start is more intuitive, and
produces a better mapping to the processing of CSS tables.  An element
with table-row-end would generate a wrapping anonymous table-row block
around its *previous* siblings, which is sort of weird.

It's possible for table-row-end to be an *addition* to this proposal
instead, in which case the anonymous table-row block would start just
before the table-row-start element and encompass all adjacent sibling
table-cell blocks, but end just after a table-row-end element if one
appears.  If there are any further table-cell elements past that, they
will be wrapped in a table-row as decreed by the existing algorithm.

While this proposal significantly helps turn arbitrary markup into
tables, it's not yet complete.  In the second example given, this
proposal only helps if every top-level element should become a table
cell.  That is, the following markup:

	<style>
	h1 { display: table-row-start; }
	* { display: table-cell; }
	</style>
	<h1>First header</h1>
	<p>foo</p>
	<p>bar</p>
	<h1>Second header</h1>
	<p>baz</p>
	<p>qux</p>

Would render identically to:

	<table>
	  <tr>
	    <td>First header</td>
	    <td>foo</td>
	    <td>bar</td>
	  </tr>
	  <tr>
	    <td>Second header</td>
	    <td>baz</td>
	    <td>qux</td>
	  </tr>
	</table>

But it might be intended to render as:

	<table>
	  <tr>
	    <td>First header</td>
	    <td>
	      <p>foo</p>
	      <p>bar</p>
	    </td>
	  </tr>
	  <tr>
	    <td>Second header</td>
	    <td>
	      <p>baz</p>
	      <p>qux</p>
	    </td>
	  </tr>
	</table>

In order to address this, we might introduce some sort of
table-cell-start value (likely in conjuction with a table-cell-end
value, working similar to how I described table-row-end working in
conjunction with table-row-start).


~TJ

Received on Thursday, 19 February 2009 19:06:49 UTC