Using Tables

Lesson 8

HTML tables are used when you need to display data or images in a tabular format. An example is shown below:
Mr. John Doe Software Developer Tokyo
Ms. Cara Wagner Integration Specialist London
Mr. Bruno Stevens WordPress Developer New York

Tables are created using <table> tag. Tables are divided into rows <tr> which contain cells <td>. <td> tags can contain text, images, tables or forms.

Let's start by creating a table.

  1. Double click the icon on your desktop to open ‘Notepad++’
  2. Click ‘File’ & ‘Close’ to close any files that appear. You should now see a blank document.
  3. Type the following code:

<!doctype html>
<html>
<head>
<title>Lesson 7 </title>
<head>
<body>
<table>
<tr> <td> cell one</td> <tr>
</table>
</body>
</html>

You should now have the following:

A simple table layout.
  1. Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
A simple table in the browser.

We have created a single cell table in this example. Lets now add further cells to this table.

  1. Close Internet Explorer so Notepad ++ is visible.
  2. Add the following code:

<!doctype html>
<html>
<head>
<title>Lesson 7 </title>
<head>
<body>
<table>
<tr> <td> cell one</td> <td> cell two</td> </tr>
<tr> <td> cell one</td> <td> cell two</td> </tr>
<tr> <td> cell one</td> <td> cell two</td> </tr>
</table>

  1. Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should see the following in your browser.
A three row table.

Applying a Border

While we have a table on our page, something is missing – a border.

  1. Close Internet Explorer so Notepad ++ is visible.
  2. Add the following code:

<!doctype html>
<head>
<title>Lesson 7 </title>
<head>
<body>
<table border="1">
<tr> <td> cell one</td> <td> cell two</td> </tr>
<tr> <td> cell one</td> <td> cell two</td> </tr>
<tr> <td> cell one</td> <td> cell two</td> </tr>
</table>
</body>
</html>

By using the border attribute we have placed a border around the table that is 1 pixel in size: <table border=”1”>

  1. Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should see the following in your browser.
A table with a border.

There is are a more organised way to display tables where the table header, table body and table footer are divided.

  • The <thead> tags groups the table header.
  • The <tbody> tags group the table body.
  • The <tfooter> tags group the table footer.
  1. Close Internet Explorer so Notepad ++ is visible.
  2. Add the following code:

<!doctype html>
<html>
<head>
<title>Lesson 7 </title>
<head>
<body>
<table border="1">
<tr>
<td> cell one</td>
<td> cell two</td>
</tr>
<tr>
<td> cell one</td>
<td> cell two</td>
</tr>
<tr>
<td> cell one</td>
<td> cell two</td></tr>
</table>
<br/>
<br/>

Another table:

<table border=”1”>
<thead>
<tr>
<th>header 1</th>
<th> header 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Pen</td>
<td>25</td>
</tr>
<tr>
<td>Books</td>
<td>40</td>
</tr>
<tr>
<td>other </td>
<td>35</td>
</tr>
</tbody>
</table>
</body>
</html>

  1. Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should see the following in your browser. You should now see the following:
A table with a border.

Applying Width and Height to Tables

Width and heights can be applied to our table as well as the cells within the table cells. These can be applied using the ‘width’ and ‘height’ attributes within the table tag. Values can set in pixels or percent.

  1. Close Internet Explorer so Notepad ++ is visible.
  2. Add the following line to your <table> tag: <table border=”3″  width=”300″ height=”300″ >
  3. Your code should now look like this:

<!doctype html>
<html>
<head>
<title>Lesson 7 </title>
<head>
<body>
<table border="1">
<tr>
<td> cell one</td>
<td> cell two</td>
</tr>
<tr>
<td> cell one</td>
<td> cell two</td>
</tr>
<tr>
<td> cell one</td>
<td> cell two</td></tr>
</table>
<br/>
<br/>

Another table:

<table border="3"  width="300" height="300" >
<thead>
<tr><th>header 1</th>
<th> header 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Pen</td>
<td>25</td>
</tr>
<tr>
<td>Books</td>
<td>40</td>
</tr>
<tr>
<td>other </td>
<td>35</td>
</tr>
</tbody>
</table>
</body>
</html>

  1. Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should see the following in your browser. You should now see the following:

Note how the table now has a fixed width and height of 300 pixels.

An advanced table layout
An advanced table layout.

Take me to the next lesson 'HTML Forms'

Scroll to Top
Scroll to Top