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. Select Insert > Table. 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. Aa 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.

Adding and Deleting Rows and Columns

Merging and Splitting Cells

To achieve different layout effects, you may wish to merge or split cells.

California State University, Northridge at 18111 Nordhoff Street, Northridge, CA 91330 / Phone: 818-677-2285 / © 2012 CSU Northridge
Last Updated: 08-Jul-2010