Adding a Border
We've created the following table:| Breakfast | Lunch | Dinner |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
To add a border to the table, you will need to use CSS.
HTML Source
<table class="tableBorder">
<caption>Menu for Monday</caption>
<tr>
<th scope="col">Breakfast</th>
<th scope="col">Lunch</th>
<th scope="col">Dinner></th>
</tr>
<tr>
<td>eggs</td>
<td>sandwich</td>
<td>steak</td>
</tr>
<tr>
<td>migas</td>
<td>burger</td>
<td>grilled salmon</td>
</tr>
</table>
CSS Source
.tableBorder, .tableBorder th, .tableBorder td {
border-style:solid;
border-color:black;
border-width:1px;
}
Sample Result
| Breakfast | Lunch | Dinner |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
You can change the color, style (dotted, double), or width of the line. Add border-collapse:collapse and see what happens.
Proceed to Centering.
