loading Loading...
add chat to your website

Tables

A table is the perfect format for some types of data, such as statistical information.


Creating a Table

To create a table, press the button on the toolbar. The Table Properties dialog window that will open lets you set configuration options that define table size, display properties, and other advanced properties.


The Table Properties dialog window includes two tabs that group table options:

  • Table Properties
  • Advanced
     

Table Properties

The Table Properties tab is the default tab that opens after you press the button on the toolbar. It allows you to set the table dimensions and configure the way the table will appear on the page.

Below is an overview of all Table Properties tab elements:

  • Rows – This is the number of rows in the table (required).
  • Columns – This is the number of columns in the table (required).
  • Width – This sets the width of the table in pixels or a percent value. Giving the width as a percent value lets you set the proportion of the page that the table will occupy.
  • Height – This sets the height of the table in pixels.
  • Headers – This drop-down list formats certain table cells as headers and applies special formatting to them. You can apply header formatting to First Row, First Column, or Both.
  • Border size – This sets the thickness of the table border in pixels.
  • Alignment – This sets the alignment of the table on the page. The following options are available: Left, Center, Right.
  • Cell spacing – This is the space between individual cells as well as cells and table borders, in pixels.
  • Cell padding – This is the space between the cell border and its contents, in pixels.
  • Caption – This is the label of the table that is displayed on top of it.
  • Summary – This summary of the table contents is available for assistive devices like screen readers. It is a good practice to provide your tables with meaningful summary text in order to make them more accessible to users with disabilities.
     

Advanced

The Advanced tab lets you configure additional image options, such as assigning an ID, a class, a language direction, or CSS-style properties. It is meant for advanced users with knowledge of HTML and CSS.

Below is an overview of all Advanced tab elements:

  • Id – This is a unique identifier for a table element in the page (id attribute).
  • Language Direction – This set the direction of the text in the table: Left to Right (LTR) or Right to Left (RTL).
  • Style – This sets CSS-style definitions (style attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.
  • Stylesheet Classes – This is the class of the table element (class attribute). Note that a table element might be assigned more than one class. If this is the case, separate class names with spaces.

Working With Tables

Once inserted into the document, the table can be modified. To edit the table, either double-click it, or open the table context menu by right-clicking on it or using the Menu/Application key on your keyboard.

To delete the whole table and its contents, use the Delete Table option.
 

The Table Properties option allows you to change the configuration options that were set when the table was created, except the number of rows and columns which are grayed out.
 

Additionally the table context menu lets you modify the rows, columns, or particular table cells. This method makes it possible to insert new rows, columns, or cells in specified locations, as well as merge and split cells.

Editing & Deleting Table Rows

The table context menu lets you edit table rows. If you hover your mouse over the Row menu option, additional options become available.

Below is an overview of all the Row context menu options:

  • Insert Row Before – This inserts a new row before the one that contains the cursor.
  • Insert Row After – This inserts a new row after the one that contains the cursor.
  • Delete Rows – This deletes the row that contains the cursor.

Note that it is possible to select multiple table cells by dragging the mouse over them, so an operation like deletion may be applied to many table rows at once. Firefox works best for this.

Editing & Deleting Table Columns

The table context menu lets you edit table columns. If you hover your mouse over the Column menu option, additional options become available.

Below is an overview of all the Column context menu options:

  • Insert Column Before – This inserts a new column before the one that contains the cursor.
  • Insert Column After – This inserts a new column after the one that contains the cursor.
  • Delete Columns – This deletes the column that contains the cursor.

Note that it is possible to select multiple table cells by dragging the mouse over them, so an operation like deletion may be applied to many table columns at once.

Cell Properties

Table cells can be further customized, creating a unique look and feel. Various configuration options can be set in the Cell Properties dialog window which can be opened from the Cell context menu in the table context menu.

Below is an overview of all the Cell Properties dialog window elements:

  • Width – This sets the width of the cell in pixels or a percent value. Giving the width as a percent value lets you set the proportion of the row that the cell (and the column it is located in) will occupy.
  • Height – This sets the height of the cell in pixels.
  • Cell Type – This sets the type of the table cell—either a normal data cell or a header cell with special formatting.
  • Word Wrap – This setting turns word wrapping of the cell content on or off.
  • Rows Span – This setting stretches the cell downward over several rows. Entering a numeric value sets the rowspan attribute.
  • Columns Span – This setting stretches the cell to the right over several columns. Entering a numeric value sets the colspan attribute.
  • Horizontal Alignment – This sets the horizontal alignment of table cell contents. The following options are available: Left, Center, or Right.
  • Vertical Alignment – This sets the vertical alignment of table cell contents. The following options are available: Top, Middle, Bottom, or Baseline.
  • Background Color – This is the color of the cell background. You can use either of the following methods to set the color:
    • Enter the RGB value in the text box, in the rgb format (nn, nn, nn), where nn is a numeric value on a scale from 0 to 255 representing the red, green, and blue channels.
    • Enter the hexadecimal RGB value in the text box, in the #nnnnnn format, where the n letters stand for the three pairs of hex color values representing the red, green, and blue channels.
    • Use the Choose button to open the Select color dialog window and pick the color with your mouse.
  • Border Color – This is the color of the cell border. You can use either of the following methods to set the color:
    • Enter the RGB value in the text box, in the rgb format (nn, nn, nn), where nn is a numeric value on a scale from 0 to 255 representing the red, green, and blue channels.
    • Enter the hexadecimal RGB value in the text box, in the #nnnnnn format, where the n letters stand for the three pairs of hex color values representing the red, green, and blue channels.
    • Use the Choose button to open the Select color dialog window and pick the color with your mouse.