This page is part of the California Department of Education (CDE) Web Design Standards, which only apply to specific CDE Web sites. Visit the CDE Web Standards to determine if these standards apply to a specific Web product (Web site, Web page, Web document, or Web application) that has been developed by or for the CDE.
Most Web pages (not including Web applications) on all CDE Web sites are created using Adobe's Contribute software templates. WebNETS, which is a custom software application that was created by CDE staff, is also necessary in order to create and process most Web pages on the CDE's public Internet site. Portions of these standards, where noted, apply only to CDE users of Contribute or WebNETS software; or to Web application developers.
Structure and Content
Tables must be constructed as a standard grid where each row and column has the same number of cells. For example:
Each cell in the table must have content—no blank cells. When developing a table for the Web from a previous "print" model, consider using "N/A", "None", "0", or similar where blank cells previously existed.
Exceptions include the single upper-left cell when both a header row and header column are used. Also, if the last row of the table is used for totals or results, blank cells may be used where needed (e.g., the last cell in a percentage column).
When blank cells are used in these situations, table borders must be present for all cells.
Structure for Web Applications
In Web applications, cells can be merged if they can be programmatically associated with the appropriate header and cell contents. Otherwise, merged cells may not be used for data tables.
Don't use of symbols as shortcuts for words, such as "X", or "-". Instead use "yes/no", or abbreviate actual content.
Any use of abbreviated content in tables must be preceded by a key.
Consistent layout and formatting must be applied on cell vertical or horizontal alignment in all data tables in a Web page.
Table Header-Row or Columns
Table header-rows and/or columns must be used and they must utilize the appropriate site colors (Contribute applies the correct background color for table header-rows if the top row and/or leftmost column are selected as header-rows.)
Intermediary blank or sub-header rows or columns are not allowed. When they are used for tables in the "print" model, intermediary blank or sub-header rows or columns often indicate complex multi-layered data layout that must be simplified in order to be considered accessible on the Web. Also, they often introduce blank cells, which are not allowed. To reformat for CDE Web sites, either add additional columns or rows to provide greater detail per row or column (this may introduce unavoidable redundancy), or split the table into multiple tables—usually at each intermediary blank or sub-header row or column. Hint: The intermediary sub-header title usually becomes the title of the new table.
Heading styles (e.g., <h1>, or Heading 1) may not be used in a data table header-row.
Each individual data item in a table cell must relate directly to the appropriate table header label(s).
Table Header-Row or Columns for Web Applications
Use of the correct cascading style sheet (CSS) is required. This will ensure that table header-rows and columns are styled correctly (including using the appropriate background color).
If multiple table-header rows or columns are used, headers and sub-headers must be associated with table data cells using table elements and attributes.
Table Justification (Alignment)
Tables must be either left justified or centered on the page.
Table Titles and Descriptions
Tables must either be introduced in the content preceding the table, with a heading placed above the table, or with a HTML table caption. Headings placed above the table (e.g., Heading 2 <H2> through Heading 6 <h6>) must be either left justified or centered to match the alignment of the table.
The text in table cells must be the normal CDE font, size, and color. Applying heading styles to cell text is not allowed. See the Text Styles section of the Design Standards for more information.
Text for Web Applications
Arial Narrow may be used if a thinner font is needed. See the Text Styles section of the Design Standards.
Default color, one pixel width borders must be used for data tables.
Adding background color to non-table header-rows or columns is not allowed. Exception: The light site topic-color may be applied to alternating non-table header-rows when a table is excessively long and the color makes the information easier to read. See the Color section of the Design Standards for light site topic colors.
Cell padding indicates the amount of space, in pixels, between the edge of the table cell and the content of the cell. Cell padding of at least 1 pixel is required. For large data tables, 3 pixels of cell padding is recommended. Cell padding should be set to effectively display table contents in a visually appealing way.
Cell spacing indicates the amount of space, in pixels, between each table cell. Cell spacing should usually be set to 3 pixels, but can be different. Cell spacing should be set to effectively display the table contents in a visually appealing way.
A table must never extend horizontally beyond the left or right edge of the page header and footer. For both the Internet and Intranet, special wider expandable headers and footers are available when the standard header/footer combinations are too narrow.
For most situations, percentage points should be used for table widths.
For the Internet
A setting of 95% or less is required to allow enough white space for presentation. If pixel widths are necessary, only a maximum width of 675 pixels is allowed.
For the Intranet
A setting of 95% or less is required to allow enough white space for presentation. If pixel widths are necessary, only a maximum width of 590 pixels is allowed.
Merged Cells may only be used if they can be programmatically associated with the appropriate header and cell contents. Otherwise they may not be used for data tables.
Tables may not be used for page layout on CDE Web pages. Cascading style sheets must be used for page layout. Tables must be used for tabular data only.
For Web Applications
Command links, such as "edit", "delete", and "details" that appear in a data table row must be placed to the right of a column or columns that contain unique row identifying information. In most cases, the CDE best practice is to use the right-most column(s) in a data table row for command links and either place the links in a single column with an appropriate identifying column header label, such as "Action", or place them in individual columns with column heading names that match the link text except with the inclusion of a question mark (e.g., "Edit?", "Delete?", or "Details?").
Title and Summary Attributes
In Web applications, use of the title and summary attributes is recommended.