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.
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
| 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 (See "Merging Cells" on page Error. This text should not be shown. Please email courseware@webucator.com to report it: FIX THIS ) |
| rowspan | indicates the number of rows the cell should span (See "Merging Cells" on page Error. This text should not be shown. Please email courseware@webucator.com to report it: FIX THIS ) |
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 ----
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.