⇓

HTML Advanced structures

The third lecture covers how to structure complex, hierarchical data using nested lists and HTML tables. 📋

Nested Lists

This section explains how to solve the problem of creating lists that have sub-lists.

• The Problem: A simple list can't represent hierarchical data, like a country with a list of its cities.
• The Solution: You create a Nested List by placing a new <ul> or <ol> tag inside an <li> tag of a parent list. This allows you to create a "list within a list" structure that can be nested to any depth.

HTML Tables

This part covers how to display data in a grid of rows and columns.

Basic Structure

• The Problem: You need to display data in a structured, grid-like format, like a spreadsheet.
• The Solution:
  • You start with the <table> tag to define the table. You can add a border="1" attribute to make the grid lines visible.
  • You use the <tr> (Table Row) tag to create each horizontal row.
  • Inside each row, you use the <td> (Table Data) tag to create each cell for your data.

Semantic Structure

• The Problem: The first row of a table often contains headers, and the last row might contain totals or a conclusion. Using regular <td> tags for these doesn't convey their special meaning.
• The Solution:
  • Use the <th> (Table Header) tag for header cells to give them semantic importance.
  • Organize the table into logical sections for professional and readable code: <thead> for the header, <tbody> for the main data, and <tfoot> for the footer or summary row.

Advanced Features: Merging Cells

• The Problem: Sometimes a single cell needs to stretch across multiple columns or rows.
• The Solution:
  • colspan: An attribute you add to a <th> or <td> to make it span horizontally across multiple columns.
  • rowspan: An attribute that makes a cell span vertically across multiple rows.

Sources: Internet. All copyrights © reserved #DarkProgrammer, Let's connect.