Creating a Table

Click the table icon in toolbar to create a table within the page.

Select how you want headers to appear. Be sure to include a caption and summary.

  • Note: use percentage for table width (i.e., 90%, etc.) instead of pixels.  A percentage setting will allow the table to adjust for different device screen sizes (i.e., desktop, tablet, and cell phone). Also, using 2 for cell padding and spacing will allow content more room in cells. 

Tables (with data) - Example

  • Headers dropdown menu: select First row for column headers (i.e., most common), First column for row headers (i.e., display along the left side of table), or Both for row and column headers.
  • Caption: enter table title
  • Describe table data in Summary box. Example: the following table presents information on department staff by name, position, extension, and email. 
  • Caption and Headers are required settings for accessibility purposes. Summary is only required for complex tables. Tables using column and row headers, where an explanation is warranted, or when many column or row headers are used. Consult Using the Summary Attribute of the Table Element to Give and Overview of Data Tables and Caption & Summary from the W3C Web Accessibility Initiative
Department Staff Listing
Name Position Extension Email
Thomas Smith Director 5509 tsmith@atc.com
Jane Dinnen Assistant Director 1285 jdinnen@atc.com

<TABLE border="1" summary="department staff listed by name, position, extension, and email">        
<CAPTION>Department Staff Listing</CAPTION>      
<TR>
<TH scope="col">Name</TH>           
<TH scope="col">Position</TH>           
<TH scope="col">Extension</TH>             
<TH scope="col">Email</TH>
</TR>
<TR>
<TD>Thomas Smith</TD> 
<TD>Director</TD>           
<TD>5509</TD>  
<TD>tsmith@atc.com</TD>
</TR>     
<TR>             
<TD>Jane Dinnen</TD> 
<TD>Assistant Director</TD>           
<TD>1285</TD>      
<TD>jdinnen@atc.com</TD>
</TR> 
</TABLE>