Before we begin, tables are supposed to structure tabular data, and not for web page layouts. You can learn how to make web page layouts using CSS.
I will first show you how to create a table and then I will explain HTML code example.
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
The above HTML code example makes the following table.
| 1 | 2 | 3 |
| 4 | 5 | 6 |
The <table> element defines the table.
The <tr> element defines a table row. Notice that there are 2 <tr> elements in the above example and there are 2 table rows.
The <td> element defines a data cell, which must be enclosed in <tr> tags. Notice that there are 6 <td> tags in the example and that there are 6 data cells in the table.
The width of the border of the table can be specified in the openning <table> tag using the border attribute. If you specify that the border be zero (0), the table will not have a border at all.
The HTML code below shows you how to make another table, this one with only 1 row, 2 cells and no border.
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
The above HTML code makes the table below.
| 1 | 2 |
Make a table by entering the HTML code in the textbox below.
Table cells with no content in them may be displayed differently on different web browsers. To avoid this issue, add a non-breaking space ( ) to empty data cells, to make the borders visible.
The below HTML code makes a table with an empty table cell. Notice that the last <td> tag is empty.
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
The above HTML code example makes the table below, which has an empty table cell.
| 1 | 2 |
| 3 |
The HTML code example below will make the same table as above, except that the HTML code has a non-breaking space ( ) added to the last <td> tag.
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
| 1 | 2 |
| 3 |
note: remember that some web browsers may display tables with empty cells the same as tables with no empty cells. The reason for adding the non-breaking space ( ) is to ensure that your tables appear the same in all web browsers.
The below HTML code example shows you how to add a caption to 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" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<table border="1">
<caption>
this is a caption
</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
The above HTML code makes the below table with a caption.
| 1 | 2 | 3 | 4 |
The below HTML code example shows you how to make a table with a cell that spans more than one column.
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table border="1">
<tr>
<td>AAAA</td>
<td colspan="2">BBBB</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
</table>
</body>
</html>
The above HTML code makes the table below.
| AAAA | BBBB | |
| 1111 | 2222 | 3333 |
The below HTML code example shows you how to make a table with a cell that spans more than one row.
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table border="1">
<tr>
<td>AAAA</td>
<td>BBBB</td>
</tr>
<tr>
<td rowspan="2">1111</td>
<td>2222</td>
</tr>
<tr>
<td>3333</td>
</tr>
</table>
</body>
</html>
The above HTML code makes the table below.
| AAAA | BBBB |
| 1111 | 2222 |
| 3333 |
Try it yourself. Enter the HTML code in the textbox below to make a table with a cell that spans more one cell or column.
The cellspacing attribute allows you to define the distance between cells in a table.
The below HTML code example shows you how to define the distance between cell using the cellspacing attribute.
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The above HTML code example makes the table below.
| First | Row |
| Second | Row |
The frame attribute allows you to control the borders around a table.
The HTML code examples below show you how to use the frame attribute.
If you do not see any frames around the tables below, your web browser does not support the use of the frame attribute and/or may be too old.
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The above HTML code makes the table below.
| First | Row |
| Second | Row |
The HTML code example below is a table with a frame attribute with a value of "box".
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The above HTML code makes the table below.
| First | Row |
| Second | Row |
The HTML code example below is a table with a frame attribute with a value of "void".
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The HTML code above makes the table below.
| First | Row |
| Second | Row |
The HTML code example below is a table with a frame attribute with a value of "above".
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The HTML code example above makes the table below.
| First | Row |
| Second | Row |
The HTML code example below is a table with a frame attribute with a value of "below".
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The HTML code example above makes the table below.
| First | Row |
| Second | Row |
The HTML code example below is a table with a frame attribute with a value of "hsides".
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The HTML code example above makes the table below.
| First | Row |
| Second | Row |
The HTML code example below is a table with a frame attribute with a value of "vsides".
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The HTML code example above makes the table below.
| First | Row |
| Second | Row |
The HTML code example below is a table with a frame attribute with a value of "lhs".
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The HTML code example above makes the table below.
| First | Row |
| Second | Row |
The HTML code example below is a table with a frame attribute with a value of "rhs".
<!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>
<title>this is the title of the web page</title>
</head>
<body>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
The HTML code example above makes the table below.
| First | Row |
| Second | Row |