Content | Navigation |

Insert a table

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

Edit table alignment, borders, backgrounds

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 anywhere in the table and then click the Table properties button 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 from the Table classes menu to apply a style, or choose No block style to go back to a default table.
    Availability of styles may vary by site just as the appearance of similarly-named styles may vary by site

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 to change one cell only,
     Row Properties to change the entire row, or
    Column Properties to change the entire column
    (or click the cell to change in the table and then click the Row Properties or Column Properties button 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 fall 2011 include

StripeRows1

First name

Last name

Favorite color

Jane

Smith

Blue

Jane

Doe

Pink

Bob

the Builder

Yellow

James

Bond

Silver

StripeRows2

First name

Last name

Favorite color

Jane

Smith

Blue

Jane

Doe

Pink

Bob

the Builder

Yellow

James

Bond

Silver

border1

First name

Last name

Favorite color

Jane

Smith

Blue

Jane

Doe

Pink

Bob

the Builder

Yellow

James

Bond

Silver

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

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

  • border1
  • stripeRows1
  • stripeRows2

Student Focused. Land Grant. Research University.

Follow NDSU
  • Facebook
  • Twitter
  • RSS
  • Google Maps

North Dakota State University
IT Help Desk: +1 (701) 231-8685
Physical address: IACC 206, 1320 Albrecht Blvd., Fargo, ND 58102
Mailing address: NDSU Dept. 4530 / PO Box 6050 / Fargo, ND 58108-6050
Page manager: Content Management System

Last Updated: Monday, December 03, 2012 6:10:50 PM