# HTML Lists and Tables Lists and tables are used to organise and display information on a webpage. Lists are useful for displaying related items, while tables are useful for displaying data in rows and columns. --- ## Unordered Lists An unordered list displays items using bullet points. ```html ``` Result: - HTML - CSS - JavaScript --- ## Ordered Lists An ordered list displays items using numbers. ```html
  1. Plan the website
  2. Create the HTML
  3. Add CSS styling
``` Result: 1. Plan the website 2. Create the HTML 3. Add CSS styling --- ## Nested Lists Lists can be placed inside other lists. ```html ``` Result: - Web Development - HTML - CSS - JavaScript --- ## Definition Lists Definition lists are useful for displaying terms and descriptions. ```html
HTML
Creates webpage content.
CSS
Controls appearance and styling.
``` Result: [![](https://mr.napper.au/uploads/images/gallery/2026-06/scaled-1680-/image-1781436252459.png)](https://mr.napper.au/uploads/images/gallery/2026-06/image-1781436252459.png)
HTML
Creates webpage content.
CSS
Controls appearance and styling.
--- ## Creating a Table Tables display information in rows and columns. ```html
Name Score
Sam 90
``` Result: | Name | Score | |--------|--------| | Sam | 90 | --- ## Understanding Table Elements Tables are made up of: | Element | Purpose | |----------|----------| | `` | Creates the table | | `` | Creates a row | | `
` | Creates a heading cell | | `` | Creates a data cell | --- ## Adding Multiple Rows ```html
Name Score
Sam 90
Alex 85
Jess 95
``` Result: | Name | Score | |--------|--------| | Sam | 90 | | Alex | 85 | | Jess | 95 | > **Screenshot Placeholder** > > Insert screenshot showing a table with multiple rows. --- ## Adding Borders Tables often use CSS for styling. ```html
Name Score
Sam 90
``` Result: A table with visible borders. [![](https://mr.napper.au/uploads/images/gallery/2026-06/scaled-1680-/image-1781436313967.png)](https://mr.napper.au/uploads/images/gallery/2026-06/image-1781436313967.png) --- ## Merging Columns Use `colspan` to combine columns. ```html
Student Results
Sam 90
``` Result: [![](https://mr.napper.au/uploads/images/gallery/2026-06/scaled-1680-/image-1781436364355.png)](https://mr.napper.au/uploads/images/gallery/2026-06/image-1781436364355.png) --- ## Merging Rows Use `rowspan` to combine rows. ```html
Year 10 Sam
Alex
``` [![](https://mr.napper.au/uploads/images/gallery/2026-06/scaled-1680-/image-1781436405953.png)](https://mr.napper.au/uploads/images/gallery/2026-06/image-1781436405953.png) --- ## Complete Example ```html Lists and Tables

Lists and Tables

Favourite Subjects

  • Digital Technologies
  • Engineering
  • Science

Student Results

Name Score
Sam 90
Alex 85
``` --- ## Quick Reference ### Unordered List ```html
  • Item
``` ### Ordered List ```html
  1. Item
``` ### Definition List ```html
Term
Description
``` ### Table ```html ``` ### Table Row ```html ``` ### Table Header ```html
``` ### Table Data ```html ``` ### Merge Columns ```html colspan="2" ``` ### Merge Rows ```html rowspan="2" ``` You now know how to create lists and tables in HTML. Next tutorial: **HTML Forms**