Lesson 3
Lists and Tables
In this lesson, you will look at two important ways content can be structured in web pages: lists and tables.
Lists
Lists are common to anyone who has worked with word processing tools such as Microsoft Word: They are the bulleted and numbered lists that are used for capturing a sequence of points. HTML lists are very similar to these lists. In this section, I introduce the three types of list provided by HTML.
Unordered lists
Unordered lists are used to create the familiar set of bullet points seen in Word documents. In order to create an unordered list, a set of li elements is placed inside an ul element. li stands for “list item,” while ul stands for “unordered list.”
The following is an example:
If you save this in an HTML file and open it in Chrome, it will display like the example in Figure 3.1.
The li tag is self-closing, so I have omitted the ending tag. Obviously, this could have been included without affecting the display of the list.
Although unordered lists are simple, once they are combined with CSS, they can become very powerful. Whenever you see a horizontal list of navigation links at the top of a web page, there is a good chance that they were created from an unordered list.
Ordered Lists
Ordered lists are identical to unordered lists, except they use the ol tag rather than the ul tag. The only visual difference between the two lists is that ordered lists are numbered:
Figure 3.2 illustrates how this displays.
Any element can be used as the content for an li tag; thus, it is possible to nest lists within lists. The following example lists an unordered list inside an ordered list:
The result of this can be seen in Figure 3.3.
Description Lists
Description lists are probably the least used type of list. They are a type of list where each entry captures a name-value group. Each group in turn consists of one or more names, followed by one or more definitions. Consider the following list, which captures information about the drinks served by a cafe:
This list contains two groups: coffee and tea. Each group then consists of a set of beverages relating to that group. You can see the result of this in Figure 3.4.
Definition lists were originally specified purely in terms of terms and definitions. The HTML5 standard broadens the suggested uses of definition lists and encourages you to think in terms of groups with names and values.
Tables
Tables are a more complex structure than lists and support the familiar notion of rows and columns.
Throughout the course of this book, you will write a web application from scratch, and this web application will utilize a table. The web application will perform basic Customer Relationship Management (CRM) capabilities; in particular, it will keep track of a set of contacts and the last date they were contacted.
In order to start this web application, create a folder somewhere on your file system called CRM. This will hold all the files needed by the web application.
Next, add a file called contacts.html to this folder, and populate it with the basic HTML5 template outlined in Lesson 1.
You will now create a table in the body of the web page for capturing the following information:
● Contact name
● Phone number
● Email address
● Contact's company
● Date last contacted
To start, begin by creating an opening and closing table tag in the body of the web page:
HTML tables are row orientated: You add one row at a time using the tr (table row) element and provide values for all the relevant columns. The rows can either be added to the header, body or footer of the table. Add the following inside the table element:
The row in the thead element contains five children of its own: These th (table heading) elements are the individual cells in the row of the table.
Next, you will add two rows to the body of the table. The body of the table is encapsulated in a tbody element. The individual cells in the body use the td (table datum) element rather than the th element. Add the following after the end of the thead element:
Next, you will add a footer row to the table. The footer will simply state how many rows are in the table; thus, it only needs to occupy a single cell. This presents a dilemma because you want all the rows in the able to have the same number of columns. The solution to this is to utilize the colspan attribute with the td element to specify that a single td spans multiple columns. Add the following after the end of the tbody element:
Finally, you will add a caption for the table. This can be added anywhere in the table, provided it is a direct child of the table element itself:
The complete web page should now look as follows:
If you open the page in Chrome, it should display as you see in Figure 3.5.
You will notice that the columns in the table have sized themselves according to the data that has been added to them, but the last row in the table spans column boundaries.
Technically, you could have avoided using the thead, tbody, and tfoot tags, and just wrapped every row in a tr element directly within the table element. There are, however, a number of reasons why it is worth adding the extra structure to