Tables
Tables are very easy to use and can be very useful for representing all different types of information in a structured way.
The tags for this are: <table>...</table>
This would create a table but it has no border. If a border is wanted or required then the border must be added to the table tags. Like so :
<table border>...</table>
The table would then have a border. These tags, with or without the border, must go on the outside of all the data that is entered into the table.
Rows
When creating a table it needs to have a certain amounts of rows to hold the data in. Although a table also needs columns, they are not needed in defining the size of the table, instead the number of columns is determined by the amount of data in each row.
The tags for this are: <tr>...</tr>
Cells
Cells are where the information is individually kept in the table. It is divided into the rows and then columns are created with the amount of data in the different cells.
The tags for this are: <td>...</td>
So with 3 rows and 2 columns it would be set out like this, with a border:
<table border>
<tr>
<td>Simon</td>
<td>Melissa</td>
</tr>
<tr>
<td>Joe</td>
<td>Hayley</td>
</tr>
<tr>
<td>Callum</td>
<td>Scarlett</td>
</tr>
<table>
Which would look like this:
| Simon | Melissa |
| Joe | Hayley |
| Callum | Scarlett |
Captions
If the table requires a title or header then a 'caption' can be used.It will be placed above the first row. This can be good to use to give the table more meaning.
When using the table above we can add the caption 'Names' like this:
<table border>
<caption>Names</caption>
<tr>
<td>Simon</td>
<td>Melissa</td>
</tr>
<tr>
<td>Joe</td>
<td>Hayley</td>
</tr>
<tr>
<td>Callum</td>
<td>Scarlett</td>
</tr>
<table>
Which would look like this:
| Simon | Melissa |
| Joe | Hayley |
| Callum | Scarlett |
Table Headings
These headings will physically be placed in the table in the first row. They are still in the row tags <tr>...</tr> but must be put first to ensure they are at the top of the table.
The tags for this are: <th>...</th>
Again using the table above we can add the headings 'Boys' and 'Girls' like this:
<table border>
<caption>Names</caption>
<tr>
<th>Boys</th>
<th>Girls</th>
</tr>
<tr>
<td>Simon</td>
<td>Melissa</td>
</tr>
<tr>
<td>Joe</td>
<td>Hayley</td>
</tr>
<tr>
<td>Callum</td>
<td>Scarlett</td>
</tr>
<table>
Which would look like this:
| Boys | Girls |
|---|---|
| Simon | Melissa |
| Joe | Hayley |
| Callum | Scarlett |
Controlling Text with Tables
If you would like to have more control over text, it can be put into a table. When this is done the text does not wrap (move down and underneath other text) if the webpge is minimised. Instead a scroll bar is introduced as the links stay where they are when in a table, and the page needs to be moved to access the hidden text when the page is minimised. This is not necessary but is preferred by some people.
This is the end of this section, you can continue to the next section or try the exam to test your knowledge.
click here to attempt the exam now
