Defence Web Development Course (HTML)

Lecture-3: HTML Nested Lists & Tables: The Complete Guide with 10 Detailed Examples

Class Content:

• List
• Nested List
• List with Heading
• ntroduction to HTML Tables
• Rows and Columns
• Material Icon Theme Extension
• table Tag
• Adding Borders to a Table
• Table Row
• Table Data
• Table Header, Body, and Footer (thead, tbody, tfoot)
• Understanding Colspan and Rowspan

📖 Full detailed notes here: Open in Notion

Class Summary:

• List

  HTML lists allow web developers to group related items together. There are three types of lists: unordered lists (<ul>) with bullet points, ordered lists (<ol>) with numbers/letters, and description lists (<dl>) for terms and descriptions.

• Nested List

  Nested lists are lists within other list items, creating a hierarchical structure. This is achieved by placing a complete <ul> or <ol> element inside an <li> element of another list.

• List with Heading

  Lists can be combined with heading tags (<h1> to <h6>) to provide context or categories for list items. Headings help organize and label different sections of content within lists.

• Introduction to HTML Tables

  HTML tables are used to display tabular data in rows and columns. The <table> element is the container for all table components, including rows, columns, headers, and data cells.

• Rows and Columns

  Tables consist of rows (<tr>) and columns (created by <td> or <th> cells). Each row represents a horizontal set of data, while columns represent vertical data groupings.

• Material Icon Theme Extension

  Material Icon Theme is a popular extension for code editors like VS Code that provides recognizable icons for different file types, including HTML files, making it easier to navigate projects visually.

• table Tag

  The <table> tag defines an HTML table. It serves as the container for all other table-related elements, including <tr>, <td>, <th>, <thead>, <tbody>, and <tfoot>.

• Adding Borders to a Table

  Borders can be added to tables using CSS or the deprecated border attribute. The CSS border property provides more control over border style, width, and color for tables and individual cells.

• Table Row

  The <tr> tag defines a row in an HTML table. Each <tr> element contains one or more <td> (data cell) or <th> (header cell) elements representing the columns in that row.

• Table Data

  The <td> tag defines a standard data cell in an HTML table. These cells contain the actual content of the table. Each <td> element creates a single cell within a table row.

• Table Header, Body, and Footer (thead, tbody, tfoot)

  HTML tables can be semantically divided into header (<thead>), body (<tbody>), and footer (<tfoot>) sections. This improves accessibility and allows for separate styling of different table parts.

• Understanding Colspan and Rowspan

  Colspan and rowspan attributes allow table cells to span multiple columns or rows. Colspan extends a cell horizontally across columns, while rowspan extends a cell vertically across rows.

📂Additional Resources:

• 💻 Sample Code and Practice Questions: View on GitHub

• 💻 Blog Article: View on GitHub

Practice Questions:

1. The question was provided on the GitHub repo

Ask Your Question: