Build your own Website:  Session 2      

---

What else do you want in your web pages apart from normal text?  Two common requirements are a List and a Table.  A list is one-dimensional — just a list of items one above another.  A table is usually two-dimensional — a grid, such as you get in a spreadsheet.

Lists

<b>Purchase instructions</b>
<ul>
  <li>Fill in your details</li>
  <li>Click the <b>Submit</b> button</li>
  <li>Your goods will be delivered within five working days</li>
</ul>This will be displayed something like:The bullets and spacing won't be exactly like that — I'm using a style sheet which specifies these things.  I'll come on to that later, so be patient.  Remember: content first, layout second.

WebEdit lets you right-click on your text and then select List from the popup menu to generate the skeleton, just to save some typing.  In fact if you just type the list as a series of lines and highlight the block before using this option, the highlighted block will be transformed into a list.

You can leave out the </li> tags which close each list item but I don't see the point, so WebEdit will put them in automatically, and there's an option to let you know that it has done this, in case you didn't write what you meant to write.  Of course you could create a list just using <br> tags, but this way the whole thing is indented which makes it much clearer.  And I would argue that if it's a list you should say it's a list — I'll return to the subject of “Telling it like it is” later.

You can change UL to OL to give an ordered list, which means it will automatically number the list items — by default using conventional numbers:

You can have a list within a list:<b>Purchase instructions</b>
<ol>
  <li>Fill in your details</li>
  <li>Choose your card:
    <ul>
      <li>Visa</li>
      <li>Mastercard</li>
      <li>American Express</li>
    </ul>
  </li>
  <li>Your goods will be delivered within five working days</li>
</ol>which will be displayed as:Notice that the inner <UL> is within a <LI> — you can't have<b>THIS IS WRONG</b>
<ol>
  <li>Fill in your details</li>
    <ul>
      <li>Visa</li>
      <li>Mastercard</li>
      <li>American Express</li>
    </ul>
  <li>Your goods will be delivered within five working days</li>
</ol>

You can use your own image instead of the bullet, and you can even have a different image for lower-level lists (using CSS) — see compose.htm#Format for an example.  There are other options, but you can look those up if you want to.  A list acts like a paragraph — there's a blank line after it — so you don't need to do any further linebreaks yourself.

Tables

Table are a lot more powerful, with a lot more options — and more ways of doing them wrong, in which case you may have to study the code very closely to see what's going on.

Originally people used tables for absolutely everything connected with layout.  For instance they would use a table within a table to give a two-colour border (such as pink within red) around a block of text, or use tables to produce a menu down the left and the body of the page on the right.  Now that CSS is available there's no need to do that, and there's been a reaction against tables — some people crusade with religious fervour against any use of tables.  That's silly.  If your data really is tabular, a table is the best way of displaying it!

Let's start with a very simple table.  You build a table just as you write a letter — you write the first line (row) from left to right, then the second, and so on.<Table>
  <TR><TD>11.00-11.50</TD><TD>First session</TD></TR>
   <TR><TD>11.50-12.10</TD><TD>Tea break</TD></TR>
  <TR><TD>12.10-13.00</TD><TD>Second session</TD></TR>
</Table>which will be displayed (depending on your browser) something like:

By default there's no border, but you can add one, in which case you'll probably want a little spacing between the lines and the text.  Here it is with Border=1 and Border=2 added to the Table tags:

  How did I get the two tables to display side-by-side?  By using a third table to contain them both.  And how did I put in the spacing between the two tables?  By having three sets of <TD> … <TD>  tags.  The middle one could contain &nbsp; &nbsp; &nbsp; or I could specify <TD Width=20> to do a similar job.

You might want a header row at the top (or bottom) of your table, so instead of <TD> you use <TH> which in any browser I've tried makes the font bold and centres the text.  Here's an example with the addition of<TR><TH>Time</TH><TH>Activity</TH></TR>

Yes, you could do all sorts of exciting things with border colours, background colours, three-dimensional border styles… but you may then find that each of your tables looks different as the site develops, and the whole thing becomes a mess!  So let's leave all that until we come to CSS, where we can specify the layout for all the tables in one place.

  Exercise

Write HTML to produce the following:

Ready Steady Go!

Ready Steady Go!

There are many other options for Tables.  Some are better done in CSS, so I'll try to cover that later.  One that you probably will need is an element that spans more than one column (or row).  To span two columns, instead of just <TD> you say <TD ColSpan=2>.  Suppose for instance you wanted to produce the following menu:

I would start by working out the total number of rows and columns.  WebEdit has a right-click option Table which will save you a lot of typing — it generates a skeleton table with the specified number of rows and columns — the first row being a header row — and then you fill in the text (and in this case use various ColSpan attributes).

<Table Border=1>
  <TR>
    <TH ColSpan=6>Evening Meal</TH>
  </TR>
  <TR>
    <TD ColSpan=2>Starter</TD>
    <TD ColSpan=2>Main Course</TD>
    <TD ColSpan=2>Dessert</TD>
  </TR>
  <TR>
    <TD>Mushrooms</TD>
    <TD>V</TD>
    <TD ColSpan=2>Plaice</TD>
    <TD>Fruit Salad</TD>
    <TD>V</TD>
  </TR>
  <TR>
    <TD ColSpan=2>Prawn cocktail</TD>
    <TD>Pizza</TD>
    <TD>V</TD>
    <TD>Ice-cream</TD>
    <TD>V</TD>
  </TR>
</Table>

  Exercise 2.1 — click the link, then right-click and choose “View Source” from the pop-up menu to see the solution.

If you were writing a program to run on the server you could generate the table dynamically and populate it with values from a database, but that's another course!

Something you might like to use is a Caption tag, which (by default) displays a caption above the table (it's not within the tabular layout) and comes immediately after the Table tag:

<Table>
  <Caption>Evening Meal</Caption>
  ---

Another option that you might need is when you have a table with two columns of different heights.  Browsers will align the middle of the shorter one with the middle of the longer one, whereas I would prefer the tops to be aligned.  To do this you need <TD VAlign=top> (or the CSS Vertical-align: Top).

If the data really is a table — in other words each column means something and probably has a heading — for heaven's sake use a table for it and stop messing about!  On the other hand, if it's just a block of elements you might want to use a different approach.  Suppose you have a page of thumbnails each holding a small photo, each one square but with a landscape or portrait photo within it, and the user can click a photo to be shown a full-size version of it.  That's not actually a table; the columns don't mean anything; it's just a whole lot of things put together.  The problem with using a table is that you have to specify how many columns it contains — and you don't know that because you don't know how big the user's screen area is.  You can assume a minimum width (though I had to rethink this once smartphones came on the scene), but then you're wasting space if he's actually using a higher resolution.  This is where you really do want to use CSS, and I might come to it later though probably not.  You can see an archived example at web.archive.org/web/20180902092203/http://availableplumber.co.uk/photos.htm — change the size of your browser window and see how the content adapts to it, though I don't think you can click on the photos in this archived copy.

---

  Homework for this session: Add some lists and tables to the web pages you created last week.  Try out some of the options I've mentioned in the notes.