Tables

The HTML code before adding the tableSave media.html as table.html.  Delete everything inside the body element apart from the main heading.  Change the main heading and the title to HTML tables.  Just in case something has gone wrong with previous versions of your pages check what is left against this screenshot.  Your page might be slightly different in layout but the order of the elements should be the same:

Tables are horrible to construct at first but they are very useful.  Follow these steps and it should be OK:

  1. type in the opening table tag under the h1 heading and indented by the same amount
  2. under that put a couple of blank lines and then put the closing /table tag.
  3. on the first blank line between those two type an opening tr tag (indented by one extra tab)
  4. on the other blank line put a /tr to close the table row element
  5. put a blank line between the two tr lines and indent once more than the tr tags
  6. on that blank line put opening and closing table data tags td and /td
  7. copy that line and paste it twice on new lines below the original (but still before the /tr)
  8. inside the first td element put apples
  9. inside the second td element put 1Kg
  10. inside the third td elements put 80p
  11. copy the whole tr element and it's contents (the three td elements)
  12. make a new blank line after the /tr tag and paste the second tr element there
  13. do that again so you now have three tr elements with the same td elements in each one

Save and view and it should look like this:

The table in a browser

Headings

Tables make more sense with headings.  Insert two new lines above the first tr tag.  Put a new tr element on those two lines.  Inside that element put three new lines with th and /th tags to make a table heading element for each column in the table.  Add one heading into each td element.  Now it should look like this:

The table with headings

Look at the code for the table and you should understand the fact that you need a tr for each row.  Inside each row are some td or th elements and they make the columns.  You need the same number of td elements on each row to make the columns match up.  Try adding an extra td to just one row to see what happens (or delete one).  Then undo that so the table is correct again.

Change the text inside the last two rows to:

When you save and view you may find the currency symbols do not work correctly.  Try the page in other browsers and you may find it works in some but not others.  You will soon learn to fix this.