HTML Lists & Tables

What are Lists in HTML?

Lists organize related items in a structured, easy-to-read format. HTML provides three types of lists, each serving different purposes.

Types of Lists

• Unordered Lists (<ul>) — Bullet points, no specific order
• Ordered Lists (<ol>) — Numbered or lettered, sequential order matters
• Description Lists (<dl>) — Term-definition pairs, like a glossary

1. Unordered Lists (<ul>)

Use unordered lists when the order doesn't matter. Each item is marked with <li> (list item).

Basic Syntax:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Complete Example:

<h2>My Hobbies</h2>
<ul>
  <li>Reading books</li>
  <li>Coding projects</li>
  <li>Playing guitar</li>
  <li>Traveling</li>
</ul>

When to Use:

• Shopping lists
• Feature lists
• Navigation menus
• Any items where order doesn't matter

2. Ordered Lists (<ol>)

Use ordered lists when sequence or ranking matters. Items are automatically numbered.

Basic Syntax:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Complete Example:

<h2>How to Make Coffee</h2>
<ol>
  <li>Boil water</li>
  <li>Add coffee grounds to filter</li>
  <li>Pour hot water over grounds</li>
  <li>Wait 4 minutes</li>
  <li>Pour and enjoy</li>
</ol>

Ordered List Attributes:

<!-- Different numbering types -->
<ol type="1">...</ol>  <!-- 1, 2, 3 (default) -->
<ol type="A">...</ol>  <!-- A, B, C -->
<ol type="a">...</ol>  <!-- a, b, c -->
<ol type="I">...</ol>  <!-- I, II, III -->
<ol type="i">...</ol>  <!-- i, ii, iii -->

<!-- Start from a specific number -->
<ol start="5">
  <li>This is item 5</li>
  <li>This is item 6</li>
</ol>

<!-- Reverse order -->
<ol reversed>
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ol>

When to Use:

• Step-by-step instructions
• Rankings or top 10 lists
• Procedures or recipes
• Any items where order matters

3. Description Lists (<dl>)

Use description lists for term-definition pairs. Uses <dt> (term) and <dd> (description).

Basic Syntax:

<dl>
  <dt>Term</dt>
  <dd>Definition or description</dd>
</dl>

Complete Example:

<h2>HTML Terms</h2>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the structure of web pages</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets - controls the visual appearance</dd>

  <dt>JavaScript</dt>
  <dd>Programming language that adds interactivity to websites</dd>
</dl>

Multiple Descriptions:

<dl>
  <dt>Coffee</dt>
  <dd>A hot beverage made from roasted beans</dd>
  <dd>Contains caffeine</dd>
  <dd>Popular morning drink worldwide</dd>
</dl>

When to Use:

• Glossaries
• FAQs
• Metadata displays
• Name-value pairs

Nested Lists

Lists can be nested inside other lists to create hierarchies:

<h2>Website Structure</h2>
<ul>
  <li>Home
    <ul>
      <li>Hero Section</li>
      <li>Features</li>
      <li>Testimonials</li>
    </ul>
  </li>
  <li>Products
    <ol>
      <li>Category A</li>
      <li>Category B</li>
      <li>Category C</li>
    </ol>
  </li>
  <li>Contact</li>
</ul>

Best Practices for Lists:

• Keep list items concise and parallel in structure
• Use the appropriate list type for the content
• Don't nest too deeply (2-3 levels maximum for readability)
• Use semantic HTML - don't use lists just for layout

Back to top

What are Tables in HTML?

Tables display data in rows and columns - perfect for structured information like schedules, pricing, or statistics.

Basic Table Structure

Tables use these essential tags:

• <table> — Container for the entire table
• <tr> — Table Row
• <th> — Table Header (bold, centered by default)
• <td> — Table Data (regular cell)
• <thead> — Groups header rows (optional but recommended)
• <tbody> — Groups body rows (optional but recommended)
• <tfoot> — Groups footer rows (optional)

Simple Table Example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

Complete Table with Sections

<h2>Student Grades</h2>
<table class="example-table">
  <thead>
    <tr>
      <th>Student Name</th>
      <th>Subject</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aman Raj</td>
      <td>Mathematics</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>Priya Sharma</td>
      <td>Physics</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Rahul Kumar</td>
      <td>Chemistry</td>
      <td>B+</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Average</td>
      <td>A</td>
    </tr>
  </tfoot>
</table>

Table Attributes: colspan & rowspan

colspan - Merges cells horizontally (across columns)

rowspan - Merges cells vertically (across rows)

Colspan Example:

<table class="example-table">
  <tr>
    <th colspan="3">Student Information</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>John</td>
    <td>20</td>
    <td>A</td>
  </tr>
</table>

Rowspan Example:

<table class="example-table">
  <tr>
    <th rowspan="3">Subjects</th>
    <td>Math</td>
  </tr>
  <tr>
    <td>Science</td>
  </tr>
  <tr>
    <td>English</td>
  </tr>
</table>

Complex Table (Timetable):

<table class="example-table">
  <thead>
    <tr>
      <th>Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9:00 AM</td>
      <td>Math</td>
      <td>Science</td>
      <td>English</td>
    </tr>
    <tr>
      <td>10:00 AM</td>
      <td colspan="3">Break</td>
    </tr>
    <tr>
      <td>11:00 AM</td>
      <td>History</td>
      <td rowspan="2">Lab</td>
      <td>Geography</td>
    </tr>
    <tr>
      <td>12:00 PM</td>
      <td>Art</td>
      <td>Music</td>
    </tr>
  </tbody>
</table>

Table Accessibility

Make tables accessible with proper attributes:

<table class="example-table" summary="Student grades for semester 1">
  <caption>First Semester Results</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Aman</th>
      <td>A+</td>
    </tr>
  </tbody>
</table>

Table Best Practices:

• Use <caption> to describe table purpose
• Use scope attribute on headers (col/row)
• Use <thead>, <tbody>, <tfoot> for structure
• Don't use tables for layout - use CSS Grid or Flexbox instead
• Keep tables simple - complex tables are hard to read on mobile

Back to top

Practice Tasks

1. Create Lists:
   • Unordered list of your 5 favorite movies
   • Ordered list of steps to make a sandwich
   • Description list of 3 HTML tags and their purposes
2. Nested List Project:
   • Create a course syllabus with nested lists
   • Main topics as outer list
   • Subtopics as nested lists
3. Student Grade Table:
   • 5 students with Name, Roll No, Math, Science, Total
   • Use <thead>, <tbody>, <tfoot>
   • Add a caption
4. Weekly Schedule Table:
   • Time slots in first column
   • Days of week as columns
   • Use colspan for breaks/lunch
   • Use rowspan for longer classes
5. Pricing Table:
   • 3 pricing tiers (Basic, Pro, Enterprise)
   • Features in rows
   • Use checkmarks or X for included/excluded features

Back to top