The code below shows you how to create 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>Web Development Tutorials.com</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
The code above creates the table below.
| 1 | 2 |
| 3 | 4 |
The openning and closing <table> tags define the table.
The openning and closing <tr> tags within the table defines a table row(s).
The openning and closing <td> tags define data cells and must be enclosed within <tr> tags.
Use the text editor below to practice what you have learned.
The code below creates a table that spans 1 row and 2 columns.
<!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>Web Development Tutorials.com</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
The code above creates the table below.
| 1 | 2 |
The code below creates a table that spans 2 rows and 1 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>Web Development Tutorials.com</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
</body>
</html>
The code above creates the table below.
| 1 |
| 2 |
The code below shows you how to adjust the width of the table 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>Web Development Tutorials.com</title>
</head>
<body>
<table border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border="5">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
The code above creates the 3 tables below.
| 1 | 2 |
| 3 | 4 |
| 1 | 2 |
| 3 | 4 |
| 1 | 2 |
| 3 | 4 |
The border attribute is used to specify the width of the table border and must be included within the openning <table> tag. If you specify that the value of the border be zero (0), the table will not have a border at all. It is not neccessary to inlude the border attribute in order to create a table.
The code below creates a table with a table 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>Web Development Tutorials.com</title>
</head>
<body>
<table border="1">
<tr>
<td>AAAA</td>
<td colspan="2">BBBB</td>
</tr>
<tr>
<td>CCCC</td>
<td>DDDD</td>
<td>EEEE</td>
</tr>
</table>
</body>
</html>
The colspan attribute is used to create table cells that span more one column.
The code above creates the table below.
| AAAA | BBBB | |
| CCCC | DDDD | EEEE |
The code below creates a table with a table 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>Web Development Tutorials.com</title>
</head>
<body>
<table border="1">
<tr>
<td>AAAA</td>
<td>BBBB</td>
</tr>
<tr>
<td rowspan="2">CCCC</td>
<td>DDDD</td>
</tr>
<tr>
<td>EEEE</td>
</tr>
</table>
</body>
</html>
The rowspan attribute is used to created table cells that span more one row.
The code above creates the table below.
| AAAA | BBBB |
| CCCC | DDDD |
| EEEE |
The code below 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>Web Development Tutorials.com</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 code makes the table below with a caption.
| 1 | 2 | 3 | 4 |
The cellspacing attribute allows you to define the distance between cells in a table.
The code below 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>Web Development Tutorials.com</title>
</head>
<body>
<table border="1"
cellspacing="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<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 code above creates the tables below.
| First | Row |
| Second | Row |
| First | Row |
| Second | Row |
The frame attribute allows you to control the borders around a table.
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>Web Development Tutorials.com</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 code above makes the table below.
| First | Row |
| Second | Row |
The code 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>Web Development Tutorials.com</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 code above makes the table below.
| First | Row |
| Second | Row |
The code 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>Web Development Tutorials.com</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 code above makes the table below.
| First | Row |
| Second | Row |
The code 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>Web Development Tutorials.com</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 code above makes the table below.
| First | Row |
| Second | Row |
The code 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>Web Development Tutorials.com</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 code above makes the table below.
| First | Row |
| Second | Row |
The code 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>Web Development Tutorials.com</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 code above makes the table below.
| First | Row |
| Second | Row |
The code 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>Web Development Tutorials.com</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 code above makes the table below.
| First | Row |
| Second | Row |
The code 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>Web Development Tutorials.com</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 code above makes the table below.
| First | Row |
| Second | Row |
The code 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>Web Development Tutorials.com</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 code above makes the table below.
| First | Row |
| Second | Row |
