CSS Tables

In this page I will highlight and explain some commonly used CSS tables and properties:

border-collapse: this property sets whether the borders of the table cells should be collapsed or separated. For example, "border-collapse: collapse;" will collapse the borders of adjacent cells into a single border.

border-spacing: this property sets the distance between the borders of adjacent cells. For example, "border-spacing: 5px;" will create a 5-pixel space between the borders of adjacent cells.

background-color: this property sets the background color of the table or table cells. For example, "background-color: #F5F5F5;" will set the background color of the table or cells to a light gray color.

width: this property sets the width of the table. For example, "width: 100%;" will make the table fill the entire width of its container.

text-align: this property sets the horizontal alignment of the text within the table cells. For example, "text-align: center;" will center the text within the cells.

vertical-align: this property sets the vertical alignment of the content within the table cells. For example, "vertical-align: middle;" will vertically center the content within the cells.