HTML tables are used to display data in a structured format with rows and columns.

Table

1. Table is a grid organised in rows and columns much like spreadsheets (Combination of rows and columns).

2. Cell - Intersection of rows and columns.

3. HTML tables allow you to display tabular data in a structured format.

4. In HTML we have <table>..</table> tag to create tables.

5. <table> tag is a container tag.

6. In HTML, tables are created row by row.

7. To represent a table row, we have <tr>..</tr> tag. (It is a container tag.)

8. To create cells, we have <th>..</th> and <td>..</td> tags, where <th> represents column heading cells and <td> represents data cells.

9. Both <th> and <td> tags are container tags.

Caption Tag

1. It is used to give the title to the table.

2. <caption>..</caption> tag is a container tag.

3. We have to write <caption> tag within the <table> tag.

Cell Spanning

1. The process of merging or combining two or more adjacent cells in a table.

2. We can span the cells in two ways.

3. Column-wise - To span the cells on a column basis, we use the colspan attribute.

Syntax: colspan = 'number of cell space'.

Example: colspan='2' (Here, two cells are spanned on the column basis).

4. Row-wise - To span the cells on a row basis, we use the rowspan attribute.

Syntax: rowspan = 'number of cell space'.

Column Grouping

1. In HTML we can group the cells on a column basis by using <colgroup>..</colgroup> tag.

2. <colgroup> tag is a container tag.

3. To represent table columns in <colgroup> we have <col> tag.

4. <col> tag is a non-container tag.

5. The sequence of <col> tag represents the table columns respectively.

Thead, Tbody, and Tfoot Tags

1. The <thead>, <tbody>, and <tfoot> tags are used to group content within an HTML table.

2. These tags help structure the table and make it easier to read and understand.

3. <thead> represents the table header and should be placed before <tbody>.

4. <tbody> contains the main content of the table.

5. <tfoot> is used for the table footer and should be placed after <tbody>.

6. These tags are not mandatory but are highly recommended for better structure.

Example

Monthly Sales Report