Compiled by Commons Project
View Scott Zak*'s profile

Working with Simple Tables

The effective visibility for this content is 'public' (anyone, anywhere can view).
  • It is visible to the content author.
  • It is viewable by members of Commons Project.
  • The author has explicitly defined its visibility as public.

Visibility

The effective visibility for this content is 'public' (anyone, anywhere can view).
  • It is visible to the content author.
  • It is viewable by members of Commons Project.
  • The author has explicitly defined its visibility as public.

Group Edit

Any member of the group(s) containing this item may edit it.

Comments disallowed

Users are not allowed to post any more comments on the item.

Overview

The HTML Editor provides the ability to display rudimentary HTML tables in the contents of your code. These are especially helpful if you want to format a small set of rows and columns in a post and don't want the overhead of uploading/downloading Excel files. The view screen for your tables will scroll to support larger data sets, but scrolling over tables is not entirely user-friendly and may color your readers' perception of the data. In general, if there are more columns than can easily fit into the data display region, or if you need formula capability you're better off uploading a spreadsheet as document content.

Table Properties image

Details

Table Properties

Fields on the table properties tab control the general layout of the table. The width and height fields are measured in pixels -- entering large numbers here will invoke either horizontal of vertical scrolling (or both) and may impact the layout of other content on your page. Your table will automatically receive 'zebra striping' for readability. Row and column operations and cell properties are available from the context menu (right-click on the table).

Table Features
Feature Description
Rows, Columns Controls table dimensions
Width, Height Table width or height in pixels.  As a rule of thumb, if the width is greater than 700 or the height is greater than 1200, scrollbars will appear.  This should be generally avoided.
Headers Provides header formatting on designated rows or columns
Cell Spacing, Cell Padding Set HTML attributes to control text positioning within cells.
Alignment General text alignment for the table
Caption Appears as a caption at the top of the table.
Summary HTML element for screen readers and searching.
Cell Properties

The Cell properties tool can be reached from the right-click context menu.

Cell properties image

Cell Properties
Feature Description
Height, Width Fix a cell dimension in pixels.  This will have the effect of fixing the entire row height or column width.
Cell Type You can designate a cell as data or header here.
Word Wrap Defaults to yes.
Horizontal Alignment, Vertical Alignment Aligns text within the sell.
Rows Span, Column Span Merges cells in HTML.  Can be a little tricky, so you might need to experiment with it in draft mode to get the effect you want.
Background Color, Border Color. Provides color picker widget for highlighting cells (soon-to-come)
Advanced

As with the other editor objects, the advanced tab is not supported for all users and can mess up your content -- it is recommended that you avoid using it.

Inserting data

You can insert rows into an existing table (or columns, too) by right-clicking within the table and selecting "Row => Insert Row After". 

Table editing