HTML Table

table

1Table is a grid organised in rows and columns much like spreadsheets(Combination of rows and columns).
2Cell - Intersection of rows and columns.
3HTML tables allow you to display tabular data in a structured format.
4In Html we have <table>..</table> tag to create tables.
5<table> tag is a container tag.
6In Html, tables are created row by row.
7To represent table row we have <tr>..</tr> tag.(It is container tag)
8To create cells we have <th>..</th> and <td>..</td> tags where <th> represents column heading cells and <td> represents data cells.
9Both <th> and <td> tags are container tags.

1The process of merging or combining two or more adjacent cells in a table
2We can span the cells in two ways.
3 Column-wise - To span the cells on column basis we have colspan attribute.
Syntax: colspan = 'number of cell space'.
Example: colspan='2'(Here, two cells are spanned on column basis)
4Row-wise - To span the cells on row basis we have rowspan attribute.
Syntax: rowspan = 'number of cell space'.
Example: rowspan='3'(Here, three cells are spanned on row basis)
5Note: rowspan and colspan can be applied only on <td> and <th> tags and not on <tr> tag.

1The space around the cell is known as cell spacing.
2To set the cell spacing, you can use the cellspacing attribute on the <table> element.
3Syntax: cellspacing='value'(value in px)
4Example: cellspacing='5px' (Here, 5px space is created around the cell)

1The space between the cell content and cell borders is known as cell padding.
2To set the cell padding, you can use the cellpadding attribute on the <table> element.
3Syntax: cellpadding='value'(value in px)
4Example: cellpadding='5px' (Here, 5px space is created between the cell content and cell border)

1In Html we can group the cells on column basis by using <colgroup>..</colgroup> tag.
2<colgroup> tag is a container tag.
3To represent table columns in <colgroup> we have <col> tag.
4<col> tag is a non-container tag.
5The sequence of <col> tag represents the table columns respectively.

1The <thead>, <tbody>, and <tfoot> tags are used to group content within an HTML table.
2 These tags help to structure the table and make it easier to read and understand.
3Thead tag - <thead>..</thead> tag represents the top most part of our table.<thead> tag is a container tag.The column headings of table should be written within <thead> tag.<thead> should be placed before the <tbody> tag.
4Tbody tag - <tbody>..</tbody> tag represents the main content of the table.<tbody> tag is a container tag.The row data/content should be written within the <tbody> tag.<tbody> tag should be placed after the <thead> tag
5Tfoot tag - <tfoot>..</tfoot> tag represents the bottom part of the table(i.e., footer content).<tfoot> tag is a container tag.The conclusion/summary of the table should be written within the <tfoot> tag.<tfoot> tag should be placed after the <tbody> tag.
6Note:- <thead>, <tbody> and <tfoot> tags are not mandatory but highly recommended to use while working with tables.