Table formatting (CSS / 2)

What we have to do, is to vertically align the description text, so it always on top of the cell. We still have to align the prices right and we have to create some space between the edge of the cell and the text.

Let me first start with the vertical alignment of the description.
Click again the “New CSS Rule” button.
Select “Advanced” in the selector type.
And type the two tags “th” and “td” separated by a comma in the “Selector” textbox.
We do this because this rule should apply to the header row cells (th), as well as the rest of the table cells (td).

Click the OK button.

 

Choose the “Block” category and choose “top” in the “Vertical Alignment”.
This will move all the text in the cells so that all cells appear as top aligned.

Now that I’m here still, I might immediately increase the space between border and text.
I choose the “Box” category and I type 7 in the “Top” in the “Padding” section.
This will determine the spacing between the cell border and the data in the cell.
I leave the “Same for all” box checked, because I want this extra space at the top, bottom, left and right of the text.

Click the OK button when you’re done.

 

And I want to right align the last column, prices. Then it will all align nicely under each other.
Click the “New CSS Rule” button.
Select “Class” in the selector type.
Give it an appropriate name. “Right Alignment” seems quite appropriate, is it not?
And click OK.

 

In the dialog box, choose the category “block”.
And in the “Text Align” you choose, what were you thinking, “right”.
Click the OK button.

 

Also to apply this class style to one or more cells, first select the cells, click the downward pointing arrow next to the “Style” box in the properties window.
And choose the newly created style “Right alignment” which is added to the drop-down list.

 

Result, the prices are right aligned:

 

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats