Formatting Tablex (CSS / 1)

We start with a plain table in a page.
Click the “New CSS Rule” button.

 

This opens the dialog “New CSS Rule”.
The first rule that I’m going to make is for the background color of the table.
I select the Tag selector and type “table” in the textbox “Tag”. Alternatively you can also choose from the drop-down list when you click the downward pointing arrow.

I’m going to format my table in a new style sheet, so I select this in the “Define in”.
This does not, add to the rules you have in the existing CSS file “mystyle.css” for the insertion of the table, but I like everything a bit organized.
Click the OK button.

 

We aim to provide a different background color for our table, so it is logical that we have the “Background” category option and set a different color for the background.
Click the OK button.

 

As you can see, this line is added in our table immediately.
The new style sheet “TableStyle.css”, containing the line “table” is added to the CSS Styles panel.

Now we create a rule for the background color and text color of the upper row, that is the header row.
Click again the “New CSS Rule” button.

 

In the “Tag”, type th, the header row is placed in a th tag, remember lesson 28 ?
We define this line in the same css file, TableStyle.css, so click the OK button.

 

Here we have two lines to enter.
One in the category “Type” and the other in the category “Background”.
For both, we’ll change the color, text color to white and the background color to blue.
Click the OK button when you make these modifications.

 

The “th” rule is added to the CSS page “TableStyle.css” and we can see the the two properties that we just set in the “Properties Window”.

These rules are immediately applied in our document.

 

The next line that we make is for the rows with a white background.
So click the “New CSS Rule” button.
Select the “Advanced” in selector type.
And type the following in the textbox “Selector”: tr.odd td

A word of explanation:
tr is for the table row
odd is just a name, here you can type anything you want. Tip: Choose a meaningful name.
And td is for table cell.

Now in human language:
This line should be used to give properties to each odd td tag (cell) that is in a tr tag (row).

Click the OK button when you’re done.

 

And now we set the option for this rule.
Choose the “Background” category and in the “Background Color”, select the color white by clicking on the color picker.
This is all we want to change, so we click the OK button.

 

To apply this style to one or more rows, select the first row, click the downward pointing arrow next to the “Style” box in the properties window.
And choose the newly created style, “odd” that was added to the drop-down list.

 

In the next lesson, we will do the rest.

Featured Courses

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