HTML Course 7. Lists and tables

HTML Course 7: Lists and Tables

This module covers the creation and usage of lists and tables in HTML, from basic syntax to advanced features and accessibility considerations. By the end, you will be able to structure ordered, unordered, and definition lists, as well as build semantic, well-structured tables with proper headers, captions, and cell spanning.

1. Lists

Lists allow you to group related items in a structured way. HTML offers three main types:

• Ordered Lists (<ol>): items with a defined sequence or ranked importance.
• Unordered Lists (<ul>): items without inherent order, typically bulleted.
• Definition Lists (<dl>): pairs of terms and descriptions.

1.1 Ordered Lists (<ol>)

Ordered lists render items with numbers or letters. Attributes include:

• start: starting value of the counter.
• type: numbering style (1, A, a, I, i).
• reversed: renders the list in descending order.

  
First step
  
Second step
  
Third step




  
Item A (shown as 5)
  
Item B (shown as 4)
  
Item C (shown as 3)

1.2 Unordered Lists (<ul>)

Unordered lists display bullet points by default. The type attribute (deprecated in HTML5) historically allowed changing bullet shapes. Modern practice uses CSS, but basic HTML remains:

  
Apples
  
Oranges
  
Bananas




  
Fruits
    

      
Apple
      
Orange
    
  
  
Vegetables
    

      
Carrot
      
Broccoli
    
  

1.3 Definition Lists (<dl>)

Definition lists pair terms (<dt>) with their descriptions (<dd>).

  
HTML
  
HyperText Markup Language, used to structure web content.

  
CSS
  
Cascading Style Sheets, used for styling web content.

  
JavaScript
  
A programming language that adds interactivity to web pages.

2. Tables

Tables display tabular data in rows and columns. Proper semantic markup enhances readability and accessibility.

• <table>: container element.
• <caption>: optional title or summary.
• <thead>, <tbody>, <tfoot>: group header, body, and footer rows.
• <tr>: table row.
• <th>: header cell (can use scope).
• <td>: data cell.
• Attributes colspan and rowspan for spanning cells.
• Accessibility: scope, aria-describedby, summary (deprecated but sometimes used).

2.1 Basic Table Structure

  
Monthly Sales Report
  

    
Month
    
Sales
  
  

    
January
    
$10,000
  
  

    
February
    
$12,500
  

2.2 Table Sections: thead, tbody, tfoot

Splitting a table into sections enhances structure and can improve styling and accessibility.

  
Quarterly Performance
  

    

      
Quarter
      
Revenue
      
Profit
    
  
  

    

      
Q1
      
$50,000
      
$8,000
    
    

      
Q2
      
$65,000
      
$12,000
    
  
  

    

      
Total
      
$115,000
      
$20,000
    
  

2.3 Table Headers and Scope

Use scope on <th> to indicate whether the header applies to a row, column, or group.

  
Student Grades
  

    

      
Name
      
Math
      
Science
      
History
    
  
  

    

      
Alice
      
90
      
85
      
88
    
    

      
Bob
      
78
      
92
      
80
    
  

2.4 Advanced Table Features: Colspan & Rowspan

Cells can span multiple columns or rows to create complex layouts.

  
Conference Schedule
  

    
Time
    
Monday
    
Tuesday
  
  

    
09:00
    
Keynote Session
  
  

    
11:00
    
Workshop A
    
Workshop B
  
  

    
13:00
    
Lunch Break
    
Panel Discussion
  
  

    
14:00
    
Networking
  

2.5 Accessibility and Semantic Enhancements

For users of assistive technologies:

• Use scope on header cells.
• Provide a caption describing the table’s purpose.
• Use aria-describedby to reference an external description if needed.
• Avoid using the deprecated summary attribute in favor of a proper caption or <figure> with a <figcaption>.

This table lists major milestones and their planned dates.

  
Project Timeline
  
  

    

      
Milestone
      
Start Date
      
End Date
    
  
  

    

      
Design Phase
      
2024-01-10
      
2024-02-28
    
    

      
Development
      
2024-03-01
      
2024-06-30
    
  

With these techniques, you can structure lists and tables that are not only visually organized but also semantically meaningful and accessible to all users.