Introduction to Lists and Tables
Organizing information is a fundamental aspect of communication. In the physical world, we use bullet points, numbered steps, and tabular formats to present information clearly. HTML provides powerful elements for creating these same structures on the web.
In this tutorial, we'll explore how to create and customize different types of lists and tables in HTML. These elements are essential tools for presenting information in a structured, readable format that enhances user experience and improves accessibility.
HTML Lists
Lists are perfect for presenting collections of related items. HTML offers three main types of lists, each with its own semantic meaning and visual presentation.
Types of HTML Lists
- Unordered Lists: For collections where order doesn't matter
- Ordered Lists: For collections where sequence is important
- Description Lists: For name-value pairs or term-definition relationships
Think of these list types as different organizational systems:
- Unordered lists are like shopping lists where the order of items doesn't affect the outcome
- Ordered lists are like recipe steps where sequence matters
- Description lists are like glossaries where terms are paired with their definitions
Unordered Lists
Unordered lists use the <ul> element as a container, with each list item wrapped in <li> (list item) tags. By default, browsers display these items with bullet points.
Basic Unordered List
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>This code would render as:
- Apples
- Bananas
- Oranges
- Strawberries
Unordered lists are perfect for:
- Product features
- Navigation menus
- Item collections
- Requirements or specifications
Customizing Unordered Lists
While CSS is the preferred method for styling lists (which we'll cover in future lessons), HTML provides the type attribute to change the bullet style:
<ul type="disc"> <!-- Default: filled circle -->
<li>Disc Item</li>
</ul>
<ul type="circle"> <!-- Empty circle -->
<li>Circle Item</li>
</ul>
<ul type="square"> <!-- Filled square -->
<li>Square Item</li>
</ul>Note: The type attribute is considered presentational and is generally discouraged in modern HTML. CSS provides more flexible styling options.
Ordered Lists
Ordered lists use the <ol> element as a container, with each item also wrapped in <li> tags. Browsers automatically number the items sequentially.
Basic Ordered List
<ol>
<li>Preheat the oven to 350°F</li>
<li>Mix the ingredients in a bowl</li>
<li>Pour the batter into a baking pan</li>
<li>Bake for 25-30 minutes</li>
</ol>This code would render as:
- Preheat the oven to 350°F
- Mix the ingredients in a bowl
- Pour the batter into a baking pan
- Bake for 25-30 minutes
Ordered lists are ideal for:
- Step-by-step instructions
- Ranking systems
- Sequential processes
- Countdown or count-up lists
Customizing Ordered Lists
Ordered lists offer several attributes for customization:
<!-- Start attribute changes the first number -->
<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
</ol>
<!-- Type attribute changes the numbering style -->
<ol type="1"> <!-- Default: 1, 2, 3, 4... -->
<li>Numbered item</li>
</ol>
<ol type="A"> <!-- A, B, C, D... -->
<li>Capital letter item</li>
</ol>
<ol type="a"> <!-- a, b, c, d... -->
<li>Lowercase letter item</li>
</ol>
<ol type="I"> <!-- I, II, III, IV... -->
<li>Capital Roman numeral item</li>
</ol>
<ol type="i"> <!-- i, ii, iii, iv... -->
<li>Lowercase Roman numeral item</li>
</ol>
<!-- Reversed attribute counts down instead of up -->
<ol reversed>
<li>Third item</li>
<li>Second item</li>
<li>First item</li>
</ol>Setting Specific Item Values
You can also specify the value for an individual list item using the value attribute, which will reset the counting from that point:
<ol>
<li>First item</li>
<li>Second item</li>
<li value="10">This will be number 10</li>
<li>This will be number 11</li>
</ol>This feature is useful for creating lists with intentional gaps or for resuming numbering after interruptions.
Description Lists
Description lists use the <dl> element as a container, with pairs of <dt> (description term) and <dd> (description definition) elements inside. Think of them as a dictionary or glossary structure.
Basic Description List
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard language for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling web pages.</dd>
<dt>JavaScript</dt>
<dd>A programming language that enables interactive web pages.</dd>
</dl>This code would render with terms and their definitions, typically with the definitions indented:
- HTML
- HyperText Markup Language, the standard language for creating web pages.
- CSS
- Cascading Style Sheets, used for styling web pages.
- JavaScript
- A programming language that enables interactive web pages.
Description lists are perfect for:
- Glossaries and dictionaries
- FAQs (terms and answers)
- Metadata displays (property and value)
- Product specifications
Multiple Definitions or Terms
A single term can have multiple definitions, or multiple terms can share a definition:
<!-- One term, multiple definitions -->
<dl>
<dt>Web</dt>
<dd>A network of interconnected strands created by a spider.</dd>
<dd>Short for "World Wide Web," a system of interlinked hypertext documents.</dd>
</dl>
<!-- Multiple terms, one definition -->
<dl>
<dt>HTML5</dt>
<dt>HTML 5</dt>
<dd>The fifth major revision of the HTML standard for the Web.</dd>
</dl>This flexibility makes description lists versatile for various types of term-definition relationships.
Nested Lists
Lists can be nested inside one another to create hierarchical structures, similar to outlines or multi-level menus. To nest a list, simply place the entire child list (<ul>, <ol>, or <dl>) within an <li> element of the parent list.
Nested List Example
<ul>
<li>Fruits
<ul>
<li>Citrus
<ul>
<li>Oranges</li>
<li>Lemons</li>
<li>Limes</li>
</ul>
</li>
<li>Berries
<ul>
<li>Strawberries</li>
<li>Blueberries</li>
<li>Raspberries</li>
</ul>
</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Root Vegetables
<ul>
<li>Carrots</li>
<li>Potatoes</li>
<li>Radishes</li>
</ul>
</li>
<li>Leafy Greens
<ul>
<li>Lettuce</li>
<li>Spinach</li>
<li>Kale</li>
</ul>
</li>
</ul>
</li>
</ul>This creates a hierarchical structure like an outline, with each level typically using a different bullet style or indentation.
Mixing List Types
You can also mix different list types when nesting:
<ol>
<li>First, prepare the ingredients:
<ul>
<li>2 cups flour</li>
<li>1 cup sugar</li>
<li>1/2 cup butter</li>
</ul>
</li>
<li>Next, follow these steps:
<ol type="a">
<li>Mix dry ingredients</li>
<li>Add butter and blend</li>
<li>Shape into cookies</li>
</ol>
</li>
<li>Finally, bake at 350°F for 12 minutes.</li>
</ol>This approach is useful for complex instructions or multi-level categorizations, similar to how textbooks might use different numbering systems for chapters, sections, and subsections.
List Best Practices
- Use the right list type based on the semantic meaning of your content, not just the visual presentation
- Keep list items concise and focused on single points
- Maintain consistent structure across list items (e.g., start each item with the same part of speech)
- Don't nest lists too deeply (usually no more than 3 levels) to maintain readability
- Use CSS for styling rather than HTML attributes when possible
- Ensure list content is meaningful without relying solely on visual formatting
- Consider accessibility: screen readers announce lists as lists and tell users how many items they contain
Practical Uses for Lists
FAQ Section
<dl class="faq">
<dt>How do I reset my password?</dt>
<dd>You can reset your password by clicking the "Forgot Password" link on the login page and following the instructions sent to your email.</dd>
<dt>What payment methods do you accept?</dt>
<dd>We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers.</dd>
<dt>How can I track my order?</dt>
<dd>Once your order ships, you'll receive a tracking number via email. You can also find tracking information in your account dashboard.</dd>
</dl>Product Features
<section class="product-info">
<h2>Key Features</h2>
<ul class="feature-list">
<li><strong>Lightweight Design</strong> - Only 2.5 lbs for easy portability</li>
<li><strong>Long Battery Life</strong> - Up to 12 hours on a single charge</li>
<li><strong>Fast Charging</strong> - 0 to 80% in just 35 minutes</li>
<li><strong>Water Resistant</strong> - IP67 rated for protection against spills</li>
</ul>
</section>HTML Tables
Tables provide a way to organize data into rows and columns, making complex information easier to scan and understand. Think of HTML tables as digital spreadsheets embedded in your webpage.
Basic Table Structure
A basic HTML table consists of the following elements:
<table>: The container for the entire table<tr>: Table row - defines a horizontal row of cells<td>: Table data - defines a cell containing data<th>: Table header - defines a header cell
Simple Table Example
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>35</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>28</td>
</tr>
</table>This code creates a simple three-column table with a header row and two data rows.
Understanding Table Structure
Think of an HTML table as a grid:
- The
<table>element is like a spreadsheet - Each
<tr>element is like a row in the spreadsheet - Each
<td>or<th>element is like a cell in that row
Tables are built row by row (horizontally), not column by column (vertically). This is similar to how you would read a book - left to right, top to bottom.
Advanced Table Structure
For more complex tables, additional structural elements help organize the content and improve accessibility:
<caption>: Provides a title or description for the table<thead>: Groups header content in a table<tbody>: Groups the main content (body) of a table<tfoot>: Groups footer content in a table<colgroup>and<col>: Define columns for styling purposes
Structured Table Example
<table>
<caption>Monthly Sales Report</caption>
<colgroup>
<col class="month">
<col class="sales">
<col class="profit">
</colgroup>
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,500</td>
</tr>
<tr>
<td>February</td>
<td>$8,500</td>
<td>$1,900</td>
</tr>
<tr>
<td>March</td>
<td>$13,500</td>
<td>$3,200</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>$32,000</td>
<td>$7,600</td>
</tr>
</tfoot>
</table>This creates a well-structured table with:
- A caption describing the table's purpose
- Column groups for styling
- Distinct sections for header, body, and footer content
Benefits of Structured Tables
Using these structural elements offers several advantages:
- Accessibility: Screen readers can identify table parts and navigate them appropriately
- Styling: You can target specific table sections with CSS
- Printing: Browsers can repeat header rows when printing long tables that span multiple pages
- Scrolling: Fixed headers can be implemented for tables with many rows
- Organization: Code is cleaner and easier to maintain
Spanning Rows and Columns
Sometimes you'll need cells that span multiple rows or columns, similar to merged cells in a spreadsheet. HTML provides attributes for this purpose:
colspan: Makes a cell span multiple columnsrowspan: Makes a cell span multiple rows
Column Spanning Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>35</td>
</tr>
</table>In this example, the "Name" header spans two columns (First Name and Last Name).
Row Spanning Example
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td rowspan="2">Maria</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Science</td>
<td>B+</td>
</tr>
</table>Here, the "Maria" cell spans two rows, as she has grades for both Math and Science.
Complex Table with Spanning
<table>
<caption>Product Comparison</caption>
<thead>
<tr>
<th rowspan="2">Product</th>
<th colspan="2">Basic</th>
<th colspan="2">Premium</th>
</tr>
<tr>
<th>Price</th>
<th>Features</th>
<th>Price</th>
<th>Features</th>
</tr>
</thead>
<tbody>
<tr>
<td>Software A</td>
<td>$49.99</td>
<td>3</td>
<td>$99.99</td>
<td>5</td>
</tr>
<tr>
<td>Software B</td>
<td>$59.99</td>
<td>4</td>
<td>$119.99</td>
<td>6</td>
</tr>
</tbody>
</table>This creates a comparison table with a hierarchical header structure, using both row and column spanning to organize the information logically.
Tips for Using Spanning
- Keep spans simple when possible to avoid confusing layouts
- Maintain the correct number of cells in each row - if you have spans, you'll need fewer
<td>elements - Draw the table on paper first for complex layouts to visualize the structure
- Consider accessibility - very complex tables with many spans can be difficult for screen reader users
Table Accessibility
Tables can present challenges for users with disabilities, particularly those using screen readers. To create accessible tables:
Associate Headers with Data Cells
Use scope, id, and headers attributes to explicitly associate header cells with data cells:
Using scope attribute (simpler approach):
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
</tr>
<tr>
<th scope="row">John Smith</th>
<td>john@example.com</td>
<td>555-1234</td>
</tr>
</table>The scope attribute tells screen readers whether a header cell applies to a row or column.
Using id and headers attributes (for complex tables):
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
<th id="phone">Phone</th>
</tr>
<tr>
<td headers="name">John Smith</td>
<td headers="email">john@example.com</td>
<td headers="phone">555-1234</td>
</tr>
</table>The headers attribute contains a space-separated list of id values from the header cells associated with that data cell.
Provide a Caption and Summary
Use the <caption> element to provide a title for the table, and consider adding a summary of the table's structure for complex tables:
<table>
<caption>Quarterly Sales by Region</caption>
<!-- Add a description for screen readers only using CSS -->
<p class="sr-only">This table compares quarterly sales figures across four regions. Regions are listed in rows, with quarters in columns.</p>
<!-- Table content here -->
</table>The ARIA attribute aria-describedby can also be used to associate a description with a table.
Additional Accessibility Tips
- Keep tables simple when possible - consider breaking complex tables into multiple simpler ones
- Use proper markup with
<thead>,<tbody>, and<tfoot> - Avoid using tables for layout - use CSS layout properties instead
- Test with screen readers to ensure your tables make sense when read aloud
- Provide alternative views for complex data when possible (e.g., graphs, simplified tables)
Table Styling Basics
While CSS is the preferred method for comprehensive table styling (which we'll cover in detail in future lessons), HTML provides some basic attributes for simple styling:
Basic HTML Table Styling
<!-- These attributes are presentational and generally discouraged in favor of CSS -->
<table border="1" cellspacing="0" cellpadding="5" width="80%">
<!-- Table content here -->
</table>Note: These attributes are considered presentational and are generally discouraged in modern HTML. They're mentioned here for completeness, but CSS should be used for styling in practice.
Preview of CSS Styling (for future lessons)
For reference, here's a preview of how tables are styled with CSS:
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f5f5f5;
}
caption {
font-weight: bold;
margin-bottom: 10px;
}
</style>This CSS creates a professional-looking table with borders, alternating row colors, hover effects, and proper spacing. We'll explore these techniques in depth when we cover CSS.
Common Use Cases for Tables
Appropriate Uses for Tables
Tables should be used for tabular data where rows and columns have meaningful relationships:
- Financial data: Budgets, price comparisons, financial reports
- Schedules: Timetables, calendars, event agendas
- Product comparisons: Features, specifications, pricing options
- Statistics: Sports scores, demographics, scientific data
- Catalogs: Product listings with specifications
When Not to Use Tables
In the early days of the web, tables were often misused for page layout. This practice is now strongly discouraged for several reasons:
- Accessibility: Screen readers interpret tables as data, causing confusion
- Responsiveness: Tables don't easily adapt to different screen sizes
- Performance: Table layouts are often slower to render
- Maintainability: Table layouts are harder to update and modify
Instead of tables for layout, use modern CSS techniques like Flexbox and Grid, which we'll cover in future lessons.
Practical Table Examples
Product Comparison Table
<table>
<caption>Smartphone Comparison 2025</caption>
<thead>
<tr>
<th scope="col">Feature</th>
<th scope="col">TechPhone 15</th>
<th scope="col">GalaxyPlus 26</th>
<th scope="col">PixelPro 9</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Display</th>
<td>6.7" OLED</td>
<td>6.8" AMOLED</td>
<td>6.5" LTPO</td>
</tr>
<tr>
<th scope="row">Battery</th>
<td>4,500 mAh</td>
<td>5,000 mAh</td>
<td>4,800 mAh</td>
</tr>
<tr>
<th scope="row">Camera</th>
<td>48MP Triple</td>
<td>108MP Quad</td>
<td>50MP Triple</td>
</tr>
<tr>
<th scope="row">Storage</th>
<td>128GB / 256GB</td>
<td>256GB / 512GB</td>
<td>128GB / 256GB / 512GB</td>
</tr>
<tr>
<th scope="row">Price</th>
<td>$999</td>
<td>$1,099</td>
<td>$899</td>
</tr>
</tbody>
</table>Schedule/Timetable
<table>
<caption>Weekly Class Schedule</caption>
<thead>
<tr>
<th scope="col">Time</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">9:00 AM</th>
<td>HTML</td>
<td>CSS</td>
<td>JavaScript</td>
<td>Python</td>
<td>Project Work</td>
</tr>
<tr>
<th scope="row">11:00 AM</th>
<td>CSS</td>
<td>JavaScript</td>
<td>HTML</td>
<td>Project Work</td>
<td>Python</td>
</tr>
<tr>
<th scope="row">1:00 PM</th>
<td colspan="5">Lunch Break</td>
</tr>
<tr>
<th scope="row">2:00 PM</th>
<td>JavaScript</td>
<td>Python</td>
<td>CSS</td>
<td>HTML</td>
<td rowspan="2">Project Presentations</td>
</tr>
<tr>
<th scope="row">4:00 PM</th>
<td>Project Work</td>
<td>Project Work</td>
<td>Project Work</td>
<td>Project Work</td>
</tr>
</tbody>
</table>Financial Report
<table>
<caption>Quarterly Financial Summary 2025</caption>
<thead>
<tr>
<th scope="col">Department</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Sales</th>
<td>$235,500</td>
<td>$253,200</td>
<td>$289,700</td>
<td>$312,400</td>
<td>$1,090,800</td>
</tr>
<tr>
<th scope="row">Marketing</th>
<td>$53,200</td>
<td>$59,800</td>
<td>$63,400</td>
<td>$68,900</td>
<td>$245,300</td>
</tr>
<tr>
<th scope="row">Development</th>
<td>$87,400</td>
<td>$89,300</td>
<td>$91,500</td>
<td>$92,800</td>
<td>$361,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total Expenses</th>
<td>$140,600</td>
<td>$149,100</td>
<td>$154,900</td>
<td>$161,700</td>
<td>$606,300</td>
</tr>
<tr>
<th scope="row">Net Profit</th>
<td>$94,900</td>
<td>$104,100</td>
<td>$134,800</td>
<td>$150,700</td>
<td>$484,500</td>
</tr>
</tfoot>
</table>Combining Lists and Tables
Sometimes you'll want to combine lists and tables to create more complex structures. Here are some common scenarios:
Lists Inside Table Cells
You can place lists inside table cells to organize related items:
<table>
<tr>
<th>Department</th>
<th>Team Members</th>
<th>Projects</th>
</tr>
<tr>
<td>Development</td>
<td>
<ul>
<li>John Smith (Lead)</li>
<li>Maria Garcia</li>
<li>Robert Chen</li>
</ul>
</td>
<td>
<ol>
<li>Website Redesign</li>
<li>Mobile App Development</li>
<li>API Integration</li>
</ol>
</td>
</tr>
<tr>
<td>Marketing</td>
<td>
<ul>
<li>Sarah Johnson (Lead)</li>
<li>Michael Brown</li>
<li>Lisa Davis</li>
</ul>
</td>
<td>
<ol>
<li>Social Media Campaign</li>
<li>Content Strategy</li>
<li>Email Marketing</li>
</ol>
</td>
</tr>
</table>This creates a table where each cell in the "Team Members" column contains an unordered list, and each cell in the "Projects" column contains an ordered list.
Tables Inside List Items
You can also include tables within list items for more complex structures:
<h2>Product Categories</h2>
<ul>
<li>
<h3>Electronics</h3>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Laptop</td>
<td>$899</td>
<td>15</td>
</tr>
<tr>
<td>Smartphone</td>
<td>$599</td>
<td>23</td>
</tr>
</table>
</li>
<li>
<h3>Home Goods</h3>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Coffee Maker</td>
<td>$49</td>
<td>12</td>
</tr>
<tr>
<td>Toaster</td>
<td>$29</td>
<td>8</td>
</tr>
</table>
</li>
</ul>This creates a list of product categories, with each category containing a table of specific products.
Best Practices for Combining Lists and Tables
- Keep it simple when possible - deeply nested structures can become confusing
- Maintain proper HTML structure - don't forget closing tags
- Consider accessibility - complex structures may be challenging for screen readers
- Use CSS for styling rather than relying on default browser styling
- Test responsiveness - nested structures can be particularly challenging on small screens
Practical Exercise
Let's apply what we've learned with a practical exercise that combines lists and tables.
Exercise: Create a Product Catalog
Your task is to create an HTML structure for a product catalog that includes:
- At least three product categories (using a list)
- For each category, a table showing products with:
- Product name
- Price
- Features (as a nested list)
- Availability
- Use appropriate semantic structure with proper headers, captions, etc.
- Include at least one cell that spans multiple rows or columns
Starting Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Catalog</title>
</head>
<body>
<h1>Our Product Catalog</h1>
<!-- Your product catalog structure here -->
</body>
</html>Example Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Catalog</title>
</head>
<body>
<h1>Our Product Catalog</h1>
<ul class="product-categories">
<li>
<h2>Laptops</h2>
<table>
<caption>Available Laptop Models</caption>
<thead>
<tr>
<th scope="col">Model</th>
<th scope="col">Price</th>
<th scope="col">Features</th>
<th scope="col">Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>ProBook Ultra</td>
<td>$1,299</td>
<td>
<ul>
<li>15.6" 4K Display</li>
<li>16GB RAM</li>
<li>512GB SSD</li>
<li>Intel i7 Processor</li>
</ul>
</td>
<td>In Stock</td>
</tr>
<tr>
<td>ThinBook Air</td>
<td>$899</td>
<td>
<ul>
<li>13.3" HD Display</li>
<li>8GB RAM</li>
<li>256GB SSD</li>
<li>Intel i5 Processor</li>
</ul>
</td>
<td>Limited Stock</td>
</tr>
<tr>
<td>GamerPro X</td>
<td>$1,799</td>
<td>
<ul>
<li>17" 144Hz Display</li>
<li>32GB RAM</li>
<li>1TB SSD</li>
<li>RTX 4080 GPU</li>
<li>AMD Ryzen 9 Processor</li>
</ul>
</td>
<td>Pre-order</td>
</tr>
</tbody>
</table>
</li>
<li>
<h2>Smartphones</h2>
<table>
<caption>Available Smartphone Models</caption>
<thead>
<tr>
<th scope="col">Model</th>
<th scope="col">Price</th>
<th scope="col">Features</th>
<th scope="col">Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Galaxy Ultra</td>
<td>$1,099 (256GB)</td>
<td rowspan="2">
<ul>
<li>6.8" AMOLED Display</li>
<li>108MP Camera</li>
<li>5000mAh Battery</li>
<li>Waterproof (IP68)</li>
</ul>
</td>
<td>In Stock</td>
</tr>
<tr>
<td>$1,299 (512GB)</td>
<td>2-Day Shipping</td>
</tr>
<tr>
<td>iPhone Pro</td>
<td>$999</td>
<td>
<ul>
<li>6.1" Super Retina Display</li>
<li>Triple Camera System</li>
<li>All-day Battery</li>
<li>Face ID</li>
</ul>
</td>
<td>In Stock</td>
</tr>
<tr>
<td>Pixel Pro</td>
<td>$899</td>
<td>
<ul>
<li>6.7" OLED Display</li>
<li>50MP Camera</li>
<li>24-hour Battery</li>
<li>Advanced AI Features</li>
</ul>
</td>
<td>Low Stock</td>
</tr>
</tbody>
</table>
</li>
<li>
<h2>Smart Home Devices</h2>
<table>
<caption>Available Smart Home Products</caption>
<thead>
<tr>
<th scope="col" colspan="2">Product</th>
<th scope="col">Price</th>
<th scope="col">Features</th>
<th scope="col">Availability</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" rowspan="3">Smart Speakers</th>
<td>Echo Plus</td>
<td>$129</td>
<td>
<ul>
<li>360° Audio</li>
<li>Voice Assistant</li>
<li>Smart Home Hub</li>
</ul>
</td>
<td>In Stock</td>
</tr>
<tr>
<td>Home Mini</td>
<td>$49</td>
<td>
<ul>
<li>Compact Design</li>
<li>Voice Control</li>
<li>Multi-room Audio</li>
</ul>
</td>
<td>In Stock</td>
</tr>
<tr>
<td>HomePod</td>
<td>$299</td>
<td>
<ul>
<li>High-fidelity Audio</li>
<li>Room-sensing Technology</li>
<li>Smart Home Control</li>
</ul>
</td>
<td>Limited Stock</td>
</tr>
<tr>
<th scope="row" rowspan="2">Smart Displays</th>
<td>Nest Hub</td>
<td>$129</td>
<td>
<ul>
<li>7" Touch Display</li>
<li>Voice Control</li>
<li>Smart Home Dashboard</li>
</ul>
</td>
<td>In Stock</td>
</tr>
<tr>
<td>Echo Show</td>
<td>$179</td>
<td>
<ul>
<li>10" HD Display</li>
<li>Video Calling</li>
<li>Built-in Camera</li>
<li>Entertainment Hub</li>
</ul>
</td>
<td>In Stock</td>
</tr>
</tbody>
</table>
</li>
</ul>
</body>
</html>Summary and Best Practices
Lists Recap
- Unordered Lists (
<ul>) - For collections where order doesn't matter - Ordered Lists (
<ol>) - For sequences where order is important - Description Lists (
<dl>) - For name-value pairs or term-definition relationships - List Items (
<li>) - Individual entries in ordered and unordered lists - Term (
<dt>) and Definition (<dd>) - Pairs in description lists
Lists can be nested to create hierarchical structures, and different list types can be combined for complex information organization.
Tables Recap
- Table Container (
<table>) - The wrapper for the entire table - Table Row (
<tr>) - Defines a row of cells - Table Header (
<th>) - Defines a header cell - Table Data (
<td>) - Defines a data cell - Structural Elements:
<caption>- Table title or description<thead>- Header section<tbody>- Main content section<tfoot>- Footer section<colgroup>and<col>- Column definitions
- Cell Spanning:
colspanattribute - Makes a cell span multiple columnsrowspanattribute - Makes a cell span multiple rows
Tables should be used for tabular data, not for page layout. Use appropriate structural elements and attributes to create accessible, well-organized tables.
Overall Best Practices
- Use semantic elements according to their intended purpose
- Keep accessibility in mind - use proper structure and attributes
- Balance complexity with usability - overly complex structures can confuse users
- Use CSS for styling rather than presentational HTML attributes
- Test on multiple devices to ensure responsive behavior
- Consider the needs of all users, including those with disabilities