Aligning Text in Cells
In centering, we centered the caption and the table.| Breakfast | Lunch | Dinner |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
Header cells default to being centered in most browsers. Data cells default to align left. There are times when you might prefer a different alignment. Center your text or right align numbers.
To center all the data cell text, you will need another CSS rule.
HTML Source
<table class="tableLocation tableBorder tableDataAlignment">
<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
.tableDataAlignment { text-align:center; }
/* css for setting the table's alignment */
.tableLocation {
margin:auto;
}
/* css for setting the caption's alignment */
.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 Using colspan & rowspan.
