Topics

#table

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

#Caption Tag

1. 1. It is used to give the title to the table.
2. 2. <caption>..</caption> tag is a container tag.
3. 3. We have to write <caption> tag within the <table> tag.

#Cell Spanning

1. 1. The process of merging or combining two or more adjacent cells in a table
2. 2. We can span the cells in two ways.
3. 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)
4. 4. Row-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)
5. 5. Note: rowspan and colspan can be applied only on <td> and <th> tags and not on <tr> tag.

#Cell Spacing

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

#Cell Padding

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

#Column Grouping

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

#Thead,Tbody and Tfoot tag

1. 1. The <thead>, <tbody>, and <tfoot> tags are used to group content within an HTML table.
2. 2. These tags help to structure the table and make it easier to read and understand.
3. 3. Thead 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.
4. 4. Tbody 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
5. 5. Tfoot 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.
6. 6. Note:- <thead>, <tbody> and <tfoot> tags are not mandatory but highly recommended to use while working with tables.