Lesson 3 — Lists, Tables, and Select Dropdowns

Title: Lists, tables, and <select> dropdowns in real UIs

Description: Cover ordered and nested lists, <select> / <option>, and table markup (table, tr, th, td) used in dashboards and admin panels.

Why it matters for QA: Grids, menus, and filters dominate enterprise apps. You verify sorting, pagination, default selections, and row data — all easier when you understand the HTML behind them.

1. Unordered Lists (ul)

Bullet list.

<ul>

    <li>Apple</li>

    <li>Banana</li>

    <li>Orange</li>

</ul>

2. Ordered Lists (ol)

Numbered list.

<ol>

    <li>Login</li>

    <li>Open Dashboard</li>

    <li>Logout</li>

</ol>

3. List Item (li)

<li>Product</li>

Used inside:

• ul
• ol

4. Nested Lists

<ul>

    <li>
        Fruits

        <ul>
            <li>Apple</li>
            <li>Orange</li>
        </ul>

    </li>

</ul>

5. QA and Lists

QA checks:

• order
• missing items
• duplicates
• sorting
• filtering

6. Select Dropdown

<select>

    <option>USA</option>

    <option>Canada</option>

    <option>Armenia</option>

</select>

7. Option Element

<option>USA</option>

Represents one dropdown item.

8. Selected Option

<option selected>
    Canada
</option>

Default selected value.

9. Disabled Option

<option disabled>
    Premium Plan
</option>

Cannot be selected.

10. QA Testing for Dropdowns

QA verifies:

• default selection
• changing values
• hidden options
• disabled options
• API data
• keyboard support

11. Tables

Table Structure

<table>

    <tr>
        <th>Name</th>
        <th>Role</th>
    </tr>

    <tr>
        <td>John</td>
        <td>Admin</td>
    </tr>

</table>

Table Tags

12. QA and Tables

QA checks:

• sorting
• pagination
• filtering
• row count
• column values
• dynamic loading