Creating a Table

 

  • 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

  • Enter table title into Caption box.
  • Describe table data in Summary box. Example: the following table presents information on department staff by name, position, extension, and email.
  • First row table headers are the most common (i.e., headings appear at top of each column).  
  • Caption, Summary, and Header are all required settings for accessibility purposes.

 

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>