Skip Navigation
Angelo State University
Web Services

Search Site

Information for:

Tables

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

W3C

A table may be used when displaying tabular data within a web page and never solely for layout purposes. All <table>'s must adhere to the following guidelines:

  • Tables are for tabular information
  • Do not use tables solely for layout purposes
  • All tables should have a <caption> element
  • All tables must have at least 1 header row or column marked up with <th>s
  • When needed, table/cell widths must always be expressed in percentages rather than in pixels
  • All tables must be given the attribute class="style1" or class="style2"

A <table> contains many tags/elements:

  • The <table> tag indicates the beginning of the table
  • The <caption> element should contain a title or description of the information contained in the table, can only be used once per table, and must immediately follow the opening <table> tag
  • The <thead></thead> section groups rows that make up the table's header cells
  • The <tbody></tbody> section groups rows that make up the table's body
  • The <tr></tr> tags designate individual rows and contain <td>s and/or <th>s
  • <th>s are table header cells and are usually used as the topmost cell in a column or the leftmost cell in a row
  • <td>s are table data cells and typically contain the majority of the information found in the table

Table Style 1

Use this style for most data tables by adding a class of style1 to the opening <table> tag. This type of table will have headers across the top row and/or left column. Tabel headers (<th>) in the first row are styled differently than the ones in subsequent rows by including the first table row (<tr>) inside the optional <thead> element. Alternating row striping and highlighting on hover is added automatically to tables with this style.

<table width="100%" class="style1">
        <caption>Residence Hall Amenities</caption>
        <thead>
                <tr>
                        <td width="25%"></td>
                        <th width="25%">Carr</th>
                        <th width="25%">Centennial Village</th>
                        <th width="25%">Robert Massie</th>
                </tr>
        </thead>
        <tr>
                <th>Gender</th>
                <td>Women Only</td>
                <td>co-ed/unit</td>
                <td>co-ed/unit</td>
        </tr>
        <tr>
                <th>Bathroom Style</th>
                <td>suite</td>
                <td>semi-private</td>
                <td>semi-private</td>
        </tr>
        <tr>
                <th>Capacity</th>
                <td>98</td>
                <td>526</td>
                <td>178</td>
        </tr>
        <tr>
                <th>Number of Floors</th>
                <td>2</td>
                <td>3</td>
                <td>3</td>
        </tr>
</table>
Residence Hall Amenities
Carr Centennial Village Robert Massie
Gender Women Only co-ed/unit co-ed/unit
Bathroom Style suite semi-private semi-private
Capacity 98 526 178
Number of Floors 2 3 3
Back To Top

Table Style 2

Use this style for other types of information that should be presented in a tabular format, but does not require a header row. The table headers (<th>) in this style fall vertically in the first column.

<table class="style2">
        <caption>First-Generation Program Activities</caption>
        <tr>
                <th width="18%">Individual Meeting </th>
                <td>Each participant will meet with a program coordinator to properly assess the needs of the student and to build individual connections. </td>
        </tr>
        <tr>
                <th>Power Lunches </th>
                <td>Participants will meet a minimum four times per semester to learn college survival skills and to meet first–generation professionals from the San Angelo community. Topics can include study skills, time management, conflict resolution, relationship building, financial aid opportunities, money management, and ASU support services. </td>
        </tr>
        <tr>
                <th>Cultural Capital </th>
                <td>Provide the students with a cultural activity that will be scheduled by the program coordinators. </td>
        </tr>
        <tr>
                <th> Mentor Activities </th>
                <td>Each freshman participant will be matched with a first–generation student who has been at ASU at least two long semesters. Mentors are expected to attend all activities and to maintain contact with their mentee throughout their involvement with the program. </td>
        </tr>
        <tr>
                <th>Volunteer Service </th>
                <td>Participants will select a volunteer service opportunity for which they will provide their time and/or talents either on campus or in the San Angelo community. </td>
        </tr>
        <tr>
                <th>Banquet </th>
                <td>The program will conclude with a banquet and two scholarships will be awarded to an outstanding mentor and mentee. </td>
        </tr>
</table>
First-Generation Program Activities
Individual Meeting Each participant will meet with a program coordinator to properly assess the needs of the student and to build individual connections.
Power Lunches Participants will meet a minimum four times per semester to learn college survival skills and to meet first–generation professionals from the San Angelo community. Topics can include study skills, time management, conflict resolution, relationship building, financial aid opportunities, money management, and ASU support services.
Cultural Capital Provide the students with a cultural activity that will be scheduled by the program coordinators.
Mentor Activities Each freshman participant will be matched with a first–generation student who has been at ASU at least two long semesters. Mentors are expected to attend all activities and to maintain contact with their mentee throughout their involvement with the program.
Volunteer Service Participants will select a volunteer service opportunity for which they will provide their time and/or talents either on campus or in the San Angelo community.
Banquet The program will conclude with a banquet and two scholarships will be awarded to an outstanding mentor and mentee.
Back To Top

Appropriate Use

Only use <table> to mark up tabular data. Never use <table> to create a design layout. This is both semantically incorrect and inflexible.

  • If what you’re going to place on the page is information that would make sense to record or track in a spreadsheet, it is almost certainly tabular data.
  • If you’re going to have header fields at the top of columns of data or to the left of rows of data, then it is tabular and a table should be used.
  • If the contents makes sense in a database, especially a very simple database, and you just want to display the data, and not “make it pretty”, then a table is acceptable.
  • If the main purpose of the table is to position the contents on the page in some way, for example, to add spacing around an image, to place “bullet” icons on a list, or to force a block of text to act like a pull quote, then a table is not appropriate.