| Adding Borders to Tables | The CSS border property is the best way to define the borders for the tables. |
border: 1px solid black; |
|---|
| Adjusting spacing inside Tables | You may easily use the CSS padding property to provide additional space between the table cell contents and the cell borders. |
th, td {padding: 15px;} |
|---|
| Setting Table Width and Height | The width and height CSS properties can also be used to specify the table's width and height, as well as the width and height of its cells. |
table {width: 100%;} | th {height: 40px;} |
|---|
| Controlling table layout | This property specifies the layout algorithm for table cells, rows, and columns. |
table { width: 300px; table-layout: fixed; } |
|---|
| Horizontal Alignment of Cell Contents | You may use the text-align property in the same manner you do with other components to position text inside table cells horizontally. |
th {text-align: left;} |
|---|
| Vertical Alignment of Cell Contents | Similarly, you may use the CSS vertical-align property to align the content inside the th> and td> elements to the top, bottom, or center. |
th {height: 30px; vertical-align: bottom;} |
|---|
| Making a Table Responsive | Tables aren't naturally responsive. You may add responsiveness to your tables by allowing horizontal scrolling on tiny displays to support mobile devices. Simply enclose your table in a div> element and use the overflow-x: auto; style. |
<div style="overflow-x: auto;">
<table>
... table content ...
</table>
</div> |
|---|
