HTML table is an arrangement of data in rows and columns.
HTML Tables allow us to arrange data like images, text, and numbers into rows and columns.
You can create a table using a <table> tag in which <tr> tag is used to create rows and <td> tag is used to create columns inside a row.
The header for the group of table cells is defined using the <th> element. By default, headings of the table are bold and centered.
The header for the group of table cells is defined using the <th> element. By default, headings of the table are bold and centered.
Adding a border to an HTML Table:
If you want to add a border to the table then you can add it using the CSS table-border property.
HTML does not specify the border to the table, it will be displayed without borders.
Don’t forgot to add borders for <th> and <td> tags also to have a complete table.
Adding Collapsed Borders in an HTML Table:
For borders to collapse into one border, add the CSS border-collapse property.
Adding Cell Padding in an HTML Table:
Cell padding is the space between the edges of the cells and the cell contents.
If you want to specify cell-padding, then use CSS padding property.
Adding Left Align Headings in an HTML Table:
Table headings are by default align in the center and styled in bold.
To align the header to the left you can use CSS text-align property.
Adding Border Spacing in an HTML Table:
The border-spacing property of CSS is used to set the distance between the adjacent cells of the table.
The border-spacing property will work only when border-collapsed is separate.
Adding Cells that Span Many Columns and Rows in HTML Tables:
If you want to merge two or more columns into a single column then you can use colspan attribute.
Similarly, rowspan attribute is used to merge two or more rows into a single row.
Adding a Caption in an HTML Table:
If you want to add a caption to an HTML table, you can use the caption element.
The <caption> tag is inserted immediately after the <table> tag.
The caption of the table will always be placed above the table by default.
You can place the caption below, to left or to the right of the table using the align parameter.
Adding a Background Colour To a Table in HTML:
The background-color property is used to add the background color to the table.
You can change the background color of a table row, you just have to apply the CSS background-color property to the table row (i.e. the
tr tag).
Similarly to change the background color of a single cell, you can apply the same code to the table cell(i.e. the td).