Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
HTML/XHTML Table Tutorials
How To Create a Table
Tables are primarily used to format data to show the relationship between information, like a spreadsheet for example. Tables should not be used to layout web pages, instead CSS should be used to layout web pages.
The starting <table> tag and ending </starting> tag is used to create tables. The <table> tag contains starting <tr> and ending </tr> tags, which denote rows and starting <td> and ending </td> tags, which specify individual cells.
The HTML code below creates a table.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<table>
<tr>
<td>1 A</td>
<td>1 B</td>
<td>1 C</td>
</tr>
<tr>
<td>2 A</td>
<td>2 B</td>
<td>2 C</td>
</tr>
<tr>
<td>3 A</td>
<td>3 B</td>
<td>3 C</td>
</tr>
</table>
</body>
</html>
The HTML code above creates the table below.
| 1 A | 1 B | 1 C |
| 2 A | 2 B | 2 C |
| 3 A | 3 B | 3 C |
How To Add a Border to a Table
If you do not specify a border attribute the table will be displayed without any borders.
You can add a border to a table and the individual cells within the table one of 2 ways: by including the border attribute within the starting <table> tag or through the use of CSS. Adding table and cell borders through the use of CSS is the recommended method, however, for the sake of this tutorial the tables in these tutorials will have the borders created by including the border attribute within the starting <table> tag.
The HTML code below creates a table with a border for the table and each individual cell within the table.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<table border="1">
<tr>
<td>1 A</td>
<td>1 B</td>
<td>1 C</td>
</tr>
<tr>
<td>2 A</td>
<td>2 B</td>
<td>2 C</td>
</tr>
<tr>
<td>3 A</td>
<td>3 B</td>
<td>3 C</td>
</tr>
</table>
</body>
</html>
The HTML code above creates the table below.
| 1 A | 1 B | 1 C |
| 2 A | 2 B | 2 C |
| 3 A | 3 B | 3 C |
How To Include Headings in a Table
The starting <tr> tag and the ending </tr> tag creates the row in which the table headings will be placed. The starting <th> tag and the ending </th> tag creates the table heading and is enclosed within the starting <tr> and ending </tr> tags.
The HTML code below creates a table with headings.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<table border="1">
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
<tr>
<td>1 A</td>
<td>1 B</td>
<td>1 C</td>
</tr>
<tr>
<td>2 A</td>
<td>2 B</td>
<td>2 C</td>
</tr>
<tr>
<td>3 A</td>
<td>3 B</td>
<td>3 C</td>
</tr>
</table>
</body>
</html>
The HTML code above creates the table below.
| heading 1 | heading 2 | heading 3 |
|---|---|---|
| 1 A | 1 B | 1 C |
| 2 A | 2 B | 2 C |
| 3 A | 3 B | 3 C |