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:
table, th, td {
border: 1px solid black;
}
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single border:
EXAMPLE:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
If you only want a border around the table, only specify the border property for <table>:
EXAMPLE:
table {
border: 1px solid black;
}
Table Width and Height
Width and height of a table are 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:
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:
EXAMPLE:
th {
text-align: left;
}
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
EXAMPLE:
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:
EXAMPLE:
th, td {
padding: 15px;
text-align: left;
}
Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:
EXAMPLE:
th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
EXAMPLE:
tr:hover {background-color: #f5f5f5;}
Striped Tables
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:
EXAMPLE:
tr:nth-child(even) {background-color: #f2f2f2;}
Table Color
The example below specifies the background color and text color of <th> elements:
EXAMPLE:
th {
background-color: #4CAF50;
color: white;
}
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.
Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:
EXAMPLE:
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>