CMS: Working with HTML Tables - University of Houston
Skip to main content

Working with HTML Tables

ADA Compliance | A Basic Table Example | Notes about HTML and Tables | Sample Table VariationsAdditional HTML & Table References | See also: applying custom CSS styles to tables


ADA compliance

UH requires that materials on its website be ADA compliant, so for your Table HTML you will want: Table Captions and Table Headers; and you may want Table Footers as well.

A Basic, Three-Column Table Example

The following shows a basic html table with a merged header row above three columns, and with the UH-defined table style applied:

The Table Caption Goes Here
The Merged Table Header Goes Here
The Table Footer(s) Goes Here
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

The HTML looks like this:

<table class="table">
    <caption>The Table Caption Goes Here</caption>
    <thead>
        <tr>
            <th colspan="3">The Merged Table Header Goes Here</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="3">The Table Footer(s) Goes Here</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Row 1 - Column 1</td>
            <td>Row 1 - Column 2</td>
            <td>Row 1 - Column 3</td>
        </tr>
        <tr>
            <td>Row 2 - Column 1</td>
            <td>Row 2 - Column 2</td>
            <td>Row 2 - Column 3</td>
        </tr>
        <tr>
            <td>Row 3 - Column 1</td>
            <td>Row 3 - Column 2</td>
            <td>Row 3 - Column 3</td>
        </tr>
        <tr>
            <td>Row 4 - Column 1</td>
            <td>Row 4 - Column 2</td>
            <td>Row 4 - Column 3</td>
        </tr>
    </tbody>
</table>

NOTE: If copying the Table structure text from this published webpage to use as a starter table, you should be able to paste it directly into the CMS's embedded plain-text HTML Editor without retaining extraneous formatting, and the WYSIWYG Editor should then see it as a table which can be further edited using the CMS's built-in tools.


Notes about HTML and Tables

In HTML, tags may either consist of a set of opening and closing tags, such as the table row tags in the table above: <tr></tr>   or  they may be self-closing, such as an image tag <img src="picture.jpg" />  or a horizontal rule tag <hr />

In HTML tables, each row is specifically defined by the material which appears between each set of <tr> ... </tr> tags.

Individual cells of data are defined by the material which appears between each set of <td> ... </td> tags nested inside their parent row tags.

Generally speaking, the number of rows in a table is defined by how many sets of row tags <tr></tr> there are in the table.

The number of columns in a table is interpreted according to how many <td></td> sets (aka 'cells') are included within each row.

In a well-formed table, every row in the table must account for an equal number of cells, either as individually defined sets, or as merged cells. A cell with a 'colspan' declaration represents merged cells and thus will account for the number it declares. In the Header row above, colspan="3" means that one cell can now account for three - two others, plus itself. If rows differ in the number of cells they can account for, the table may not render correctly and may visually appear to be fractured, and/or show spacing gaps. Individuals needing text readers to access your content will find that tables which are not well formed, or which lack distinct markup of headers and captions, are more difficult to interpret.

You may notice that the example table's header row is surrounded by "thead" type row tags, and the table header cell tag is "th" (table header) instead of the usual "td" (table data). The special tags allow the header row to display in a more distinct style from the rest of the table.

Also note that the footer area, which will display below the last row of the table when viewed on the webpage, is actually defined near the top of the table's html. To remove an unneeded footer row, delete the footer tags <tfoot> ... </tfoot> and everything between them.

IMPORTANT!
In well-formed HTML all tags must be 'nested' correctly:
opening and closing completely within their enclosing or 'parent' tags; and closing before a peer-level tag can open after it. For example, the <td></td> tag sets must open after an opening <tr> parent tag and close before any other <td></td> sets that come after it, and before its/their 'parent' row tag closes: </tr> .



Sample Table Variations

Without UH Table Style | Table Striped | Striped and Bordered | Colspan Merge | Rowspan Merge


The example table without the UH style applied:

The Table Caption Goes Here
The Merged Table Header Goes Here
The Table Footer(s) Goes Here
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 



The example table with 'table-striped' style added, and no footer row:

The Table Caption Goes Here
The Table With 'table-striped' Style
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

In the HTML, the <table> tag is now written like this:
<table class="table table-striped">

 



The example table with both 'table-striped' and 'table-bordered' styles added, and no footer row:

The Table Caption Goes Here
The Table With Both 'table-striped' and 'table-bordered' Styles
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

In the HTML, the <table> tag is now written like this:
<table class="table table-striped table-bordered">

Style names cannot contain spaces, but can contain dashes. Notice all of the different style names are gathered together inside the set of straight quotemarks, and each individual style is separated by a space. Styles can be added and subtracted by changing which style names appear inside the quotemarks.

 



The example table with styles added, no footer -
and with cells merged across columns, demonstrating use of 'colspan'

The Table Caption Goes Here
The Table With Merged Cells using 'colspan'
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 and 3 cells merged across, in the same row
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

In the HTML, the third row's second <td> cell is now written as <td colspan="2">
and therefore that same row now needs one less set of <td></td> tags:

<table class="table table-striped table-bordered">
<caption>The Table Caption Goes Here</caption>
<thead>
<tr>
   <th colspan="3">The Table With Merged Cells using 'colspan'</th>
</tr>
</thead>
<tbody>
<tr>
   <td>Row 1 - Column 1</td>
   <td>Row 1 - Column 2</td>
   <td>Row 1 - Column 3</td>
</tr>
<tr>
   <td>Row 2 - Column 1</td>
   <td>Row 2 - Column 2</td>
   <td>Row 2 - Column 3</td>
</tr>
<tr>
   <td>Row 3 - Column 1</td>
   <td colspan="2">Row 3 - Column 2 and 3 cells merged across, in the same row</td>
</tr>
<tr>
   <td>Row 4 - Column 1</td>
   <td>Row 4 - Column 2</td>
   <td>Row 4 - Column 3</td>
</tr>
</tbody>
</table>



The example table with styles added, no footer -
and with cells merged across rows, showing use of 'rowspan'

The Table Caption Goes Here
The Table With Merged Cells using 'rowspan'
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Rows 2 and 3
Column 1
cells merged
Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

In the HTML, the second row's first <td> opening cell tag is now written as <td rowspan="2">
and so the following row now needs to be adjusted also, to have one less set of <td></td> tags.
As 'rowspan' implies, the number declared tells how many rows will be affected, and naturally, final results will depend on the whole of the table structure.

<table class="table table-striped table-bordered">
<caption>The Table Caption Goes Here</caption>
<thead>
<tr>
   <th colspan="3">The Table With Merged Cells using 'rowspan'</th>
</tr>
</thead>
<tbody>
<tr>
   <td>Row 1 - Column 1</td>
   <td>Row 1 - Column 2</td>
   <td>Row 1 - Column 3</td>
</tr>
<tr>
   <td rowspan="2">Rows 2 and 3 <br />Column 1<br />cells merged</td>
   <td>Row 2 - Column 2</td>
   <td>Row 2 - Column 3</td>
</tr>
<tr>
   <td>Row 3 - Column 2</td>
   <td>Row 3 - Column 3</td>
</tr>
<tr>
   <td>Row 4 - Column 1</td>
   <td>Row 4 - Column 2</td>
   <td>Row 4 - Column 3</td>
</tr>
</tbody>
</table>

 



Additional general Table/HTML references:

Visit the w3schools site:
https://www.W3schools.Com/html/html_tables.asp

Visit MD Anderson Library for HTML training:
http://libraries.uh.edu/services/training/

AccessUH-Lynda-com-icon.pngLogin to AccessUH and select the Lynda.com icon to access a variety of training options, including HTML.