This is a proposal for a simple extension to today's wysiwyg document editors to allow users to create tables with rich styles for HTML and CSS.
The first step is for the user to click on a toolbar button or menu item to invoke the create table dialog. This presents the user with a choice of template styles and the ability to set the number of rows and columns. The following illustration is from WriteNow. It shows a number of basic styles which provide a quick start for users wishing to create more elaborate styles. The large area in the middle allows the user to vary the number of rows and colums by dragging the representation of the table within it.
Microsoft Word offers a more sophistocated set of templates to choose between on a subsidiary dialog, and would benefit from showing the most popular or (most recently chosen) styles as thumbnails on the main create table dialog.
Having created the table, the user can then click on each cell to type or paste in the content for that cell. At this point the user can experiment with adjusting the style from that given by the template. The following shows the border dialog from WriteNow, together with WriteNow's table toolbar. The toolbar makes it very easy for users to insert or delete rows or columns; to split or merge cells; and to invoke the border style dialog.
Word provides a more sophistocated dialog offering a wider range of border styles together with the ability to set the cell padding (the space inside each cell between the cell border and the cell contents).
Both WriteNow and Word allow the user to distinguish outer borders from inner borders. This gives the user six border positions to set the style for: top, bottom, left, right for the outer borders, and horizontal and vertical for the two inner border positions. For each position, the user chooses a border style from a graphical menu with none, dotted, dashed, solid and double in a graded set of widths.
The following table will be used as an example:
First here is table marked up using the features of the extended HTML table model. The table is represented with two column groups using <colgroup>, and two row groups, using <thead> and <tbody>. Header and data cells are further distinguished with <th> and <td> respectively. The FRAME and RULES attributes on the <table> element are used to get the outer frame and the rules between headers and data. The rows are subclassed using <tr class=dark> or <tr class=light> to allow the style sheet to give these rows a different background shading.
<table frame=box rules=groups>
<colgroup span=1 align=left>
<colgroup span=3 align=left>
<thead>
<tr class=dark>
<th>
<th>Jan
<th>Feb
<th>Mar
<th>Total
<tbody>
<tr class=light>
<th>East
<td>7<td>7<td>5<td>19
<tr class=dark>
<th>West
<td>6<td>4<td>7<td>19
<tr class=light>
<th>South
<td>8<td>7<td>9<td>24
<tr class=dark>
<th>Total
<td>21<td>19<td>21<td>60
</table>
The above representation is fine and straightforward to create using a conventional text editor. The problem is that existing desktop software such as Word and WriteNow etc. don't support the richer model of tables, and would require considerable extension to do so. For instance, the user interface would need extension to allow users to:
An alternative is to stick to the basic table model and to embed the style information within style attributes on each cell. The basic table model treats each table as having an optional caption plus one or more rows, each with one or cells.
Some of the CSS rendering properties relevant to tables include:
Here is the markup for the example table, without style attributes:
<table>
<tr>
<td></td>
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Total</td>
<tr>
<td>East</td>
<td>7<td>7<td>5<td>19
<tr>
<td>West</td>
<td>6<td>4<td>7<td>19
<tr>
<td>South</td>
<td>8<td>7<td>9<td>24
<tr>
<td>Total</td>
<td>21<td>19<td>21<td>60
</table>
Each cell specifies the border style for each of its four sides (in the order top, left, bottom, right). The border property for some of the cells is then:
The cell may also specify additional properties, e.g.
<td style="border: thick thick none none; background: blue;
padding: 0; font: sans-serif 10pt; align: left">7</td>
This would be tedious to enter by hand using a text editor but is straightforward using say Word.
In practice, the padding parameter is the same for all cells in the table. This suggests that CSS should include a "cellpadding" parameter associated with the table element, directly analogous to the HTML cellpadding parameter.
The border style dialog for Word, shown above lets users select the table or a rectangular block of cells within the table. You can then set a different border style for each of the four sides and for the rules between rows and columns within the block of selected cells.
The style settings appropriate for each cell are then stored with each cell. In HTML this means giving a style attribute for each cell. There is no need to differentiate between the table border and cell borders.
This approach can be generalized in several ways, each of which is explained below ...
Desktop wysiwyg document editors allow you to create named paragraph styles. This allows users to apply a previously defined style by selecting a named style from a menu. The same idea can be extended for use with tables:
The above border style dialog could be readily extended to support a named style. The dialog allows users to set a different style for each of the six positions. When rendering the table, the user agent, needs to examine the class attribute for each cell to see what style should be applied. For each of the four sides of the cell, the neighboring cell is examined to see if it has the same or a different named style.
If the cell to the right has the same style, then the border between the two cells is rendered using the border style specified for rules between columns. If the style is different, the right border style of the left cell is compared with the left border style of the right cell.
A precedence order for different border styles is used to pick the style to render the shared border. This typically gives priority to thicker lines over thiner lines. Double lines are given priority over solid lines and in turn over dashed and dotted lines.
A similar process is repeated for each of the four sides of every cell. A shared border need only be considered once as the result of the process is independent of which cell is considered first.
This necessitates a couple of new style properties for CSS to set the border style for row and column boundaries. This extends the list of values permitted with the "border" property to six: top, left, bottom, right, rows, cols.
The second generalization is to allow the cells to be separated from one another using a spacing property. The corresponding HTML parameter is "cellspacing". This property would be associated with the table as a whole. It could be provided as an additional property on the border dialog and greyed out when the selected region is a subset of the table.
Non-zero values for cellspacing cause the borders of adjacent cells to be separated. The borders no longer overlap as happens with conventional tables. This means that adjacent cells can have different border styles. With non-zero cellspacing, the cell borders are set by the row and column border styles.
The top, left, bottom and right border settings apply to the border around the selected group of cells. If all cells in the table are selected, then these properties apply to the table border itself. You can also place borders around groups of table cells. You drag select the appropriate cells and then apply the desired style. The follow illustration shows that by using named styles, the region the style applies to can be more complex than a simple retangular block of cells.
Word and WriteNow combine the selection of border style and width into a single menu. CSS on the other hand allows these to be specified separately using the border-width and border-color properties.
In the examples above, the "border" property was used to specify the border styles for several sides at a time. An alternative is to use the property names for each of the sides: border-top, border-left, border-bottom, border-left, border-rows, border-cols, e.g.
border-left: thin; border-right: thick
By default the HTML table model autosizes the table to match the cell contents. Sometimes, users will want to provide width values for the table or for invididual columns. How should this be supported for wysiwyg table editors?
One possibility is to allow users to drag column borders. This is then translated into values for width attributes. Provided the table is being used with style sheet settings for font sizes etc. this will work fine. The HTML table model also permits the use of relative widths. For instance, you can set the table to be 80% of the current window size. You can also mix relative and absolute widths.
A reasonable compromise is to allow users to drag resize columns or the table itself, and to provide a simple flag to determine whether the width values should be generated in relative or absolute terms.
The HTML table model allows you to specify horizontal and vertical alignment of the cell's content relative to the cell's borders. For vertical alignment you are offered the choice of top, middle, bottom or baseline. The latter allows you to ensure that neighboring cells share a common baseline, even if they use different fonts.
For horizontal alignment the choice is between, left, center, right or justify. A further possibility to to align the contents on a particular character, e.g. a decimal point for numbers. This allows you to line up a column of numbers.
It seems reasonable to add alignment fields to the border style dialog. To avoid this dialog becoming too cluttered, it may be worth using a a Windows '95 "tab control" to place the alignment fields on a separate "tab".
The WriteNow table toolbar allows users complete freedom to merge or split adjacent cells. Merging cells is straightforward and supported by the HTML rowspan and colspan attributes for cells. Splitting cells is more tricky, and may require translation as a nested table.