Making a Content Web Site

Site Map

Tables
How to do them

Click to Tables - Why they are important

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion
Insert table Add cells Delete cells Merge cells Resize Border widths Alignment Invisible border
Tables can be inserted and changed by row, column, size, border, spacing, and even background color to suit your design. It is important to note that tables can be more than a grid that delivers data; they can be the structure that builds the design of the web page itself. They are both a information delivery scheme and a web design component.

legend

Insert a table:

Top Menu Bar
  1. Place your cursor where you want the table.
  2. Choose Insert > Table
  3. Insert number of rows, columns, alignment, and border width.
  4. Click OK.

Once you have your table inserted, you can change the features easily. The default color for the borders is gray and they will be solid unless you remove them. Tables can be set in percent or pixels. Percent works particularly well if you are unsure of what resolution the typical audience will be using to view your pages. Pixel is good when you know exactly the size you want the audience to view the table in.

Sometimes, we don't plan as well as we hope and we need to add or delete rows or columns. Here are the steps for those skills.

Add a row or column:

Right-click Menu
Inserting a Row Inserting a Column
  1. Right-click in a cell in the table.
  2. Choose Table > Insert Row
  3. The row will appear ABOVE the row your cursor is in.
  1. Right-click in a cell in the table.
  2. Choose Table > Insert Column
  3. The column will appear to the RIGHT of the column your cursor is in

Delete a row or column:

Right-click Menu
Deleting a Row Deleting a Column
  1. Right-click in a cell in the table.
  2. Choose Table > Delete Row
  1. Right-click in a cell in the table.
  2. Choose Table > Delete Column

To arrange a table's cells in the right placement, you may need to merge cells to have the table you want.

Merge rows and columns:

Right-click Menu
  1. Highlight the cells to merge
  2. Right-click in the cells
  3. Choose Table > Merge Cells

For an example of merged cells, look at the first row of this table. Two cells were merged so that the merged cell spans the whole width of the table.

Sometimes, you may want the columns or rows to be larger or smaller than the default.

Resize rows and columns:

Left-click Properties Menu
  1. Left-click and hold the left mouse button down over the "border" you wish to move. The cursor will be a two-headed arrow
  2. Move your mouse to the desired location and release.
  1. Click inside the cell you want to change.
  2. Change the pixel width and/or height in the cell menu.

*Remember: these changes will affect other cells in the same row and column based on how tables work in HTML.

At times, it may be useful to change the widths of the borders or the Cell Padding or Cell Spacing:

Change widths:

Properties Menu
  1. Select Table. (This causes the Properties Menu to appear if it is not visible.)
  2. Change CellPad to increase the amount of space around the objects in the cells using numbers.
  3. Change CellSpace to widen the borders of a table.

These options can be particularly useful when using tables as the structure of a web page rather than a delivery mechanism for data.

Align tables or objects in cells:

Properties Menu
For entire table Within a cell (or multiple cells)
  1. Select Table.
  2. Use the drop-down menu for Align to move the entire table where you want.
  1. Highlight the objects in a cell or a group of cells
  2. Use the drop-down menu for Horz to move the objects horizontally.
  3. Use the drop-down menu for Vert to move the objects vertically.

Several examples of tables that have been changed using the above methods can be viewed here.

Now, here's the secret about tables. Many web developers use tables to align and manipulate the objects on a web page so that they appear in the alignment and position where they want. The person who views the web page doesn't even know he is seeing this material in a table. For example, look at this web page <insert link here>. The images and text appear around each other in a nice arrangement. The text and images are in a table with a zero "0" border.

To make an invisible border for a table:

Properties Menu
  1. Select Table.
  2. Change Border to "0" zero.
  3. The lines that created the border will now appear dotted to your view, but in a browser, they will disappear.
Changing the Border number to 1 or above increases the width of the actual lines of the table's border. To increase the space between those lines, Change CellPad.

For another example of how this looks, click here.

Practice? Want some practice? I've set up a practice page for you to test yourself on the skills above.

Next, Hyperlinks:

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion

Making a Content Web Site

Site Map

Tables
How to do them

Click to Tables - Why they are important