1  2

 
Creating a simple table on your web page

This tutorial shows you how to create a simple 2-column, 7-row table using a basic text editor, such as Notepad or Simpletext. Although many web editors automate the process of creating a table, it is useful have a basic knowledge of the underlying code.

 Set the table properties

Open an empty table on your web page by entering the following:

<table width="300" align="center" border="1" bgcolor="#FFF1D5">

The table properties are set as follows:

 Add the heading row

Create the first row of your table by entering the following immediately after your <table> tag:

<tr bgcolor="#FFD784">
<td width="20%"><b>Year</b></td>
<td width="80%"><b>Musical</b></td>
</tr>

The heading row uses a different background colour to the rest of the table. The first column is set to 20% of the entire table width, and the second column to 80%.

Note: You can set the background colour for individual cells as well as for the row as a whole, for example, by specifying <td bgcolor="#FFB824">.

  Add more rows

Enter the following after the heading row:

<tr>
<td width="20%"> 1996</td>
<td width="80%"> Showboat</td>
</tr>

<tr>
<td width="20%"> 1997</td>
<td width="80%"> West Side Story</td>
</tr>

<tr>
<td width="20%"> 1998</td>
<td width="80%"> The King and I</td>
</tr>

<tr>
<td width="20%"> 1999</td>
<td width="80%"> Grease</td>
</tr>

<tr>
<td width="20%"> 2000</td>
<td width="80%"> Fiddler on the Roof</td>
</tr>

Note: There must be a consistent number of cells in each row. However, you can overcome this limitation by using the colspan property as illustrated in the next step.

  Add a footer row

Add a footer row that spans the two columns by entering the following after the last row of the table:

<tr>
<td colspan="2">And many more to come...</td>
</tr>

  Close the table

End your table using the following tag:

</table>

  Save and view

Save your file, and preview it in your browser. The table should display like this: