Sometimes you need one item of data to take up more columns in a table.  For example the total from our table is one cell where all the other rows have three. 

To see this problem you need to see the borders of the cells.  If you do not already have borders around your table cells go to the top of table.html in your editor and inside the head element add this:

<style type="text/css">
    td {
        border-width:1px;
        border-style:solid;
        border-color:rgb(0,0,0);	
    }
  	    	
    th {
  	border-width:1px;
  	border-style:solid;
  	border-color:rgb(0,0,0);
    }
</style>

Try the page again in the browser and you should see this:

The cells in a table with borders showing a problem

Change this in your editor:

<td>3</td>

to this:

<td colspan="3">3</td>

The page should now look a little better with the cell now filling the row.  Maybe it would look even better if you centre aligned the text?  Try that using the embedded stylesheet you just pasted at the top of the page.

The colspan attribute means Make this cell take up the space for three cells.

Rowspan

You can do exactly the same with cells over more than one row (so the take up more space vertically).