Skip to content.
NDSU
Text Size

Tables (using the RTE)

Insert a table

  1. Create a regular content element and open the Text tab
  2. In the RTE, click the Insert tablebutton
  3. In the Insert Table dialog, enter at least a Summary or a Caption, along with any other style changes desired
  4. Click OK

Add alignment, borders, backgrounds to the table

A default table is created without alignment, borders, backgrounds, etc. To add alignment, borders or backgrounds

  1. Open the regular content element and click the Text tab
  2. Right-click the table and choose Table Properties to configure the table appearance (or click somewhere in the table and then click the Table propertiesbutton in the RTE)
  3. Edit properties as described below
  4. Click OK when you are done
  5. Save and publish the content element as usual

Choose a style

To style the table,

  1. In the table properties window, locate the Table classes drop-down menu under the Style heading
  2. Select a style.
    Availability of styles may vary by site just as the appearance of similarly-named styles may vary by site. In the example below there is only one style (Striped Rows) available

Size the table/fields

  1. In the table properties window, locate the Width and Height field under the Layout heading
  2. Enter values for width or height.
    It is highly recommended that you set width in terms of percent or em so it can grow with the size of data and text size. If you do set height, you should be aware that the visitor may not see all of the table contents if you don't set the value large enough

Other table properties fields

  1. Caption: is text that will display in the body of the completed web page
  2. Summary: is useful for persons utilizing assistive technology devices. The summary should literally provide a brief summary of the table, aiding users in determining whether they should read the table contents or not

    At least one of Caption or Summary must be provided.

Emphasize the header cells

  1. In the RTE, right-click on the table and choose Cell Properties (or click in the table and then click the Cell propertiesbutton in the RTE)
  2. Change the Type of cell: to Header cell for column or Header cell for row, as appropriate
  3. Click OK
  4. Save and publish as normal

Example table with StripeRows2 and both row and column header cells:

Column heading 1

Column heading 2

Column heading 3

Row heading 1

a

b

c

Row heading 2

d

e

f

Row heading 3

g

h

i

Example table movie

Demonstration of the steps to emphasize header cells

Available styles

Styles available in the RTE as of 3/10/08 include

  • StripeRows1 - rows with alternating white/gray background
  • StripeRows2 - rows with alternating white/gray background with dotted gray border
  • Border1 - solid gray border

Default table examples

The following tables were created by choosing table options in the initial table create dialog using the selections described.

100% default table

Insert new table and click OK without changing any other options:

asdf

asdf

asdf

asdf

this is a longer cell

short

short

short

short

this is a longer cell

short

short

This is a mostly default table (Header cells on left)

Change header cells to left:

asdf

asdf

asdf

asdf

this is a longer cell

short

short

short

short

this is a longer cell

short

short

Default table with stripeRows2

Change style to stripeRows2:

asdf

asdf

asdf

asdf

this is a longer cell

short

short

short

short

this is a longer cell

short

short

Header cells on left with stripeRows2

Change header cells to left and style to stripeRows2:

asdf

asdf

asdf

asdf

this is a longer cell

short

short

short

short

this is a longer cell

short

short

It is not possible to both change the alignment for the entire table AND have a table class (e.g. stripeRows2). The options are mutually exclusive.

Header cells on left with left alignment

Change header cells to left and set alignment to left:

asdf

asdf

asdf

asdf

this is a longer cell

short

short

short

short

this is a longer cell

short

short

Multiple selections

ALL classes in the table are mutually exclusive. This means that for table-wide styling,you may choose only ONE of the following at a time

  • text alignment
  • vertical alignment
  • border1
  • stripeRows1
  • stripeRows2

Last updated: Friday, October 16, 2009 5:09:29PM

Site Manager: Web Master
Published by Enterprise Computing and Infrastructure

Enterprise Computing and Infrastructure
Phone: (701) 231-7961
IACC 206
1320 Albrecht Boulevard - Fargo, ND 58105