P1.3: Lists & Tables

Lists and tables allow developers to present structured data, documentation indexes, and statistical reports cleanly.

1. HTML Lists

HTML supports three types of lists:

• Unordered Lists (<ul>): Bullets with no specific sequence.
• Ordered Lists (<ol>): Numbered sequence (1, 2, 3...).
• Description Lists (<dl>): Pairs of terms (<dt>) and descriptions (<dd>).

<!-- Unordered List -->
<ul>
  <li>HTML5</li>
  <li>CSS3</li>
</ul>

<!-- Description List -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

2. Table Structures in Web Layouts

Historically, tables were used to lay out entire web structures. Today, they are reserved strictly for displaying tabular data.

Brad TraversyView Profile 🔗

Real-World Developer Case Study

12 Years Exp

RoleFull Stack Developer & Creator

Salary₹45 Lakhs/yr equivalent

CompanyTraversy Media

Core Tech Stack

HTML5 TablesLayoutsDatabase Structuring

“Tables are excellent for data reports, dashboard metrics, and schedules. Combine them with CSS border-collapse for clean UI layouts. Never use tables for page wireframing!”

3. Designing HTML Tables

A table is defined by <table> and structured with:

• <tr> (Table Row)
• <th> (Table Header)
• <td> (Table Data cell)
• <thead>, <tbody>, <tfoot> (Semantic layout wrappers)

Clean HTML Table Example:

<table>
  <thead>
    <tr>
      <th>Module</th>
      <th>Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Phase 0</td>
      <td>2 Weeks</td>
    </tr>
  </tbody>
</table>