CSS Table Tutorials

CSS Table Tutorials

The following CSS Tutorials cover different properties and use cases related to the Table HTML element like table width, heading alignment, row styles, etc.

CSS Properties

The following CSS Tutorials cover CSS Properties that are related to the Tables in HTML.

• border
• border-collapse
• border-spacing
• caption-side
• empty-cells
• table-layout

How-tos

The following CSS Tutorials cover how-tos scenarios related to the Tables.

Table

• How to display full width table?CSS Tutorial to display the table in full (100%) width available, using width property of table.
• How to set border for table?CSS Tutorial to set border for table, table headings, and table cells, using border property.
• How to display border only around the table?CSS Tutorial to set border only around the table using border property.
• How to collapse border for table?CSS Tutorial to collapse the border for table using border-collapse property.
• How to display striped background tables?CSS Tutorial to change background color for even numbered or odd numbered rows, so that the table appears striped, using nth-child() selector, and background-color property.
• How to display horizontal scrollbar for tables?CSS Tutorial to display horizontal scrollbar for tables when the content of the table is occupying more than the available width.

Table Heading

• How to set height for table heading?CSS Tutorial to set specific height for the table headings using height property.
• How to set background color for table heading?CSS Tutorial to set specific background color for the table heading using background-color property.
• How to center align table headings?CSS Tutorial to center align the content in table headings along horizontal axis using text-align property.
• How to left align table headings?CSS Tutorial to left align the content in table headings along horizontal axis using text-align property.
• How to right align table headings?CSS Tutorial to right align the content in table headings along horizontal axis using text-align property.

Table Rows

• How to set height for table rows?CSS Tutorial to set specific height for the table rows using height property.
• How to display horizontal lines between rows in table?CSS Tutorial to display horizontal lines between the rows the table by setting border-bottom property for th, td.
• How to change background color of table row upon hover?CSS Tutorial to change the background color of the table row when user hovers over the row using mouse pointer.
• How to change text color of table row upon hover?CSS Tutorial to change the text color of the table row when user hovers over the table row using mouse pointer.

Table Cells

• How to center align content in table cells?CSS Tutorial to center align the content in table cells along horizontal axis using text-align property.
• How to left align content in table cells?CSS Tutorial to left align the content in table cells along horizontal axis using text-align property.
• How to right align content in table cells?CSS Tutorial to right align the content in table cells along horizontal axis using text-align property.
• How to vertical align the content in table cells to bottom?CSS Tutorial to align the content in table cells to bottom along vertical axis using vertical-align property.
• How to vertical align the content in table cells to middle?CSS Tutorial to align the content in table cells to middle along vertical axis using vertical-align property.
• How to vertical align the content in table cells to top?CSS Tutorial to align the content in table cells to top along vertical axis using vertical-align property.
• How to change background color of table cell upon hover?CSS Tutorial to change the background color of the table cell when user hovers over the table cell using mouse pointer.