Insert Table

Even before there was CSS for the formatting of HTML pages, one usually used tables for layout and formatting of sites.

Now that CSS is supported by all browsers, this is the most appropriate for the layout of your pages, but this does not mean that tables are unimportant.

Insert a table into a page in different ways.

First open your course page where you want to insert a table.
In the “Insert” toolbar, choose the “Common” tab and click the “Table”.

Or a second way is the “Insert” button in the menu bar and choosing “Table” in the drop-down menu.
In both cases, this opens the “Table” dialog, did you expect anything else?

At the top we have the headings “Rows” and “Columns”. What you need to enter is clear, I think.

Below that we have the “table width” box.
In the “Table width”, we choose the width of our table in pixels or percent.
If we choose “pixels”, then our table will have a fixed width. If we choose “Percent”, then the width of your table will be adjusted to fit the width of the monitor of the visitor of your site.

The textbox “Border Thickness” determines the thickness of the edge of the table. Type 0 (zero) if you do not want borders. Just leave this box blank, it will still show a small edge.

With the box “cell padding” we define the space between the edge of the cell and its contents.

 

With the “Cell spacing” box, we determine the distance between the different cells.

In the “Header” dialog box, we determine whether our table must have a header row or header column, or both, or none.

All these settings can be changed afterwards, so it does not much matter whether you enter it correctly.

Click the OK button.
This places the table in our document.
As you can see in the picture below, we find each text box in the “Table” dialog box back in the properties window.
So if you wish to make changes to the layout of your table, you can always visit here.
Select the table in your document first, otherwise the properties window does not show the properties for the table.
You can modify the table in different ways.
You can place the cursor over the edge of the table and when it changes color, click the mouse.
Or, what I still think the easiest way is, you place the cursor in the table and select the <table> tag in the tag selector.tag in the tag-selector.

Let’s go see what all this has inserted into the code.
To begin with, we have the table tag, which is the tag for our table.
This always starts with an opening tag: <table> and ends with a closing tag: </table>
In the table-row tag, we have different tags, for the rows. This always starts with an opening tag: <tr>, and ends with a closing tag: </tr>
I have three rows in my table, so I have three row tags.

I have three cells in a row. A cell is placed in a td-tag. The td tag has an opening tag: <td> and a closing tag: </td>

If you set a “Header” in the “Table” dialog (See Figure 2 on this page), then the cells of the header row are placed in the th tag, with an opening tag <th> and a closing tag </th>.

You should remember the different HTML tags and how you can select them.
This is really important, you will need nothing from me.

Now we insert some data.
For this, place your cursor in the cell and start typing.
If you want to place an image in your cell, then drag it from the “File Pane” to the place in your table where you want it.
To add an extra row, place the cursor in last cell, the cell at the bottom right, and click the tab key on your keyboard.

In the next lesson, we will format our table.

Featured Courses

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