Lesson #9: Tables, Part Three

Vocabulary

• Merge Cells: an individual table cell that expands to cover cells in adjacent cells or rows.
• Split Cells: in individual cell in divided into smaller horizontal or vertical units.

Item One: Merge/Split Cells

It is possible to expand the size of an individual cell so that it covers cells in adjacent rows or columns. Spanning cells increases layout and design options, though this option should be used judiciously.

Below is a standard two row, three column table. I set the border value at three for greater clarity in this demonstration:



Imagine that I want to place a single large graphic in the center column, while still retaining two rows in the left and right columns. I can merge the two center column cells by highlighting them; I then go to the Tables main menu item and select the Merge Cells option:



In the image below, note that the original two cells of the center column are now merged into one cell. Also note that in the cells in the adjacent columns are not impacted by the center cell merge:



Once merged, you can set the new cell's properties, such as content alignment, just like you can set the properties of any other cell.

You also can merge cells in rows, and the process is exactly the same as outlined above. In the example below, I decided to merge the top cells in each column of the table. For the purposes of this demonstration, I added some text to illustrate how the merged cells function as a single table element:

Item Two: Alternatives to Merged Cells

I rarely merge table cells because they can make maintenance difficult. Additionally, mechanical readers used by the visually impaired frequently cannot access the content in merged table cells. In the image above, I wanted a single large cell to function as a header for a three-column chart; I achieved this end by merging the top cells in each column.

A safer alternative, though, would by to create two separate tables to achieve the same effect. The first table would be comprised of one row and one column; this table would function as a header. The second table would be comprised of three columns and multiple rows, which would function as the chart itself. By isolating the header in its own separate table, I am able to achieve the same design effect as merging cells, only this time retaining greater control over my entire.  Normally, it is most effective to isolate major design elements whenever possible.

In the example below, I set the background of the header table red, and the three-column chart yellow, for the purposes of illustration:



Please note that just as table cells can be merged, individual table cells can be "split," or divided, into smaller vertical or horizontal units. Again, use this option carefully, and make sure that you explore the use of separate tables to achieve the same overall effect.

The Split option is accessed under the Table main menu item. In the illustration below, note how the top right cell has been split into two vertical elements, while the bottom left cell has been split into two horizontal elements.



 

Item: General Guidelines for Browser Compatibility

The following features are safe and almost always cross-browser compatible:

• Borders toggled on or off
• Variable border width
• Absolute and relative table width
• Cell and table alignment

The following features are generally safe and mostly cross-browser compatible:

• Split and merged cells
• Cell/table background colors
• Border color and shading

Summary

This lesson outlined some advanced settings associated with tables. In general, consider using multiple tables within the same document to maximize browser compatibility and design flexibility.