What is a <div> ?

• The <div> tag is a block-level container used to group HTML elements together.
• It is often used to apply styles or organize content in sections.

Explanation

• The <div> tag allows you to group elements together into one section. It does not have a visual appearance but can be styled with CSS.
• Commonly used for layout and structure.

Nesting HTML Elements

What is Nesting?

• Nesting means placing one HTML element inside another. This is how most complex HTML structures are built.

Explanation

• In this example, an unordered list is nested inside a <div> The list is further nested inside the category <h2> heading.
• Nesting helps create a clear hierarchy and structure for the content.

Introduction to Tables

What is a Table?

• Tables are used to display data in a structured, grid format.
• A table consists of rows (<tr>), and each row contains cells (<td>). The table can also have header cells (<th>).

• The <table> tag creates the table.
• <tr> defines a row, <th> defines a header cell, and <td> defines a data cell.
• The border=”1″ attribute is used to create visible borders for the table cells.

Adding Table Headings and Captions

• The <caption> tag is used to add a title to the table.
• The <th> tag is used for header cells, which are bold and centered by default.

Explanation

• The <caption> tag adds a title to the table, which is typically placed above the table.
• <th> is used for table headings, which make the table easier to read and understand.

Advanced Table Features Merging Cells

Merging Cells with colspan and rowspan

• You can merge table cells using the colspan and rowspan attributes. colspan merges columns, and rowspan merges rows.

Explanation

• colspan=”2″ merges two columns into one.
• rowspan=”2″ merges two rows into one.

Your task, do practice on it

• Create a product price table that includes at least three columns: “Product”, “Price”, and “Quantity”.
• Add a caption for the table.
• Use colspan and rowspan to merge cells where appropriate (e.g., merge product details like price and warranty into one row).

Simple Table

Let’s make a simple table of employees and their salary table data, We have created a table with 3 columns and 4 rows now let’s add some details in the table cells.

Name	Salary	Date
Anees	15000	01-02-2025
Ali	20000	01-02-2025
Waris	23000	01-02-2025

if you like this tutorial and learned some knowledge share this tutorial with your friends and to the global network (internet).