Formatting Tables (HTML)

As mentioned earlier, we have two options to do this.

We can format them using HTML or CSS.

If you choose the first option, then we use the properties window.

If you choose the second option, you use the internal or external CSS rules.

I will discuss both in this lesson.

Let me start with HTML, or rather the properties window.

The first thing I’ll do is the background color of our table.

To change it, we select the table first and then click the “Background Color” button in the properties window and choose a color. Or type the color code in the textbox “Background Color”.

This aside:
HTML color codes can be found galore if you just google for “html color code”.

When we take a look at our HTML code we see that the table tag is supplemented with the bgcolor # 999999.

Next I want the top row, the header row of my table in blue background and white text.
And for the middle row, I want the white background. This allows a clearer distinction between the different rows.

Try it yourself here. Tip: first select the line you want to change.

If it does not work, that would surprise me, you can always use Bonzai 07 files.

Next, we align our text.

I want to left and top align the “Description” and the right and top align the “Prices”.

Select the cells where the description is. Click in the top cell with a description, hold the Shift key on your keyboard pressed and click the bottom cell with the description.
Click the downward pointing arrow next to the “Horz” box and select “Left” for the horizontal alignment.
And click the downward pointing arrow next to the box “Vert” and select “Top” for the vertical alignment.

We do the same for the cells with the prices, only here we choose a right in the horizontal alignment.

Then I enter the space between the edge of a cell and its contents, a bit bigger.
I select the table again and I type 7 in “CellPad” box.
The higher the number, the more space you create.

And finally, I give the various product names, the h4 tag. Select the text above, in this case the item name above the description and click the downward pointing arrow next to the “Format” box in the properties window and choose “Heading 4”.

In the next lesson, we will go all over this again, but with the help of CSS.

Featured Courses

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