The look of an HTML table can be greatly improved with CSS.
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements:
Example
Try it yourself »Code:table, th, td { border: 1px solid black; }
Notice that the table in the example above has double borders. This is because both the table, th, and td elements have separate borders.
To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
Example
Try it yourself »Code:table { border-collapse:collapse; } table,th, td { border: 1px solid black; }
Table Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to 50px:
Example
Try it yourself »Code:table { width:100%; } th { height:50px; }
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
Example
Try it yourself »Code:td { text-align:right; }
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Example
Try it yourself »Code:td { height:50px; vertical-align:bottom; }
Table Padding
To control the space between the border and content in a table, use the padding property on td and th elements:
Example
Try it yourself »Code:td { padding:15px; }
Table Color
The example below specifies the color of the borders, and the text and background color of th elements:
Example
Try it yourself »Code:table, td, th { border:1px solid green; } th { background-color:green; color:white; }









Reply With Quote




