Draw Layout table

Two other options, that we find under the “Layout” tab of “Insert” toolbar, are the “draw layout table” and “draw layout cell” buttons.

This is actually consistent with the introduction of tables in the “normal” way, we only draw our table and the cells themselves.
The first thing you should do is to draw the table.
Just click the “draw layout table” button in the “Layout” tab.
Click and drag in your document to where you want to insert the table.
In this example I’m drawing a table around the tracing image we had inserted in the previous lesson.

Then we draw the different cells in our table. You only need to draw a cell where there is content. You do not need to draw empty cells.

So click the “Draw Layout cell” button in the “Layout” tab and draw a cell for the title, logo, image and one for the text beneath the picture.

You can customize the size of the cells by selecting the cell and clicking and dragging the blocks on the edge of the cell.
You can change the position of a cell by selecting the cell and clicking and dragging the edge of the table.

Add data to a cell in the same way as you do in a “normal” Table.
Place the cursor in the table and start typing text. To place an image in a table, drag it into the cell from the “Files” panel .

When a cell is selected you can adjust its properties in the properties window.

Automatic stretch

If we now view the page in the browser, we see that this table has a fixed value.
To adjust the width of this table to the width of the browser window, first select the cell you want to stretch, in other words, which is a variable against the width of the browser window and click the check box “Autostretch” in the properties window.

This opens the “Choose Spacer Image” dialog.
Here we have three options:
The first is a spacer image.
The second uses an already existing spacer-image.
And the third does not make use of a spacer-image.

Let me first explain what a spacer image is.
A spacer-image is an invisible image which ensures that the width of a cell is maintained.

Because I do not have this, I choose the first option “Create a spacer image file” and save it in the “images” folder.
If you have one already, you can choose the second option.
And you do not want the third option.
Please note if you choose the third option, the cells with no content become invisible in older browsers.

Click the OK button.

As you will see, the cell will now be stretched and when you look at the bottom you see that the cells with data are not properly aligned to the title cell.

View the page in the browser (click the F12 key on your keyboard).
Depending on how big or small your browser window is, the picture and the text underneath are not aligned in the middle of the page.
How can we solve this?

First for the image.
Select the cell where it resides.
Click and drag with the blocks to the left and right side at the edge of the cell so that the said cell has the same width as the width of the table.
With the cell still selected, click the downward pointing arrow next to the “Horz” box and choose “Center” from the drop-down menu.
This will improve the picture centering in the table.

See the result in your Browser here.

For the text, we need another solution.
If we choose the same solution, the text is centered and spread over the size of the browser window.

So we place this text in its own table.
First select the text and press Ctrl + C on your keyboard (this copies the text).
Click the Delete button on your keyboard (this removes the text).
Select the bottom row of the table.
Click the “Merge Cells” button in the properties window.
In the “Horz” choose the “Middle” (this will center the contents of the cell).

Place the cursor in the bottom row and click the “Insert” button in the menu bar.
Select “Table” in the drop-down menu.
Specify the number of rows and columns, plus a width for your table. In this case I will do with 1 column and 1 row, with a width of 350 pixels.
Click the OK button.
Place the cursor in the new table just created and click Ctrl + V on your keyboard.
This will paste the previously copied text.

View the page in your browser and you will see that no matter how big or small your browser window may be, it will still bring the image and the underneath text, neatly to the middle of the page.

Featured Courses

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