TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Tables in HTML

Page 1 of 6


Tables are essential in presenting information and even creating some web page layouts. There are three basic tags used for creating tables:

    • 
<table>
to declare the table contents
    • 
<tr>
to declare a new row in the table
    • 
<td>
to declare each cell inside a row


These three tags must be nested in that exact order. 
<td>
's inside 
<tr>
's, and 
<tr>
's inside the main 
<table>
tag.

So, to create a table with 3 rows and 2 columns, we use the following code: 

<table border="1">
	<tr> <td>Cell 1</td> <td>Cell 2</td> </tr>
	<tr> <td>Cell 3</td> <td>Cell 4</td> </tr>
	<tr> <td>Cell 5</td> <td>Cell 6</td> </tr>
</table>


This will create a table like:
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6

Note that I am using the border attribute to specify a border width of 1 pixel, this way you can see the structure of the table in our example.

  1. Create a new XHTML document (remember, you must include the 
    <!DOCTYPE>
    declaration and the 
    <html>
    , 
    <head>
    , and 
    <body>
    sections) and write inside the <body> section: 
    <table border="1">
	<tr> <td>Cell 1</td> <td>Cell 2</td> </tr>
	<tr> <td>Cell 3</td> <td>Cell 4</td> </tr>
	<tr> <td>Cell 5</td> <td>Cell 6</td> </tr>
</table>
  2. Test your file in your browser.
You just created a table like the one above, with 3 rows and 2 columns.
  1. Now try with: 
    <table border="1">
	<tr> <td>Cell 1</td> </tr>
	<tr> <td>Cell 2</td> </tr>
	<tr> <td>Cell 3</td> </tr>
	<tr> <td>Cell 4</td> </tr>
</table>
  2. Test your file in your browser.
This one is a table with 4 rows, but only 1 column.
  1. Also try: 
    <table border="1">
	<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
</table>
This table has only 1 row and 3 columns.

The logic in creating basic tables is pretty easy to catch once you have practiced with two or three examples, isn't it?
Are you ready to do it on your own?

  1. Create a table with 6 rows and 2 columns.
  2. Create a table with 2 rows and 5 columns.

Table border

You can set the border width to any number of pixels you want. If you set the border attribute to "0" or if you just don't write the border attribute at all, you will have no visible border in your table.
Test each one of the following border values on a table: 
<table border="1">
  <tr>...
<table border="10">
  <tr>...
<table border="0">
  <tr>...
<table>
  <tr>...

Are you ready? Follow through the next pages of this tutorial!

More pages of this tutorial → Tables in HTML  123456>
Comments & Questions