The Tables are used to easily well organize the lot's of data. In this tutorial, you can learn how to set different properties of an HTML table using CSS.
CSS Styling Tables
The CSS table properties are used to style an HTML table on a web page.
Table Syntax with CSS
| Column_1 |
Column_2 |
Column_3 |
Column_4 |
Column_5 |
| Row_1 |
Row_1 |
Row_1 |
Row_1 |
Row_1 |
| Row_2 |
Row_2 |
Row_2 |
Row_2 |
Row_2 |
| Row_3 |
Row_3 |
Row_3 |
Row_3 |
Row_3 |
Table Styling Properties
The basic table styling properties are specifies in a table including text-align, padding, vertical alignment, height & width, border, caption, etc.
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
Collapse Borders Property
The border-collapse property is used to set whether the table borders should be collapsed into a single border:
CSS & HTML Code: border-collapse
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid, black;
}
Output
| Product_ID |
Product_Name |
| 1001 |
10 Cup Coffee |
| 1002 |
5 Pizza |
Border Spacing Property
The border-spacing property is used to specify the distance that separates adjacent cells & border. The border-spacing property can take either one OR two values.
CSS & HTML Code: border-collapse
table th td {
border-spacing: 10px;
border-collapse: separate;
border: 1px solid black;
}
Output
| Heading Section Of This Table |
| First Row Cell Of This Table |
| Second Row Cell Of This Table |
Caption Side Property
The caption-side property is used to specify where the content of a <caption> element should be placed in relationship to the table.
CSS & HTML Code: caption-side
table th td {
border-spacing: 10px;
border-collapse: separate;
border: 1px solid black;
}
.bottom_caption {
caption-side: bottom;
}
Output
| Heading Section Of This Table |
| First Row Cell Of This Table |
| Second Row Cell Of This Table |
This is bottom caption of this table
Table Height and Width
Defined the height and width of a table by using height and width property.
Example: Table Height & Width
table, th, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
Output
A Table with Height & Width Property
| Product_ID |
Product_Name |
Product_Price |
| 1001 |
10 Cup Coffee |
100$ |
| 1002 |
5 Pizza |
150$ |
Table Padding Property
The padding property create the space between the border and the content in a table.
Example: Table Padding
table, th, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th td {
padding: 15px;
}
Output
| Product_ID |
Product_Name |
Product_Price |
| 1001 |
10 Cup Coffee |
100$ |
| 1002 |
5 Pizza |
150$ |
Table Types: CSS Properties
| Table_Names |
Description |
| Striped_Table |
Add a backgroun-color to all EVEN or ODD rows of table. |
| Hightlight_Table |
The highlight-table is also known as the name of hoverable-table. In this table, use the :hover selector on <tr> to highlight table rows on mouse over. |
| Centered_Table |
The centered-table is used in table tag to center align all the text in the table. Just add class="centered" property. |
| Responsive_Table |
The responsive(class="responsive-table") table will arrange the table data any type of screens like PC, Laptop, and Mobile Phone, It creates a horizontal scroll bar automatically and easily arrange the table content on the screen. |