Unit 4 - Tables

To create a table you use the <table> tag. Inside the table tag there is one property called "border". This controls the thickness of the table borders.

For each row, you use <tr> and </tr>.

For each individual cell within a row you use <td> and </td>. For cells that serve as headers for columns, use <th> instead of <td>.

An example follows:

<table border="1">

    <tr>

    <td> This is the first cell </td>

    <td> This is the second cell </td>

    </tr>

    <tr>

    <td> This is the third cell </td>

    <td> This is the fourth cell </td>

    </tr>

</table>

The code above will result in the following:

If you wish to add a header row to your table, you should use <th> instead of <td>.

Task 1

Create a table that will list your parents and siblings and their ages; the header row will say "name" and "age".

To resize the table, you can specify the width property. An example follows:

<table border="1" width="50%"> 

Another way to do this is by setting the width using absolute numbers, such as pixels. This way is depreciated now:

<table border="1" width="50px">

To add a caption (title) to your table, use the <caption> tag.

<table border="1">

<caption>My family members and their ages</caption>

<tr>

....

For more on tables, please see the w3schools HTML tables page or the HTML Dog tutorials on tables.

Task 2

Make a table that will look like this:

For this, you will have to use the colspan and rowspan attributes in the corresponding <td> and <tr> cells. For more on how to use these two attributes, please see the w3schools tutorial on this.

An example of this follows (the first row of the table above):

 <table border="1">

    <tr>

    <td colspan="3">   Some text that spans across three columns </td>

    </tr>

    <tr>

    <td>1st cell</td>

    <td>2nd cell</td>

    <td>3rd cell</td>

    </tr>

    </table>

For spanning vertically, you use the rowspan attribute. An example of this:

 <table border="1">

    <tr>

    <td rowspan="3">   Some text that spans across three rows </td> <td>2nd cell</td>  <td>3rd cell</td>

    </tr>

    <tr>

    <td>2nd cell</td>  <td>3rd cell</td>

    </tr>

    <tr>

    <td>2nd cell</td>  <td>3rd cell</td>

    </tr>

    </table>

Task 3:

Create a table where you will list the different subject you are taking this year as well as the names of the teachers that teach you these subjects. Your table must have at least 4 rows, including the header row (don't forget to use the <th> tag for the header row cells). Set the table title using the <caption> tag. Please, save your document.

An example follows: