HTML Tables
- To add an HTML table to a web page.
- To merge table cells.
Creating Tables
Tables are made up of one or more table rows, which contain one or more table cells. The tag for creating tables is <table>. The table row tag is <tr> and the two tags that can create table cells are <td> and <th>. Below is a simple table.
Code Sample: Tables/Demos/TableHomeruns.html
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home Run Hitters</title> </head> <body> <table> <caption>All-time Home Run Record</caption> <tr> <th>Player</th> <th>Home Runs</th> <th>Team</th> </tr> <tr> <td>Hank Aaron</td> <td>755</td> <td>Braves</td> </tr> <tr> <td>Babe Ruth</td> <td>714</td> <td>Yankees</td> </tr> <tr> <td>Willie Mays</td> <td>660</td> <td>Giants</td> </tr> </table> </body> </html>
The <th> elements are table header cells. By default, their content will be centered and bolded. The <td> elements are table data cells. By default, their content will be plain text and left aligned. (see footnote)
Adding a Caption
The table above has a caption, which is added by inserting the <caption> tag after the open <table> tag:
<table> <caption>All-time Home Run Record</caption> <tr>...
The image below shows how this table will be rendered in the browser.
Attributes (see footnote)
| Attribute | Description |
|---|---|
| width | sets the width of the table in pixels or percentage |
| border | sets the width of the border of the table |
| cellspacing | sets the distance between cells in pixels |
| cellpadding | sets the distance between cell content and the cell border in pixels |
| summary | used to provide a longer description of the table for screenreaders |
| Attribute | Description |
|---|---|
| align | aligns the content in the cells in the table row horizontally (left, center, or right) |
| valign | aligns the content in the cells in the table row vertically (top, middle, or bottom) |
| Attribute | Description |
|---|---|
| align | aligns the content in the cells in the table row horizontally (left, center, or right) |
| valign | aligns the content in the cells in the table row vertically (top, middle, or bottom) |
| colspan | indicates the number of columns the cell should span |
| rowspan | indicates the number of rows the cell should span |
The table in the page below shows these attributes in use.
Code Sample: Tables/Demos/TableHomeRunsFormatted.html
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home Run Hitters</title> </head> <body> <table width="500" border="2" cellpadding="1" cellspacing="3"> <caption>All-time Home Run Record</caption> <tr> <th>Player</th> <th>Home Runs</th> <th>Team</th> </tr> <tr> <td>Hank Aaron</td> <td align="right">755</td> <td>Braves</td> </tr> <tr> <td>Barry Bonds</td> <td align="right">748</td> <td>Giants</td> </tr> <tr> <td>Babe Ruth</td> <td align="right">714</td> <td>Yankees</td> </tr> <tr> <td>Willie Mays</td> <td align="right">660</td> <td>Giants</td> </tr> </table> </body> </html>
This screenshot below shows how this table would be rendered:
Merging Cells
In HTML tables, all table rows must span the same number of columns and all table columns must span the same number of rows. To illustrate, take the following table, which has two rows.
Note that the second table row has only two cells; however, it spans all three columns. In HTML, this is accomplished by adding a colspan attribute to any table cell that spans more than one column. The following code would create a table like the one above.
Code Sample: Tables/Demos/MergingCols.html
---- Code Omitted ----<table border="1" width="100%"> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td colspan="2">e</td> </tr> </table>---- Code Omitted ----
Spanning rows works in the same way.
Note that the second table column has only one cell; however, it spans both rows. This is accomplished with the rowspan attribute as shown in the code below.
Code Sample: Tables/Demos/MergingRows.html
---- Code Omitted ----<table border="1" width="100%"> <tr> <td>a</td> <td rowspan="2">b</td> <td>c</td> </tr> <tr> <td>c</td> <td>e</td> </tr> </table>---- Code Omitted ----
Exercise: Creating Tables
In this exercise, you will create a table from scratch.
- Open Tables/Exercises/Resources.html for editing. Modify the code so the page appears as shown below.
- The links in the table should point to the following URLs.
- Boston Marathon Homepage - http://www.bostonmarathon.com
- Runners Health - http://www.runnershealth.com
- Jack's Running Page - http://www.jacksrunning.com
- Race Runner - http://www.racerunner.org
- Save your work and open your new page in a browser to test it.
HTML Tables Conclusion
In this lesson of the HTML tutorial, you have learned to create and format HTML tables. Table code can be cumbersome to write and maintain. Although it is important to understand how tables are coded, in the long run, you may find it easier to use an HTML editor for creating large tables, even if you handcode everything else.
Footnotes
-
The display of tables (background colors, borders, column width, row height, etc.) can be controlled with CSS.
-
Many of these attributes have CSS equivalents and are likely to go away in later versions of HTML. The only attributes likely to stay are colspan and rowspan.