Centering a Table
In borders, we built the following table.| Breakfast | Lunch | Dinner |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
A small table like this one might look better centered on the page. Use the working document you created (workingdoc) in borders to see what this table will look like once it is centered.
To center the table, you will again use CSS. (You will need to apply a CSS rule specifically for the <caption> tag.)
HTML Source
<table class="tableLocation tableBorder">
<caption class="alignCaption">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
.tableLocation {
margin:auto;
}
.alignCaption {
margin: auto;
}
/* css for setting the table's border */
.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 |
Proceed to Aligning Text in Cells.
