Tables

Several Karelia Community Forum members have bemoaned the absence of a table creator within Sandvox.

Thank goodness no such creature exists, says I! Tables have been abused sufficiently on the WWW, being used for reasons for which they were never designed, such as layout. HTML tables are for tabular data: spreadsheety sort of stuff and little else.

But although it is true that Sandvox does not offer a tool for creating tables (that would be too easy and far too much of a temptation for further abuse), tables can be inserted into Sandvox pages through the simple expedience of Raw HTML.

Here's a simple table to prove it:


Mac Notebook Comparison Table
Notebook 11″ MacBook Air 13″ MacBook Air 15″ MacBook Pro
Processor 1.8GHz dual-core Intel Core i7 1.8GHz dual-core Intel Core i7 2.5GHz quad-core Intel Core i7
Screen 11.6 inch LED 13.3 inch LED 15.4 inch LED
Memory 2GB or 4GB 4GB 4GB or 8 GB


Okay, I admit, it doesn't look pretty, but that's because the Raw HTML code for this table contains only the content and no formatting information. It looks like this:


<span>

<table id="mytable" cellspacing="0" summary="Comparison of Apple Mac notebooks.">

<caption>Mac Notebook Comparison Table</caption>

  <tr>

    <th scope="col" abbr="Notebook" class="nobg">Notebook</th>

    <th scope="col" abbr="11 inch MacBook Air">11″ MacBook Air</th>

    <th scope="col" abbr="13 inch MacBook Air">13″ MacBook Air</th>

<th scope="col" abbr="15 inch MacBook Pro">15″ MacBook Pro</th>

  </tr>

  <tr>

    <th scope="row" abbr="Processor" class="odd">Processor</th>

    <td>1.8GHz dual-core Intel Core i7</td>

    <td>1.8GHz dual-core Intel Core i7</td>

    <td>2.5GHz quad-core Intel Core i7</td>

  </tr>

  <tr>

    <th scope="row" abbr="Screen" class="even">Screen</th>

    <td class="alt">11.6 inch LED</td>

    <td class="alt">13.3 inch LED</td>

    <td class="alt">15.4 inch LED</td>

  </tr>

  <tr>

    <th scope="row" abbr="Memory" class="odd">Memory</th>

    <td>2GB or 4GB</td>

    <td>4GB</td>

    <td>4GB or 8 GB</td>

  </tr>

</table></span>


Formatting and content are best kept separate, making possible later changes of formatting a far simpler task, so the formatting of the table is specified in some simple CSS specified in an embedded style sheet. That CSS will provide information, too, about the "class" attributes used in the code above. This is shown on the next page…


© David Neale 2011