facebook google plus twitter
Webucator's Free HTML Tutorial

Lesson: HTML Tables

Welcome to our free HTML tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

In this lesson, you will learn to create HTML tables to hold tabular data. You will not learn to use tables to lay out pages as that is a major no-no. You need to learn CSS for proper page layout.

Lesson Goals

  • Add an HTML table to a web page.
  • 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta 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:Home Run Record List Rendered

Attributes

The following tables list attributes that have been deprecated in the current HTML standards. They are presented here for backwards compatibility with older browsers. Internet Explorer 7 and earlier do not support all of the latest CSS settings that replace these obsolete attributes. Later in this course is a lesson on using CSS for styling. Using CSS is the recommended way of styling tables.

<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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta 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:Formatted Table

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:Two-Row Table

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
---- C O D E   O M I T T E D ----
<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>
---- C O D E   O M I T T E D ----

Code Explanation

Spanning rows works in the same way:Two-Row Table Column Spanned

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
---- C O D E   O M I T T E D ----
<table border="1" width="100%">
<tr>
	<td>a</td>
	<td rowspan="2">b</td>
	<td>c</td>
</tr>
<tr>
	<td>d</td>
	<td>e</td>
</tr>
</table>
---- C O D E   O M I T T E D ----

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:Table Listing Three Websites
  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.

Solution:

Tables/Solutions/Resources.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Runners Home&trade; - Resources</title>
</head>
<body>
<h1>Resources</h1>
<table width="650" border="1" cellpadding="3" cellspacing="0">
  <caption>Running Resources</caption>
  <tr>
  	<th>Date Added</th>
    <th>Resource</th>
    <th>Description</th>
  </tr>
  <tr>
  	<td>6/1/18</td>
    <td><a href="http://www.bostonmarathon.com">Boston Marathon Homepage</a></td>
    <td>Everything you want to know about the Boston Marathon AND MORE</td>
  </tr>
  <tr>
  	<td>6/1/18</td>
    <td><a href="http://www.runnershealth.com">Runners Health </a></td>
    <td>Great health tips for runners!</td>
  </tr>
  <tr>
  	<td>6/1/18</td>
    <td><a href="http://well.blogs.nytimes.com/">New York Times Well Blog</a></td>
    <td>Great health tips for active people including runners!</td>
	</tr>
</table>
<hr>
<p>&copy; 2018 Runners Home. All rights reserved. For questions, send email to <a href="mailto:info@runnershome.com">info@runnershome.com</a>.</p>
</body>
</html>