What is a div element tag ?

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.

HTML div tag example

• 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 ?

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

An HTML Nested list

• An unordered list is nested inside a <div> element tag and the list is further nested inside the category <h2> heading. Nesting helps create a clear hierarchy and structure for the content.

Introduction to Html Tables

What is a Table ?

• The html Tables are used to display data in a structured and in grid format. A table consists of rows <tr> tag, and each row contains cells <td> tag. The table can also have header cells <th> tag. Tables refers to arrange the data into the rows and columns.

Simple html table shows a company, contact and country data in organized way and also in a grid format to understand quickly and easily.

• The <table> tag creates the table. <tr> tag defines a row, <th> tag defines a header cell, and <td> tag defines a data cell and the border 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 and <th> tag is used for header cells, which are bold and centered by default.

Table header and captions visual example for understanding.

• The <caption> tag adds a title to the table, which is typically placed above the table and <th> tag is used for table headings or table header, 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.

Merging tables cells that span two columns

Simple Html Employee Table shows a monthly salary data

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

Name	Salary	Date
Anees Abro	15000 Rupees	01-02-2025
Kamran Bhutto	20000 Rupees	01-03-2025
Akram Ali	23000 Rupees	01-04-2025

Complete the task which is given below to improve your code practice.

• 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 merge product details like price and warranty into one row.

If you like this tutorial and learned some knowledge share this tutorial with your friends and to the global network. On your social media accounts.