Lesson 3

HTML Nested Lists & Tables


1.Nested Lists

A nested list in HTML is a list that contains another list within one of its list items. This is a powerful way to create a hierarchical or multi-level structure for your content. The key to creating a nested list is to place the child list {either <ul> or <ol> } inside a <li> element of the parent list.

For example, you could have an unordered list of "Courses" and within a list item for "Web Development," you could nest another ordered list for "HTML," "CSS," and "JavaScript". This structure makes the relationship between the items clear and is commonly used for things like navigation menus and outlines.

Nested Lists A nested list in HTML is a list that contains another list within one of its list items. This is a powerful way to create a hierarchical or multi-level structure for your content. The key to creating a nested list is to place the child list (either <ul> or <ol> ) inside a <li> element of the parent list. For example, you could have an unordered list of "Courses" and within a list item for "Web Development," you could nest another ordered list for "HTML," "CSS," and "JavaScript." This structure makes the relationship between the items clear and is commonly used for things like navigation menus and outlines. It is important to remember that the nested list should be a child of a list item <li> and not a direct child of the parent list {<ul> or <ol> }. This is a common mistake and will cause validation errors and unpredictable rendering.

example

2.Tables

HTML tables are used to present tabular data, which is information organized in a two-dimensional grid of rows and columns. They are designed for data that would be suitable for a spreadsheet, such as financial reports, schedules, or product comparisons.

The basic structure of an HTML table consists of the (table) element, which acts as the main container. Inside the table, you use <tr> elements to define table rows. Within each row, <th> elements are used for table headers (which are usually bold and centered by default) and <td> elements are used for standard table data cells.

Tables can also include more complex elements like <thead>, <tbody>, and <tfoot> to semantically group the header, body, and footer of the table. You can also use the colspan and rowspan attributes on <th> or <td> elements to make a single cell span across multiple columns or rows, which is useful for creating more complex layouts within the table.

table example