How to add borders to a table
Short answer
Give the cells a border and merge the double lines with border-collapse:
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid silver; padding: 6px 12px; }
</style>
<table>
<tr><th>Product</th><th>Price</th></tr>
<tr><td>Tea</td><td>$3</td></tr>
<tr><td>Coffee</td><td>$5</td></tr>
</table>Lines between rows only
A table often looks lighter without vertical lines. Keep only the bottom border of the cells:
<style>
table { border-collapse: collapse; }
th, td { padding: 6px 12px; border-bottom: 1px solid silver; text-align: left; }
th { border-bottom-width: 2px; }
</style>
<table>
<tr><th>Product</th><th>Price</th></tr>
<tr><td>Tea</td><td>$3</td></tr>
<tr><td>Coffee</td><td>$5</td></tr>
</table>A border around the whole table
A border on the <table> itself draws only the outer outline. The inner lines are still set on the <th> and <td> cells.
Common mistake
The border is set on <table> only and a grid of lines is expected. The result is one frame around the table, and without border-collapse: collapse the cell borders are also drawn double, with a gap between them:
<style>
td { border: 1px solid silver; padding: 6px 12px; }
</style>
<table>
<tr><td>Tea</td><td>$3</td></tr>
<tr><td>Coffee</td><td>$5</td></tr>
</table>Functions used in this recipe
- <table> — A table made of rows (`<tr>`) and cells.
- border — A border around the element: width, style and color in one property.
- border-collapse — Whether the borders of table cells are separate or merged into single lines.
- padding — The inner spacing between the content and the border of an element.
- <td>, <th> — Table cells: `<td>` holds data, `<th>` is a header cell.