Styling Tables - HTML5 - page 137

Variations of the same technique can be used to align the table to the right or, explicitly, to the left.
Say you want to align the table to the right. The CSS rule would then declare 0 margin for the right
and auto for the left, like this:
table {
margin: 20px 0 20px auto;
}
You'll recall that the four values refer to the top, right, bottom, and left of the CSS box model. Thus,
when rendered, the preceding code effectively automatically fills in the left margin, aligning the
table right (Figure 17- 6).
FiGure 17-6
For most situations, there's no need to align the table to the left because that is the default position.
However, should you ever need to explicitly do so, here's the code to align the table to the left, again
making use of the auto value:
table {
margin: 20px auto 20px 0;
}
Another option for table alignment is the float property used in an earlier les-
son to align images to the left or right. Applying the float property to the table
selector will have the same effect, including wrapping any following text.
workinG wiTH borders
You've already seen how applying a border property to the table selector puts a border around the
entire table. You've also seen an example of how using the border property in a td and/or th selec-
tor outlines the table cells. Both techniques are often used in basic table design — however, you're