Skip to content
HTML&CSS

Lists and Tables

Welcome to this section of our HTML and CSS course! So far, we’ve learned how to structure our entire web page, format text with semantic meaning, and even connect pages with links and embed images. Now, we’re going to explore how to organize information effectively using lists and display structured data using tables.

These elements are vital for presenting information in a clear, readable, and accessible way. Whether you’re making a navigation menu, a recipe, a definition glossary, or presenting financial data, lists and tables are your go-to tools.

Lists: Organizing Information

HTML provides different types of lists to help you structure content semantically.

Unordered Lists: <ul> and <li>

  • Purpose: Unordered lists are used for collections of items where the order doesn’t matter. They are typically displayed with bullet points.

  • How they work:

    • The <ul> (unordered list) tag is the container for the entire list.
    • Each item in the list is enclosed within an <li> (list item) tag.

    My Favorite Fruits

    • Apples
    • Bananas
    • Oranges
    • Grapes
     
    <h3>My Favorite Fruits</h3>
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Oranges</li>
      <li>Grapes</li>
    </ul>

  • Technical Detail: The <ul> element represents a list of items where the order of the items is not semantically significant. It is a block-level element. Browsers typically render <li> elements within an <ul> with a default bullet marker (e.g., a disc or circle), which can be changed via CSS.

  • Simple Words: This is for a list where the order doesn’t matter, like a shopping list. Each item gets a bullet point.

Ordered Lists: <ol> and <li>

  • Purpose: Ordered lists are used for collections of items where the sequence or order does matter. They are typically displayed with numbers.

  • How they work:

    • The <ol> (ordered list) tag is the container for the entire list.
    • Each item in the list is enclosed within an <li> (list item) tag.

    Steps to Make Tea

    1. Boil water.
    2. Place tea bag in mug.
    3. Pour hot water over tea bag.
    4. Steep for 3-5 minutes.
    5. Add sugar or milk (optional).
     
    <h3>Steps to Make Tea</h3>
    <ol>
      <li>Boil water.</li>
      <li>Place tea bag in mug.</li>
      <li>Pour hot water over tea bag.</li>
      <li>Steep for 3-5 minutes.</li>
      <li>Add sugar or milk (optional).</li>
    </ol>

  • Technical Detail: The <ol> element represents a list of items where the order of the items is semantically significant. Like <ul>, it’s a block-level element. Browsers typically render <li> elements within an <ol> with a default numbering system (e.g., Arabic numerals).

  • Simple Words: This is for a list where the order is important, like steps in a recipe or ranked items. Each item usually gets a number.

type and start Attributes (for <ol>)

While it’s generally best to control styling with CSS, HTML does offer attributes for ordered lists to change numbering types and starting points:

  • type attribute: Specifies the type of marker to use.

    • 1 (default, numbers)
    • a (lowercase letters)
    • A (uppercase letters)
    • i (lowercase Roman numerals)
    • I (uppercase Roman numerals)
    • Example: <ol type="a"> will list items as a., b., c.

  • start attribute: Specifies the starting value of the list items.

    • Example: <ol start="5"> will start numbering from 5.
    1. Item C
    2. Item D
    3. Item E
     
    <ol type="A" start="3">
      <li>Item C</li>
      <li>Item D</li>
      <li>Item E</li>
    </ol>

  • Technical Detail: The type and start attributes for <ol> provide declarative ways to control the numbering style and sequence. While useful for specific cases, for complex styling or dynamic content, CSS counters (list-style-type, counter-reset, counter-increment) offer more powerful and flexible control over list markers.

  • Simple Words: You can change ordered lists to use letters (A, B, C), Roman numerals (I, II, III), or even start counting from a different number, right in the HTML.

Description Lists: <dl>, <dt>, <dd>

  • Purpose: Description lists (formerly definition lists) are used to list terms and their corresponding descriptions or values. They are great for glossaries, FAQs, or showing metadata.

  • How they work:

    • The <dl> (description list) tag is the container for the entire list.
    • Each term is enclosed in a <dt> (description term) tag.
    • Each description is enclosed in a <dd> (description description) tag.

    Web Terminology

    HTML
    HyperText Markup Language, the standard markup language for documents designed to be displayed in a web browser.
    CSS
    Cascading Style Sheets, a style sheet language used for describing the presentation of a document written in HTML. 
    <h3>Web Terminology</h3>
    <dl>
      <dt>HTML</dt>
      <dd>
        HyperText Markup Language, the standard markup language for documents
        designed to be displayed in a web browser.
      </dd>
    

      <dt>CSS</dt>
      <dd>
        Cascading Style Sheets, a style sheet language used for describing the
        presentation of a document written in HTML.
      </dd>
    </dl>

  • Technical Detail: The <dl> element represents an association list consisting of zero or more name-value groups (terms and descriptions). It’s a semantic element that explicitly defines a relationship between the <dt> (term) and its subsequent <dd> (description) elements. Multiple <dd> elements can be associated with a single <dt>.

  • Simple Words: This list is perfect for explaining things, like a dictionary. You have a “term” and then its “description.”

Tables: Organizing Tabular Data

The <table> element is used to display data in a tabular (row and column) format. It’s ideal for presenting structured data like financial reports, product specifications, or schedules. Avoid using tables for page layout; that’s what CSS is for!

Product Price Stock
Laptop $1200 50
Mouse $25 200 
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$1200</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$25</td>
      <td>200</td>
    </tr>
  </tbody>
</table>

Semantic Structure for Tables: <thead>, <tbody>, <tfoot>

HTML5 encourages using these elements to semantically group the different parts of a table. This is important for accessibility and for browsers to understand the table’s structure.

  • <thead> (Table Head):

    • Purpose: Contains the header content of the table. This typically includes the column titles.
    • Simple Words: The very top part of your table, where you put the titles for each column.

  • <tbody> (Table Body):

    • Purpose: Contains the main data content of the table.
    • Simple Words: The main body of your table, where all your actual data goes.

  • <tfoot> (Table Foot):

    • Purpose: Contains the footer content of the table, such as sums, totals, or notes.
    • Simple Words: The very bottom part of your table, often used for totals or summaries.

  • Technical Detail (Table Structure): Using <thead>, <tbody>, and <tfoot> provides semantic structure to your tables. Browsers can use this to enable features like scrolling table bodies while keeping headers/footers fixed, or for printing. This grouping is critical for screen readers to navigate complex tables efficiently. The <tfoot> should actually appear before <tbody> in the HTML source if you want the browser to render it correctly before the body content loads, although visually it always appears at the bottom.

Core Table Elements: <tr>, <th>, <td>

Inside <thead>, <tbody>, and <tfoot>, you’ll use these elements to define rows, headers, and data cells:

  • <tr> (Table Row):
    • Purpose: Defines a single row in the table.
    • Simple Words: A single horizontal line in your table.
  • <th> (Table Header):
    • Purpose: Defines a header cell within a table row. Content in <th> tags is typically bold and centered by default and has semantic meaning as a header for a column or row.
    • Simple Words: A title for a column or a row. It’s usually bold and tells you what kind of data is in that column/row.
  • <td> (Table Data):
    • Purpose: Defines a standard data cell within a table row.
    • Simple Words: A single box in your table where you put the actual data.

rowspan and colspan Attributes

These attributes are used within <th> or <td> tags to make cells span across multiple rows or columns, respectively.

  • colspan attribute:

    • Purpose: Makes a cell span across multiple columns. The value is the number of columns the cell should span.
    • Example: <th colspan="2">Name and Age</th> (This header would span two columns)

  • rowspan attribute:

    • Purpose: Makes a cell span across multiple rows. The value is the number of rows the cell should span.
    • Example: <td rowspan="2">Email</td> (This data cell would span two rows)
    Personal Info Contact
    Name Age Email
    Ali 30 ali@example.com
    Sara 25 
    <table>
      <thead>
        <tr>
          <th colspan="2">Personal Info</th>
          <th>Contact</th>
        </tr>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ali</td>
          <td>30</td>
          <td rowspan="2">ali@example.com</td>
        </tr>
        <tr>
          <td>Sara</td>
          <td>25</td>
        </tr>
      </tbody>
    </table>

  • Technical Detail: colspan and rowspan are used to merge cells, creating more complex table layouts. The value assigned to these attributes indicates how many columns or rows the cell should visually occupy. Proper use of these attributes is crucial for correctly structuring complex data tables, but they can also make tables harder for screen readers to interpret if not used carefully alongside proper heading structures.

  • Simple Words: colspan makes one box spread out across many columns (like merging two columns into one wide one). rowspan makes one box spread out across many rows (like merging two rows into one tall one).

Accessibility Considerations for Tables

Tables can be challenging for users with screen readers if not properly structured. Here are key accessibility points:

  1. Use <th> for Headers: Always use <th> for column and row headers, not just <td> with bold styling. This tells screen readers which cells are headers.
  2. Use <thead>, <tbody>, <tfoot>: These help screen readers understand the distinct sections of the table.
  3. scope attribute (for <th>): For more complex tables, use the scope attribute on <th> to explicitly tell screen readers whether a header applies to a col (column) or row.
    • Example: <th scope="col">Product Name</th> or <th scope="row">January</th>
  4. <caption> element: Provides a descriptive title for the table, which is very helpful for all users, especially those using assistive technologies.
    • Example: <table><caption>Monthly Sales Report</caption>...</table>
  5. Avoid using tables for layout: This is the most crucial rule. Tables should only be used for tabular data. Using them for visual layout can break accessibility (screen readers will read content in table order, not visual order) and makes your code inflexible.
  • Technical Detail (Accessibility): Semantic table markup is paramount for accessibility. <th> with scope attributes allows assistive technologies to associate data cells with their respective headers, making complex tables navigable. <caption> provides a programmatic name for the table. Using ARIA attributes (e.g., aria-labelledby, aria-describedby) can further enhance accessibility for highly complex tables, but proper native HTML semantics should always be the first line of defense.
  • Simple Words: Make sure your tables are built correctly so everyone, including people using screen readers, can easily understand the data. Always use the <th> tags for titles, give your table a title with <caption>, and never use tables just to make your webpage look a certain way.

Excellent! You now have the knowledge to structure lists of any kind and present complex data beautifully in tables. These are essential skills for building well-organized and accessible web content. Next up, we’ll learn about how to interact with users by building forms!

Next Step: Ready to collect information from your users? Click here to go to the next section: Link to Section 7: Forms: Collecting User Input (Placeholder)