Beginner's Guide to XHTML
Wednesday 22nd June 2005 - Saturday 7th January 2006
Categories: Guides, Internet, Code
Tables
So far, we can create a web page, format the text a little and add images and hyperlinks. In this part, we will see how to display information in tables, along with a multitude of attributes that change the table's appearance.
Tables can be used to display information easily on a web page. In the past tables were used to layout the various parts of a page - this is now a bad practice to use in XHTML. This is the basic form of a table:
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
The <table> tags define the start and finish of the table. Each row of the table is between the tags <tr> and </tr>. Normally, each cell is defined by <td> tags, but on the first row we want to put headings in first by using the <th> tags instead. The example above would create a table of two cells by two cells. Here is an example that actually has data in it:
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>10 Pencils</td>
<td>50p</td>
</tr>
<tr>
<td>10 Pens</td>
<td>80p</td>
</tr>
</table>
That code creates this table:
| Item | Price |
|---|---|
| 10 Pencils | 50p |
| 10 Pens | 80p |
In the <th> tags, we should add an attribute: scope. For most tables, the value should either be row or col. This tells the browser what the heading applies to, helping the disabled to view your webpage. We should also add a summary to the webpage using summary="A summary." in the <table> tag. The modified code would look like this:
<table summary="A table showing the prices of various items">
<tr>
<th scope="col">Item</th>
<th scope="col">Price</th>
</tr>
<tr>
<td>10 Pencils</td>
<td>50p</td>
</tr>
<tr>
<td>10 Pens</td>
<td>80p</td>
</tr>
</table>
This tells the browser that the first column contains Items, while the second column contains Prices.
There are a number of other attributes that can be used.
You can set a caption for the table, which is normally similar to the summary, although perhaps not always as long. Simply use the attribute caption in the <table> tag. E.g. <table summary="A table showing the prices of various items" caption="Prices of various items">
Note: it is generally better to use CSS rather than XHTML to change the apperance of tables. However, the following presentational markup is stil valid.
You can also use the border="Number" attribute, although using style sheets is better (they will be covered in a different guide). For the rest of the example tables, all is the same apart from the table tag As such, only the table tag would be shown - writing it out in full might gobble up slightly too much space! This table has a border of 2:
<table border="2">
| Item | Price |
|---|---|
| 10 Pencils | 50p |
The width of the table is defined, somewhat predicatably, by the attribute width="Number". The number can either be a normal number, or a percentage. In this table, the width is 50%:
<table width="50%">
| Item | Price |
|---|---|
| 10 Pencils | 50p |
The cellpadding="Number" attribute tells the browser the gap between the border of each cell and the contents of the cell. This table has cell padding of 10:
<table border="2" cellpadding="10">
| Item | Price |
|---|---|
| 10 Pencils | 50p |
The cellspacing="Number" attribute tells the browser the gap between the each of the cell borders. This table has cell spacing of 5:
<table border="2" cellspacing="5">
| Item | Price |
|---|---|
| 10 Pencils | 50p |
Finally, we have the rules attribute. This tells the browser where to draw the lines on the table. The two main uses are rules="rows" and rules="cols".
<table rules="rows" border="2">
| Item | Price |
|---|---|
| 10 Pencils | 50p |
<table rules="cols" border="2">
| Item | Price |
|---|---|
| 10 Pencils | 50p |