Building a Web Page
HTML lists and tables
Read an HTML list or table, count its items, rows and cells, and say which of its tags sits inside which.
Lists and tables are both built out of nested tags: an outer tag says what kind of thing you are making, and the tags inside it mark its separate pieces. HTML gives you two kinds of list — one whose items are drawn with bullets against them, one whose items are numbered — and a table, whose pieces come in two layers, because a table is made of rows and a row is made of cells.
Close the inner one first
Tags nest like boxes inside boxes, and the box you opened last is the box you have to close first. Crossing them over — closing an outer tag while something inside it is still open — is not something a browser can make sense of, because there is no arrangement of real boxes it could describe. Reading a snippet from the left and keeping a list of what is still open is the way to check one.
Worked example
Read this list: <ul><li>Ants</li><li>Bees</li><li>Moths</li><li>Wasps</li><li>Beetles</li></ul>
Find the outer tag. It is <ul> at the front, closed by </ul> at the very end.
Everything between those two belongs to this list and nothing outside them does.
Have a play
Every cell of this table has a name — find out what each one is called. Notice that the name says which row first, and only then how far along.
Tap any part of the picture.
Try it together
Now work out the shape of this table together: it is written with three row tags, and each row holds four cell tags.
Take the rows and the cells one question at a time.
1.How many rows does the table have?
Have a go
Have a go on your own. How many cells does this table hold: “<table><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td><td>g</td><td>h</td></tr></table>”?
Ready to practice?
Eight questions on what you have just read. Nothing is timed, and you can play as many times as you like.