edev: CSS tables

Tables!

1. I want tables
2. Many other people want tables
3. Many other people don't know html well enough to prevent totaly mangling the tables and thus destroying the layout of a page.

#3 is a problem, and remains the main sticking point for not implemeting table tags. This is likely a good thing until someone figures out how to verify the integrety of a table.

Enter CSS

With CSS, it is possible to make what appears to be a table, but is not actually an html table. Consider the follwoing styleseet segment:

e2table {display: table}
e2row   {display: table-row}
e2item  {display: table-cell;
         border: thin solid;
         padding: 0.5em}

So, you say "whoop de do" or "big whoop" or "whoop" or whatever whoop you do. There is a point here. If you mangle the CSS style E2table by forgeting to close a tag, you do not damage the table that encloses it. This is indeed a "big whoop".

To verify this, copy the following code to a web page near you, and play with it.

<style>
e2table {display: table}
e2row   {display: table-row}
e2item  {display: table-cell;
         border: thin solid;
         padding: 0.5em}
</style>

<table border="1">
<tr><td>table text 1</td></tr>
<tr><td>
  <e2table>
  <e2row>
  <e2item>Test text</e2item>
  <e2item>More text</e2item>
  </e2row>
  </e2table>
</td></tr>
<tr><td>table text 2</td></tr>
</table>

Things to try:

• Delete a </e2item> tag.
• Delete a </e2row> tag.
• Delete the </e2table> tag.
• Add an extra e2item/row/table tag.
• Add an extra close e2item/row/table tag.

What you will (should) see:

• While the E2 table may be mangled, at no time will the cells containing "table text" be mangled by bad e2table tags.

This means - we can give tables to users and still prevent them from breaking the table layout.

So, you want to know more than is good for you about this? http://www.w3.org/TR/REC-CSS2/tables.html - 17.2.1

This is all very cool in theory; however, browser support for these features is limited. Only Camino (using the Gecko engine) displayed CSS tables properly. Both Safari 1.0 (using a modified KHTML rendering engine) and Internet Explorer 5.2 completely ignored the tags. links and lynx ignore them as well. This means that to a whole lot of E2 users, CSS tables would look like garbage.

An algorithm for verifying the integrity of a table is not that difficult in concept, even for nested tables. (On second thought, though, nested tables might not be a great idea.) The algorithm just has to keep track of all the tags that are opened, and make sure that they are closed in the right order. If the algorithm runs into a missing tag, it can perform one of these actions:

• Add the necessary closing tags to prevent the E2's layout from being completely mangled.
• Skip rendering the table altogether.

... in addition to a friendly alert near where the writeup hints usually show up.

Naturally, the allowed attributes should be kept minimal. colspan and rowspan are necessary. Background colors and images shoudn't be allowed, of course. Column width should be restricted to a percentage, if allowed at all. There is no height attribute in the HTML specifications, so that can't be used. <colgroup> and similar tags aren't really necessary. Everything else is optional, but should be alright.

The damage caused by missing tags would be minimal, and the voting system should keep things from getting out of hand.

Even though the implementation is very feasible, I'm still not sure which way the addition of tables would affect the overall quality of writeups. The percentage of writeups that could gain a lot from the addition of tables is pretty small, but perhaps it is just me thinking small. If you were to give tables a shot, I think it would be wise to follow TDO's idea and restrict tables to higher level noders (2 or 3 should be enough).