HTML – Basic Tables
HTML tables allow for data to be arranged into rows and columns using the <table> tag, which contains the <tr> tag for rows and the <td> tag for data cells.
HTML – Table Formatting
Table size, borders, cell padding, cell spacing, can all be changed by using attributes. Multiple rows or columns can be merged into one.
HTML – Advanced Tables
Advanced HTML tables may contain <thead>, <tbody>, and <tfoot> tags, along with a <caption> to give the data better structure. Other than that, there isn’t any difference from a basic table structure.
HTML – Caption Tag
The <caption> tag defines a table caption. It must be inserted immediately after the opening <table> tag. It will be centered above the table by default, but can be changed using CSS.
HTML – Column Group Tag
The <colgroup> tag specifies a group of one or more columns in a table for formatting using the <col> tag and applying formatting to entire columns.
HTML – Table Body Tag
The <tbody> tag is used to group the body content in the table. It’s used in conjunction with the <thead> and <tfoot> elements to specify each part of a table.
HTML – Table Data Tag
A <td> tag defines a cell containing data in a table. The number of <td> tags in a table row (<tr>) determines the number of columns in that row.
HTML – Table Footer Tag
The <tfoot> tag is used to group the body content in the table. It’s used in conjunction with the <thead> and <tbody> elements to specify each part of a table. The <tfoot> uses basic <tr> and <td> tags to define its rows and data cells.
HTML – Table Head Tag
A <th> tag defines a header (<thead>) cell containing data in a table. The number of <th> tags in a table row (<tr>) determines the number of columns in that row.
HTML – Table Header Tag
The <thead> tag is used to group header content in a table. It’s used in conjunction with the <tbody> and <tfoot>elements to specify each part of a table. The <thead> contains the two header columns that will contain <th> tags containing the names of each column.
HTML – Table Row Tag
A <tr> tag defines a row of cells (<td>) containing data in a table. The number of <td> tags in a table row (<tr>) determines the number of columns in that row. The table below has a header row and four rows of data.
HTML – Column and Column Group Attributes
The col tag specifies column properties for each column within a colgroup tag. These are the attributes that can be used.
HTML – Table Data Attributes
A td tag defines a cell containing data in a table. These are its attributes.
CSS – Styling HTML Tables
HTML tables can be styled to a point using tag attributes like border, cell-padding, cell-spacing, and width/height. But tables can be greatly improved with CSS.
CSS – border-collapse Property
The border-collapse property sets whether table borders should collapse into a single border or remain separated as is the default.
CSS – border-spacing Property
The border-spacing property sets the distance between the borders of adjacent table cells. This property only works when border-collapse is set to separate.
CSS – caption-side Property
The caption-side property specifies the placement of a table caption to the top or bottom.