A Smarter Way To Learn HTML & CSS(2015)

47
Tables: aligning text

In Chapter 14 you learned to align text on the page using…

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

You can use this same code to align text in table cells. For example, you can write…

table {
text-align: left
}

The text in all cells, including <th> cells, will be positioned on the left of the cell. (The text in <td> cells would have been positioned on the left anyway, by default.) You can be more surgical by styling, say, just <th> or <td> cells. For example, you know that by default, browsers set text in <td> cells on the left. If you’d prefer to center the text, you could write…

td {
text-align: center;
}

If you have a column of numbers, you might want to set them to the right. You’d create a class of <td> to do that.

td.num {
text-align: right;
}

You can also control the vertical alignment within cells, using…

vertical-align: top;
vertical-align: bottom;
vertical-align: center;

You can’t specify vertical alignment for the whole table, only for <th> and <td> elements.You can, of course, create classes of <th> and <td> elements that have their own alignment. By default, text is vertically centered in both <th> and <td> cells. If you wanted <th> text moved to the bottom of the cell, you could write.

th {
vertical-align: bottom;
}

This code would move the text to the top…

th {
vertical-align: top;
}

In your CSS file center text in the cells of the most recent table, the one with the id. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-47-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/47.html