List and Table Handling – ordered/unordered lists and tables

Hello students, welcome to Kwickprep. Your school timetable is a table, and your shopping list is a list. How do we show both on a web page? Today we will learn ordered lists, unordered lists, description lists, and tables in HTML.

HTML has three kinds of lists. An unordered list uses the ul tag, and its items show bullets, because order does not matter. An ordered list uses the ol tag, and its items show numbers or letters, because order matters. A description list uses the dl tag, and it shows a term with its meaning.

Here is an unordered list of things to carry to school. The ul tag starts the list and closes it. Each item goes inside the li tag, short for list item. The browser shows a bullet, a small dot, before each item.

You can change the bullet shape with the type attribute. Type disc gives a filled circle, which is the default. Type circle gives a hollow circle. Type square gives a small filled square. Modern pages usually set this with CSS, but textbooks still teach the type attribute.

When the order matters, use an ordered list with the ol tag. Here are the steps of a morning routine. Items still go inside li tags. The browser numbers them one, two and three by itself.

The ordered list has two useful attributes. Type one, the default, gives normal numbers. Type capital A or small a gives letters. Type capital I or small i gives Roman numbers. The start attribute sets the first number, so start equals five begins counting at five.

Pause and predict. The ordered list has type capital A and start equals three. It has two list items. What labels will they get? The start value is always a number, so three means the third letter. The items get C and D.

A description list shows terms with their meanings, like a glossary. The dl tag holds the whole list. The dt tag holds the term, here CPU. The dd tag holds its description, shown slightly indented. Also remember, a list can be placed inside an li of another list. This is called a nested list.

Now, tables. A table arranges data in rows and columns, like a timetable. The table tag holds the whole table, and border equals one draws lines. The tr tag makes one table row. The th tag makes a heading cell, shown bold and centred. The td tag makes a normal data cell.

Let us list the table tags together. The table tag makes the whole table. Tr, table row, makes one row. Th, table heading, makes a bold header cell. Td, table data, makes a normal cell. Caption gives a title, and it is written just after the opening table tag.

Your textbook teaches these table attributes. Border sets the thickness of the lines. Cellpadding is the space between a cell's text and its edge. Cellspacing is the gap between two cells. Width sets the size, in pixels or percent. Bgcolor sets a background colour. Modern pages do this with CSS, but these attributes still work in browsers.

Sometimes one cell must cover more than one column. The colspan attribute joins cells across columns. Here, the heading Marks spreads over two columns. In the same way, rowspan joins cells down across rows. Rowspan equals three makes one cell three rows tall.

Students often mix up these two, so here is a simple rule. Colspan makes a cell spread sideways, across columns. Rowspan makes a cell spread downward, across rows. The merged cell takes the place of the cells it covers, so write fewer td tags in those rows. Count the cells in every row to check that your table is correct.

How do you choose? Steps of a recipe need an ordered list, because the order matters. Things to pack for a trip need an unordered list, because any order is fine. Marks of many students in many subjects need a table, because the data has rows and columns.

Let us revise what we learned today. Ul gives bullets and ol gives numbers, and every item goes in an li tag. For ol, type and start change the numbering. Dl, dt and dd make a description list. Table, tr, th and td build a table. Colspan joins cells across columns, and rowspan joins cells across rows. Now build your own class timetable as an HTML table.