Adaptive Size Determination / Formating Using Tables Considered Harmful

About three months ago, there was some discussion about adding the ability to 
constrain or change the sizes of groups of elements to CSS. Yesterday, I was 
thinking about the <table> element and reached the conclusion that this ability 
should be part of CSS, and possibly could be removed from tables.

I apologize for the length of this post, I wrote down my thoughts and they were 
(possibly too) extensive.


The specifications for HTML, XHTML, and CSS declare that HTML / XHTML elements 
should contain the data for a document and that CSS should describe the 
formatting of the document. Because HTML was defined before this split (data / 
format) was clearly understood, many HTML elements include formatting 
information, in some cases to the exclusion of data. In addition, some of the 
elements combine, or are used for, formatting along with included data. One of 
the most abused of these combination elements is <table>.

To be clear, even though this document is discussing styling (CSS), the first 
use of the <table> element should be to enter arrays of data (tables / 
spreadsheets) into web pages. The formatting of the data arrays might be 
specified (by default) within the UA or other HTML display software.

The HTML and XHTML specifications clearly state that one dimensional sets of 
data should be declared as lists (<ul>, <ol>, etc.) and two dimensional sets of 
data should be declared as tables (with <row>, <col>, and data: <td> or <th> 
elements). Lists default to vertical orientation, but can be used, after a 
fashion, in horizontal orientation by styling them as ‘inline-block’ elements. 
Single columns or rows (one dimensional data sets) can also be displayed simply 
with a table element which only contains a one dimensional data set; this is 
frequently used by web page designers.

{There is no discussion of higher-order sets of data in HTML or XHTML, although 
this document will mention them later.}

Almost immediately, web developers began using tables to align items, both 
vertically and horizontally. Since Tables are block elements which contain block 
elements, each block can be declared style=‘vertical-align: top’ (or baseline, 
sub, super, text-top, middle, or bottom) or style=’text-align:left’ (or center, 
right, or justify). Other alignments can be handled within a block element by 
specifying the left and right, top and bottom padding. Any block element can do 
this, so it is not strictly necessary to use tables to align embedded elements, 
but tables also are nested blocks and this makes it simpler to use the CSS 
cascades -- designers then only need to declare the desired alignment once, for 
the table (parent).

{In some future version of HTML, it might be desirable to declare a data element 
and an array of data elements and then make higher dimensional sets of data 
elements as arrays of arrays, as in many programming languages. This would 
simplify understanding of multi-dimensional data sets and make the UA 
programmers’ jobs easier. The only difficulty not yet clarified by CSS would be 
how to display higher-order data sets. I can visualize future UAs providing 
rotate, slice, and other options to view complex, multidimensional data sets.}

Designers soon discovered that they could also adjust the size of the individual 
elements (or at least the area surrounding them) using tables. (A <table 
width=’80%’> declaration, for example, would appear larger on larger screens or 
when the user enlarged the UA window, and the enclosed elements would also grow. 
This growth can be limited by specifying row, column, and data element sizes 
specifically.) Once block elements and CSS appeared, this ability was available 
to designers using, for example, <div> elements and no longer strictly required 
<table> elements. Because of designer inertia (they already learned to use 
<table> elements and were reluctant to change), and because because <table> 
elements also align and nest, many web designers still use tables to control the 
sizes of data elements.

One more ability of tables makes them indispensable to web page designers: they 
can adjust the sizes of individual elements (blocks, padding, or resizing 
images) in relation to other elements. In a table, all the individual blocks in 
one row must have the same height and all the elements in a column must have the 
same width. The default automatic layout for tables also makes all table data 
elements the same size. There is no other HTML / XHTML element which can 
automatically resize contained elements (or their margins / padding) so the 
elements appear all the same size. This ability is strictly formatting and 
should logically be part of CSS.

I would, therefore, like to propose adding to CSS the ability to make sets of 
elements conform to a common size. This would necessitate the ability to define 
sets (possibly using classes), the ability to set sizes (width and/or height) 
and the ability to select minima, maxima, and maybe even averages (min, max, 
avg) of these element sets. Once these abilities are part of CSS, <table> 
elements can then be used strictly to declare arrays of data, and CSS can be 
used to align and adjust element sizes based on other elements or screen or 
window sizes. Until this ability is part of CSS, the data / format split between 
HTML and CSS will never be clean because one necessary formatting ability is 
only available using tables.

Once this ability is part of CSS, many designs which are either not possible, or 
innately complex using current HTML / XML can be created. Just a few simple 
examples:

Making a column on each side of the window have the same size. This can be 
extended to columns with gaps. Currently, designers must use a table or must 
explicitly declare the size of the column elements.

Creating a rectangular display area with different sized blocks, not necessarily 
all lined up. For example:

style {
div	{ width: 100%; }
.row	{ display: inline-block; }
.colA	{ width: 50%; }
.colB	{ width: 30%; }
.colC	{ width: 20%; }
}

<div>
<div class=”row”>
	<div class=”colA”>Wide</div>
	<div class=”colB”>Med</div>
	<div class=”colC”>Thin</div>
	</div>
	<div class=”row”>
	<div class=”colC”>Thin</div>
	<div class=”colA”>Wide</div>
	<div class=”colB”>Med</div>
	</div>
</div>

This could allow designers to align horizontally and offset vertically or to 
align vertically and offset horizontally. I’m sure many other uses will be 
invented by creative designers.



James Elmore
22162 Windward Way
Lake Forest, CA 92630
Home	(949) 830-9534
Email	James.Elmore@cox.net

Received on Wednesday, 30 May 2007 22:18:18 UTC