HTML Lists & Tables: Complete Guide

Lists: Ordered & Unordered

1. Unordered Lists (<ul>)

For items without a specific order (bullet points).

Basic Syntax:

html

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

Examples with Different Bullet Styles:

html

<!-- Default disc bullets -->
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

<!-- With CSS styling -->
<ul style="list-style-type: square;">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

<!-- Different bullet types -->
<ul style="list-style-type: circle;">
    <li>Check email</li>
    <li>Attend meeting</li>
    <li>Write report</li>
</ul>

<!-- No bullets -->
<ul style="list-style-type: none; padding-left: 0;">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

2. Ordered Lists (<ol>)

For items in a specific sequence (numbered).

Basic Syntax:

html

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

Examples with Different Numbering:

html

<!-- Default decimal numbers -->
<ol>
    <li>Preheat oven to 350°F</li>
    <li>Mix dry ingredients</li>
    <li>Add wet ingredients</li>
</ol>

<!-- Different numbering types -->
<ol type="1">   <!-- Default: 1, 2, 3 -->
    <li>Introduction</li>
    <li>Methods</li>
    <li>Results</li>
</ol>

<ol type="A">   <!-- A, B, C -->
    <li>Option A</li>
    <li>Option B</li>
    <li>Option C</li>
</ol>

<ol type="a">   <!-- a, b, c -->
    <li>sub-point a</li>
    <li>sub-point b</li>
</ol>

<ol type="I">   <!-- Roman: I, II, III -->
    <li>Chapter I</li>
    <li>Chapter II</li>
</ol>

<ol type="i">   <!-- i, ii, iii -->
    <li>Appendix i</li>
    <li>Appendix ii</li>
</ol>

<!-- Starting from a specific number -->
<ol start="10">
    <li>Item ten</li>
    <li>Item eleven</li>
    <li>Item twelve</li>
</ol>

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

3. List Item (<li>)

Each item in a list, can contain any HTML.

html

<ul>
    <li>Simple text item</li>
    <li>
        <strong>Bold text</strong> in a list item
    </li>
    <li>
        <a href="#">Link in list item</a>
    </li>
    <li>
        <img src="icon.png" alt="icon">
        Text with image
    </li>
    <li>
        <div style="color: blue;">
            Styled div inside list item
        </div>
    </li>
</ul>

Nested Lists

Lists within lists for hierarchical structures.

Basic Nested List:

html

<ul>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Bananas</li>
            <li>Oranges</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrots</li>
            <li>Broccoli</li>
            <li>Spinach</li>
        </ul>
    </li>
</ul>

Complex Nesting Examples:

html

<!-- Mixed ordered/unordered nesting -->
<ol>
    <li>Morning Routine
        <ul>
            <li>Wake up</li>
            <li>Brush teeth
                <ol type="a">
                    <li>Apply toothpaste</li>
                    <li>Brush for 2 minutes</li>
                    <li>Rinse mouth</li>
                </ol>
            </li>
            <li>Have breakfast</li>
        </ul>
    </li>
    <li>Work Schedule
        <ol>
            <li>Check emails</li>
            <li>Team meeting</li>
            <li>Project work</li>
        </ol>
    </li>
</ol>

<!-- Navigation menu with nested items -->
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Electronics</a>
                    <ul>
                        <li><a href="#">Phones</a></li>
                        <li><a href="#">Laptops</a></li>
                        <li><a href="#">Accessories</a></li>
                    </ul>
                </li>
                <li><a href="#">Clothing</a></li>
                <li><a href="#">Books</a></li>
            </ul>
        </li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Consulting</a></li>
                <li><a href="#">Support</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<!-- Table of contents -->
<ol>
    <li>Introduction
        <ol>
            <li>Background</li>
            <li>Purpose</li>
        </ol>
    </li>
    <li>Methodology
        <ol>
            <li>Data Collection
                <ol type="a">
                    <li>Survey Design</li>
                    <li>Participant Selection</li>
                </ol>
            </li>
            <li>Analysis Methods</li>
        </ol>
    </li>
</ol>
Deeply Nested List (Multi-level):
html

<ul>
    <li>Level 1
        <ul>
            <li>Level 2
                <ul>
                    <li>Level 3
                        <ul>
                            <li>Level 4
                                <ul>
                                    <li>Level 5</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

HTML Tables

Basic Table Structure:

html

<table>
    <tr> <!-- Table Row -->
        <td>Cell 1</td> <!-- Table Data -->
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

Complete Table with All Elements:

html

<table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Product A</th>
            <th>Product B</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$1,000</td>
            <td>$2,000</td>
            <td>$3,000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$1,200</td>
            <td>$2,300</td>
            <td>$3,500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>$2,200</td>
            <td>$4,300</td>
            <td>$6,500</td>
        </tr>
    </tfoot>
</table>

Table Components Explained:

Table Examples

1. Basic Data Table:

html

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>28</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>34</td>
        <td>London</td>
    </tr>
</table>

2. Table with Spanning Cells:

html

<table border="1">
    <tr>
        <th colspan="2">Personal Information</th>
        <th colspan="2">Contact Details</th>
    </tr>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Phone</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td rowspan="2">team@example.com</td>
        <td>+1-555-1234</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>+1-555-5678</td>
    </tr>
</table>

3. Complex Table Example:

html

<table>
    <caption>Employee Directory</caption>
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Full Name</th>
            <th scope="col">Department</th>
            <th scope="col">Position</th>
            <th scope="col">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">001</th>
            <td>Sarah Johnson</td>
            <td>Engineering</td>
            <td>Senior Developer</td>
            <td>$95,000</td>
        </tr>
        <tr>
            <th scope="row">002</th>
            <td>Michael Chen</td>
            <td>Marketing</td>
            <td>Marketing Manager</td>
            <td>$85,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4" style="text-align: right;">Average Salary:</td>
            <td>$90,000</td>
        </tr>
    </tfoot>
</table>

Table Headers & Accessibility

Using scope Attribute:

html

<table>
    <!-- Column headers -->
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Q1</th>
        <th scope="col">Q2</th>
        <th scope="col">Q3</th>
        <th scope="col">Q4</th>
    </tr>
    
    <!-- Row headers -->
    <tr>
        <th scope="row">Widgets</th>
        <td>100</td>
        <td>120</td>
        <td>150</td>
        <td>200</td>
    </tr>
    <tr>
        <th scope="row">Gadgets</th>
        <td>80</td>
        <td>90</td>
        <td>110</td>
        <td>130</td>
    </tr>
</table>

Using headers Attribute for Complex Tables:

html

<table>
    <tr>
        <th id="name">Name</th>
        <th id="math">Math</th>
        <th id="science">Science</th>
        <th id="english">English</th>
    </tr>
    <tr>
        <th id="alex">Alex</th>
        <td headers="alex math">95</td>
        <td headers="alex science">88</td>
        <td headers="alex english">92</td>
    </tr>
</table>

Captions and Summaries:

html

<!-- Caption for sighted users -->
<table>
    <caption>Student Grades for Spring Semester 2024</caption>
    <!-- table content -->
</table>

<!-- Summary for screen readers (deprecated but useful for complex tables) -->
<table aria-describedby="table-summary">
    <caption>Complex Financial Data</caption>
    <!-- table content -->
</table>
<p id="table-summary" style="display: none;">
    This table shows quarterly revenue figures for 2023-2024 
    across different product categories.
</p>

Styling Lists & Tables

CSS for Lists:

html

<style>
    /* Custom bullet styles */
    .custom-list {
        list-style-type: none;
        padding-left: 0;
    }
    
    .custom-list li {
        padding: 5px 0 5px 25px;
        position: relative;
    }
    
    .custom-list li:before {
        content: "✓";
        color: green;
        position: absolute;
        left: 0;
    }
    
    /* Inline list for navigation */
    .inline-list {
        list-style-type: none;
        padding: 0;
        display: flex;
        gap: 20px;
    }
    
    /* Numbered list with custom numbers */
    ol.custom-numbers {
        counter-reset: item;
        list-style-type: none;
    }
    
    ol.custom-numbers li:before {
        content: "Step " counter(item) ": ";
        counter-increment: item;
        font-weight: bold;
        color: #0066cc;
    }
</style>

<ul class="custom-list">
    <li>Feature one</li>
    <li>Feature two</li>
    <li>Feature three</li>
</ul>

CSS for Tables:

html

<style>
    /* Basic table styling */
    .styled-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-family: Arial, sans-serif;
    }
    
    .styled-table th,
    .styled-table td {
        padding: 12px 15px;
        text-align: left;
        border: 1px solid #ddd;
    }
    
    .styled-table th {
        background-color: #009879;
        color: white;
        font-weight: bold;
    }
    
    .styled-table tbody tr:nth-child(even) {
        background-color: #f3f3f3;
    }
    
    .styled-table tbody tr:hover {
        background-color: #f5f5f5;
    }
    
    .styled-table caption {
        font-size: 1.5em;
        margin: 10px 0;
        font-weight: bold;
        text-align: left;
    }
    
    /* Responsive table */
    .responsive-table {
        overflow-x: auto;
    }
</style>

<div class="responsive-table">
    <table class="styled-table">
        <!-- table content -->
    </table>
</div>

Practical Examples

Example 1: Course Syllabus

html

<article>
    <h1>Web Development 101 - Course Syllabus</h1>
    
    <h2>Course Modules</h2>
    <ol>
        <li>HTML Fundamentals
            <ul>
                <li>Basic structure</li>
                <li>Text formatting</li>
                <li>Lists and tables</li>
                <li>Forms and inputs</li>
            </ul>
        </li>
        <li>CSS Styling
            <ul>
                <li>Selectors and properties</li>
                <li>Box model</li>
                <li>Flexbox and Grid</li>
                <li>Responsive design</li>
            </ul>
        </li>
        <li>JavaScript Basics
            <ul>
                <li>Variables and data types</li>
                <li>Functions and events</li>
                <li>DOM manipulation</li>
                <li>Basic animations</li>
            </ul>
        </li>
    </ol>
    
    <h2>Grading Scheme</h2>
    <table>
        <caption>Grade Distribution</caption>
        <thead>
            <tr>
                <th scope="col">Component</th>
                <th scope="col">Weight</th>
                <th scope="col">Due Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Assignments</td>
                <td>30%</td>
                <td>Weekly</td>
            </tr>
            <tr>
                <td>Midterm Project</td>
                <td>30%</td>
                <td>March 15</td>
            </tr>
            <tr>
                <td>Final Project</td>
                <td>40%</td>
                <td>May 10</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total: 100%</td>
            </tr>
        </tfoot>
    </table>
</article>

Example 2: Product Comparison Table

html

<section>
    <h2>Phone Comparison</h2>
    <table>
        <caption>Smartphone Features Comparison</caption>
        <thead>
            <tr>
                <th scope="col">Feature</th>
                <th scope="col">Phone A</th>
                <th scope="col">Phone B</th>
                <th scope="col">Phone C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Price</th>
                <td>$699</td>
                <td>$899</td>
                <td>$999</td>
            </tr>
            <tr>
                <th scope="row">Screen Size</th>
                <td>6.1"</td>
                <td>6.7"</td>
                <td>6.9"</td>
            </tr>
            <tr>
                <th scope="row">Battery Life</th>
                <td>18 hours</td>
                <td>24 hours</td>
                <td>20 hours</td>
            </tr>
            <tr>
                <th scope="row">Camera</th>
                <td>Dual 12MP</td>
                <td>Triple 48MP</td>
                <td>Quad 108MP</td>
            </tr>
        </tbody>
    </table>
</section>

Example 3: Navigation Menu with Nested Lists

html

<nav aria-label="Main Navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li>
            <a href="/products">Products</a>
            <ul>
                <li><a href="/products/electronics">Electronics</a></li>
                <li><a href="/products/clothing">Clothing</a></li>
                <li><a href="/products/books">Books</a></li>
            </ul>
        </li>
        <li>
            <a href="/services">Services</a>
            <ul>
                <li><a href="/services/consulting">Consulting</a></li>
                <li><a href="/services/support">Support</a></li>
                <li><a href="/services/training">Training</a></li>
            </ul>
        </li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<style>
    nav ul {
        list-style-type: none;
        padding: 0;
        background: #333;
    }
    
    nav ul li {
        display: inline-block;
        position: relative;
    }
    
    nav ul li a {
        color: white;
        padding: 15px 20px;
        display: block;
        text-decoration: none;
    }
    
    nav ul li:hover > ul {
        display: block;
    }
    
    nav ul ul {
        display: none;
        position: absolute;
        background: #444;
        min-width: 200px;
    }
    
    nav ul ul li {
        display: block;
    }
</style>

Best Practices & Accessibility

For Lists:

html

<!-- Use appropriate list type -->
<ol> <!-- For sequential items -->
    <li>Step 1</li>
    <li>Step 2</li>
</ol>

<ul> <!-- For non-sequential items -->
    <li>Apple</li>
    <li>Banana</li>
</ul>

<!-- Semantic lists for navigation -->
<nav aria-label="Main menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>

<!-- Use description lists for terms -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

For Tables:

html

<!-- Always use proper structure -->
<table>
    <caption>Descriptive title</caption>
    <thead>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row header</th>
            <td>Data cell</td>
        </tr>
    </tbody>
</table>

<!-- Don't use tables for layout -->
<!-- BAD: -->
<table>
    <tr>
        <td>Navigation</td>
        <td>Content</td>
    </tr>
</table>

<!-- GOOD: Use CSS for layout -->
<div class="container">
    <nav>Navigation</nav>
    <main>Content</main>
</div>

<!-- Make tables responsive -->
<div style="overflow-x: auto;">
    <table>
        <!-- wide table content -->
    </table>
</div>

Quick Reference

Lists:

html

<!-- Unordered -->
<ul>
    <li>Item</li>
</ul>

<!-- Ordered -->
<ol type="1|A|a|I|i" start="number" reversed>
    <li>Item</li>
</ol>

<!-- Nested -->
<ul>
    <li>Parent
        <ul>
            <li>Child</li>
        </ul>
    </li>
</ul>

Tables:

html

<table>
    <caption>Title</caption>
    <thead>
        <tr><th>Header</th></tr>
    </thead>
    <tbody>
        <tr><td>Data</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Footer</td></tr>
    </tfoot>
</table>

<!-- Spanning -->
<td colspan="2">Span columns</td>
<td rowspan="2">Span rows</td>

<!-- Accessibility -->
<th scope="col|row">Header with scope</th>

Common Mistakes to Avoid:

html

<!-- Don't use tables for layout -->
<table>
    <tr>
        <td>Sidebar</td>
        <td>Main content</td>
    </tr>
</table>

<!-- Don't skip list item tags -->
<ul>
    Item 1  <!-- WRONG -->
    <li>Item 1</li>  <!-- CORRECT -->
</ul>

<!-- Always close table elements -->
<table>
    <tr>
        <td>Cell  <!-- WRONG -->
    </tr>
</table>

<table>
    <tr>
        <td>Cell</td>  <!-- CORRECT -->
    </tr>
</table>

Remember: Use lists for content that's naturally a list, and tables only for tabular data (not layout)!