To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
See this example:
Notice that the table in the example above has double borders. This is because both the table and the
The border-collapse property sets whether the table borders should be collapsed into a single border:
See this example:
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:
See this example:
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:
See this example:
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:
See this example:
To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:
See this example:
Use the :hover selector on <tr> to highlight table rows on mouse over:
See this example:
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
See this example:
