Lesson Nine

Simple table
Item Cost
thing 20
nothing 10
Total 30

That's the textbook way to create a table and to lay out the code for it, but you can cut a few corners:-

Simple table
ItemCost
thing20
nothing10
Total30

The problem with cutting corners in this way is that it may make your table less accessible to blind people: they depend on the machine reading everything out to them, and it may have difficulty describing what the different parts of the table are if they are not labelled as the head, body and foot. It is also possible that some browsers will be confused if you cut corners and they may fail to display your tables properly. I do, however, prefer to clump the data in my tables into a small space rather than spreading things out because it lets me see more of the file on the screen at the same time. The table(s) above are rather cramped, but there is a way to create more space in them:-

Simple table
ItemCost
thing20
anything50
nothing10
Total80

This sets the width of the table to a percentage of the width of the screen, but because the width of screens varies from one machine to the next, you can't know what it will look like on different computers. The alternative way to set the width is to use a number between quotes to give the width in pixels:-

Simple table
ItemCost
thing20
anything50
nothing10
Total80

It is also possible to set widths for individual columns instead:-

Simple table
ItemCost
thing20
anything50
nothing10
Total80

Notice what happens if you don't set a border size (or if you set it to zero):-

Simple table
ItemCost
thing20
anything50
nothing10
Total80

And what happens if you set it to 10:-

Simple table
ItemCost
thing20
anything50
nothing10
Total80

It is possible to do more exotic things with tables, but they're usually rather ugly so it's best to keep things simple: if you spot something on a Web page which you would like to know how to do, you can always go into the source code and just copy the method used there. If you want to allow a visitor to your Web site to highlight items in a table and to generate a running total of the cost of the highlighted items, you will need to learn how to program in JavaScript.

One more important pair of tags is <pre> and </pre>: these can be used to change the format of the area between them to make all letters/characters exactly the same width so that you can create simple text diagrams and be sure that everything will line up correctly on any computer using any browser:-


                                               you
                                                |
                                               own
                                                | 
                               boy - broke - window
                                |
                               has
                                |
                     I - AM - uncle
This is the SVO-Network representation of the sentence "I'm the boy who broke your window's uncle" (ie. I'm the uncle of the boy who broke your window).

An alternative to <pre> is <code> or <tt>, which allow you to use fixed pitch text without starting a new paragraph at the same time: some of the arithmetic pages on this site take advantage of this.