Skip UCSF navigation|About accessibility UCSF University of California, San Francisco
About UCSF
Search UCSF
UCSF Medical Center
End of UCSF navigation
Skip breadcrumbs navigationUCSF which contains School of Pharmacy which contains Information for Web Developers which contains Web Developer's Guide which contains Step 8: Build your site which contains Style Guide which contains Visual Design which contains Tables
School of Pharmacy•
Visual Design
Overview |
Layouts |
Colors |
Text |
Images |
Boxes |
Tables
Calendars |
Forms |
Downloads |

End of section-level navigation

Tables

Table styles are set by the stylesheet. To use them, use the standard class on your table tag, and use the tablecell class on your th and td tags. Table headers are automatically set in bold with a gray background. Include the cellspacing and cellpadding tags on your table tag. The following code example results in the table shown far below.

<table cellspacing="0" cellpadding="6" summary="table of School of Pharmacy profile statistics" class="standard">
  <tr>
    <th class="tablecell" colspan="3">
<p>Faculty</p>
    </th>
  </tr>
  <tr>
    <td class="tablecell" rowspan="2">
<p>&nbsp;</p>
    </td>
    <td class="tablecell">
<p>Salaried</p>
    </td>
    <td class="tablecell" align="right">
<p>82</p>
    </td>
  </tr>
  <tr>
    <td class="tablecell">
<p>Without Salary</p>
    </td>
    <td class="tablecell" align="right">
<p>688</p>
    </td>
  </tr>
  <tr>
    <th class="tablecell" colspan="3">
<p>Students</p>
    </th>
  </tr>
  <tr>
    <td class="tablecell" rowspan="3">
<p>&nbsp;</p>
    </td>
    <td class="tablecell">
<p>PharmD</p>
    </td>
    <td class="tablecell" align="right">
<p>481</p>
    </td>
  </tr>
  <tr>
    <td class="tablecell">
<p>MS</p>
    </td>
    <td class="tablecell" align="right">
<p>1</p>
    </td>
  </tr>
  <tr>
    <td class="tablecell">
<p>PhD</p>
    </td>
    <td class="tablecell" align="right">
<p>120</p>
    </td>
  </tr>
</table>

Faculty

 

Salaried

82

Without Salary

688

Students

 

PharmD

481

MS

1

PhD

120

In this example:

Examples

Examples of using tables:

Go To: Visual Design or Style Guide