Lecture demo: lists and tables

 

Part I. Lists

1. Download nestedlist_0.html and open it in Notepad++.

2. Mark-up a nested list: one <ul>, another <ol>.

3. Launch in Firefox.

4. Attach liststyle.css: 

<link rel="stylesheet" href="liststyle.css">

5. See different list styles.

More list styles at: http://www.w3schools.com/cssref/pr_list-style-type.asp

File to check the results: nestedlist.html

 

Part II. Tables

1. Download file table_time_0.html and open it in Notepad++.

2. Create table with 3 rows and one column.

3. Download file monsters_0.html.

4. Mark-up tabular data.

5. Add <thead>, <tbody> and <tfoot>

6. For the first header row, make it span two columns.

7. Attach file tablestyle.css:

<link rel="stylesheet" href="tablestyle.css">

8. Download file table.html and open it in Notepad++.

9. For the first column of the last data row, make it span two rows.