HTML Table

HTML Tables

In this lesson of the HTML tutorial, you will learn… 

  1. To add an HTML table to a web page.
  2. 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>
Code Explanation

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

<table> 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
<tr> Attributes
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)
<td> and <th> Attributes
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>
Code Explanation

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

Duration: 20 to 30 minutes.

In this exercise, you will create a table from scratch.

  1. Open Tables/Exercises/Resources.html for editing. Modify the code so the page appears as shown below.
  2. The links in the table should point to the following URLs.
  3. 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s