HTML List and Tables (Lecture 3)

HTML Lists

In HTML, lists are used to group related items together in an organized way. They make information easier to read and understand. There are three main types of lists in HTML:

  1. Ordered List (<ol>)

    An ordered list is used when the order of items matters. Items are automatically numbered.
    Example uses: steps in a recipe, instructions, rankings.

    Code:

    <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </ol>

    Output:

    1. HTML
    2. CSS
    3. JavaScript

  2. Unordered List (<ul>)

    An unordered list is used when the order does not matter. Items are marked with bullets by default.
    Example uses: shopping lists, features of a product, ingredients.

    Code:

    <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Mangoes</li>
    </ul>

    Output:

    • Apples
    • Bananas
    • Mangoes

  3. Description List (<dl>)

    A description list is used for pairs of terms and their descriptions. Each list contains a term (<dt>) and a description (<dd>).
    Example uses: glossaries, FAQs, definitions.

    Code:

    <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dt>JavaScript</dt>
    <dd>Programming language for the web</dd>
    </dl>

    Output:

    HTML
    HyperText Markup Language
    CSS
    Cascading Style Sheets
    JavaScript
    Programming language for the web

  4. Nested Lists

    Lists can also be nested, meaning one list can be placed inside another. This is helpful for showing categories and subcategories.

HTML Tables

A table in HTML is used to display data in rows and columns. It organizes information neatly and is especially useful for reports, comparison charts, schedules, and product listings.

Element Purpose
<table> Creates the table
<tr> Defines a table row
<th> Defines a table header cell (bold and centered by default)
<td> Defines a table data cell
<thead> Groups the table header rows
<tbody> Groups the table body rows
<tfoot> Groups the table footer rows (like totals or summary)
colspan Merges columns in a row
rowspan Merges rows in a column

Code:

          <table border="1" cellpadding="8" cellspacing="0"> 
          <thead> 
            <tr> 
              <th>Name</th> 
              <th>Math</th> 
              <th>Science</th> 
              <th>English</th> 
            </tr> 
          </thead> 
          <tbody> 
            <tr> 
              <td>Lisa</td> 
              <td>90</td> 
              <td>85</td> 
              <td>88</td> 
            </tr> 
            <tr> 
              <td>John</td> 
              <td>75</td> 
              <td>80</td> 
              <td>78</td> 
            </tr> 
          </tbody> 
          <tfoot> 
            <tr> 
              <td colspan="4">Total Students: 2</td> 
            </tr> 
          </tfoot> 
          </table>

Output:

Name Math Science English
Lisa 90 85 88
John 75 80 78
Total Students: 2


See the video lecture