Computers: HTML: Tables

By the end of the previous stage, your web site had lots of words, and its first picture:

Stage 3b: Some more text about the pictureindex.html (3b): Click to see the page, or the code.

A heading for your table

Let's start by creating a heading above your table. After <p>Stunning, isn't it?</p>, and before </body>, insert:

<h2 id="factsheading">Lamppost fact-file</h2>

Once again, you'll notice that this tag has an id attribute to indicate its purpose: you can add these anywhere.

Stage 4a: A subheading for a tableindex.html (4a): Click to see the page, or the code.

A table with one row

Now to add the table itself. Add this immediately below the <h2 id="factsheading">Lamppost fact-file</h2> heading you put in above:

<table id="facttable">
<tr><td>UK</td><td>3,283,385</td><td>12.7</td><td>London has some of the most scenic lampposts in the world!</td></tr>
</table>

These lines contain three pairs of tags you haven't seen before. Their use is quite simple:

<table> marks the beginning of the whole table, and </table> the end.

<tr> marks the beginning of each table row, and </tr> the end.

<td> marks the beginning of each table detail or cell, and </td> the end.

So, here we have one table (with an id of "facttable"), which contains one row, which contains four 'details' or cells.

Stage 4b: The first row in the tableindex.html (4b): Click to see the page, or the code.

Adding rows

Building the table is now largely a matter of simply adding more rows. Below the row you added above, add:

<tr><td>France</td><td>3,092,161</td><td>14.0</td><td>The French have been closing the cross-channel lamppost gap in recent years.</td></tr>
<tr><td>USA</td><td>17,376,998</td><td>22.7</td><td>The US retains overwhelming global lamppost superiority.</td></tr>

Now the table has three rows.

Stage 4c: Two more rows in the tableindex.html (4c): Click to see the page, or the code.

Adding column headings

Of course, the problem with this table is that it is difficult to know what the information inside it means. Ok, UK and France are easily recognisable, but what does the UK have 12.7 of that the French have 14 of, and has the government been alerted?

To add meaning, each column really needs a header. Immediately below <table>, add this line:

<tr><th>Country</th><th># lampposts</th><th>Tallest lamppost (m)</th><th>Comments</th></tr>

So adding a row of column headings is very like adding an ordinary row of 'detail' cells, except that the <td>...<td> tag pair is replaced by <th>...<th>, standing for table headers.

By the way, all the information in this table has been made up, so please do not take offence if your nation has been misrepresented or (worse still) excluded altogether. If you feel strongly about such things, you may also enjoy being annoyed by an essay in favour of the abolition of all nations called Imagine....

Also, please do not be too surprised if, in about a year, you see someone quoting a figure of 17,376,998 for the number of lampposts in America. The web is a strange and shadowy world, where information offered as a joke on one page becomes authoritative information on another.

Stage 4d: Table column headingsindex.html (4d): Click to see the page, or the code.

Now, turn to 5 lists to find out how to add lists of information to your pages.