Table Properties
CSS table properties control the appearance and layout of tables, including spacing, borders, alignment, and styling.
| Property | Possible Values | Description |
|---|---|---|
border-collapse | collapse, separate | Merges or separates table borders |
border-spacing | px, em | Defines space between table cells (used when border-collapse: separate;) |
caption-side | top, bottom | Positions the table caption above or below the table |
empty-cells | show, hide | Controls visibility of empty table cells |
table-layout | auto, fixed | Defines how the table width is determined |
width | px, %, auto | Sets the table width |
height | px, %, auto | Sets the table height |
text-align | left, center, right | Aligns text inside table cells |
vertical-align | top, middle, bottom | Aligns content vertically in table cells |
Explanation of Values
| Value Type | Description | Example |
collapse | Borders of adjacent cells merge | border-collapse: collapse; |
separate | Borders remain distinct | border-collapse: separate; |
fixed | Column width does not change based on content | table-layout: fixed; |
auto | Column width adjusts based on content | table-layout: auto; |
hide | Hides empty table cells | empty-cells: hide; |
Example:
table {
width: 100%;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 10px;
text-align: center;
}