Multimedia and Technology Training At the UC Berkeley Graduate School of Journalism
You can change the layout of your Web page by dividing it into vertical or horizontal sections. This allows you to display your text in one section, navigational links to other pages in another section, and pictures, video or audio clips in another section.
Note: Many pages on the Internet are laid out via tables. Although tables are the easiest way to do this, they're no longer considered the best way. Modern Web design principles reserve tables for tabular data but prefer a technology called Cascading Style Sheets for page layout. However, CSS is a complex topic. We'll stick to good old tables for the sake of this tutorial.
You can add a table in the middle of a page, or you can display your entire page as a table, which would break the entire page up into columns and rows.
To add a table, position your mouse cursor in a blank area where you want the table to be inserted. Then in the menu at the top select Insert...Table.
You'll get a panel that looks like this:
Here you can set the various properties for the table, including the number of rows and columns, the width of the table (how much of the screen it will fill up) and the thickness of the borders between the columns and rows.
The basic settings are:
Note: Cell padding and cell spacing sound a bit similar, but their difference becomes more apparent once you start experimenting with them. Try creating a table with the border set to 1 and put some dummy text in each cell, then experiment with altering the cell padding and cell spacing attributes. And be sure to preview the table in a browser to see the full effect of changing cell spacing and padding.
For example, if you want a table that will:
You would enter these values:
Then click on OK and a table will be added to your Web page.
Now you can type text or insert pictures or other elements into each of the table segments or cells to fill in your basic page layout. You add these elements to a table cell or segment just as you would if you were entering them on a blank HTML page.
Comments? Contact us | ©2007-2009 The Regents of the University of California.
Add your comment
Login to post a comment.