Skip navigation
banner

THE DOCUMENTATION ON THESE PAGES IS INTENDED FOR USE BY OVIATT LIBRARY FACULTY. NON-LIBRARY CSUN FACULTY SHOULD CONTACT CSUN IT FOR HELP SETTING UP WEB SITES ON THE CAMPUS SERVER

Inserting and Working with Tables

Tables are used for two things in web pages: presenting tabular data (called a data table), and page layout. A layout table is used merely to position items on the page and is usually invisible to the user. Below is an example of a data table:

Useful Books on Chaucer
Title/Author Call number Location
The age of Chaucer / Valerie Allen. PR291 .A55 2004 Floor3
Old and Middle English literature / edited by Jeffrey Helterman and Jerome Mitchell. PR166 .O43 1994 Reference Room
Manuscripts and texts : editorial problems in later Middle English literature : essays from the 1985 conference at the University of York / edited by Derek Pearsall. PR275.T45 M37 1987 ASRS
The loyal conspiracy: the Lords Appellant under Richard II. / Anthony Goodman DA235 .G66 1971b ASRS

To insert a table:

  1. In the Common tab of the Insert toolbar, click the Insert Table icon. The Insert Table dialog box will open.
  2. Type in the number of rows and columns you initially think you'll (you can add more later).
  3. Table width: in order to avoid accessibility problems, set the width using the "percent" option. The percentage number will create a constrained, dynamic width table that will expand and contract with the size of the browser window. E.G. a table set at "75 percent" occupy 75% of the horizontal space made available for content by the Template.
  4. Set a border thickness of 1 or more (visible borders make data tables easier to read).
  5. Cell padding: this determines the margins between the borders and contents within the boxes of the table (table cells).
  6. Cell spacing: any number higher than 0 will make the borders appear thicker. Click OK.
  7. Accessibility Options Dialog Box
    • For Data tables, type a caption in the Caption box. This will appear at the top of the table and serve as the "title" of your table (e.g. "Monthly Expenses for 2005")
    • For all tables, type a summary in the Summary box. This will not be visible to the average user, but will be helpful to users of assistive technology. For a table used for layout only, type "For layout only"
    • For Data tables, set a Header: selecting Column, Row or Both will designate the first column, first row, or first row and first column as headers. Cells in headers (as in the example above) contain metadata about the information in the row or column they "head."
    • Click OK.

Set a Header Row or Column in a Pre-existing Table

Select a row or column with your mouse and check Header in the Table Properties Panel to make it a header row or column. Then in Code View add the attribute scope="col" to each <th> tag in a header row, and scope="row" to each <th> tag in a header column.

Modify a Table

You can modify the whole table, or cells or rows of tables using the tools in the Table properties panel.

Adding and Deleting Rows and Columns

Merging and Splitting Cells

To achieve different layout effects, you may wish to merge or split cells. Do not merge or split cells in a data table, as this confuses the header structure.

18111 Nordhoff St. Northridge CA 91330 (818) 677-2285
spacer

  • Valid HTML 4.01! Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0
  • http://library.csun.edu/ealtman/documentation/dw/dwtables.html
CSUN Home Page Library Home