Tutorials
Creating Tables
The WYSIWYG (what you see is what you get) editor allows you to create web
pages without having to know HTML. The Fast!page HTML Editor is available
wherever a text area is found within ANGEL. The editor is available for both
faculty and students. It is found in many places within ANGEL including the
email tool and discussion forums. This tutorial will focus on how to create
tables for data and layout.
| Printable Version: |
Print out an exact copy of the Creating Tables tutorial. |
| View Demonstration: |
View a movie of the screens and cursor movement of the Creating Tables tutorial. |
1. Click on the HTML Editor Link to start creating a simple web page. The
image below is from a email message.
HTML Link
2. The HTML Editor will appear in a new page. To begin your web page, just
start typing inside the text area.
HTML Editor Window
3.
Place your cursor in the location you want to insert the table and click the
Insert Table icon.
Insert Table Icon
4. The Enter Table Information window will appear. Choose how many rows and
columns you need for the table. Also choose the border size. NOTE - If you
are entering data into the table, you should use a border of one. If you are
using the table for layout, use a border of 0.
Enter Table Information Window
5. The table will be inserted. To add text into the individual cells, click
inside one of the cells and start typing.
Table Inserted
6. Once the table is inserted, you can manipulate the entire table, individual
rows, and individual cells. To change the table, you must first select it by
placing your mouse on one of the borders. The mouse cursor will change to a
four headed arrow. Left click once.
Table is Selected
7. An easier way to select the table is to choose the tag name link.
In order to see these tag name links, you must have the cursor positioned within
a table cell. Click the Table link to select it.
Select Table from Tag Links
8. With the table selected, you can change many of its attributes using the
Table Inspector. You can charge the width of the table as a percentage, the
cell padding (the amount of space around each individual cell), the cell spacing
(the space between individual cells, the border size, table alignment, background
color and border colors.
Table Inspector
9. Having a background color when you have a border value
of 1 or greater will produce white space between the individual cells. This
does not look good for a web page. If you wish to have a background image,
use a border value of 0 which will make the table appear seamless.
Table with Border 1
Table with Border 0
10. You can also make changes to an entire table row. To select the row, click
inside any cell and then click the TR link found within the tag name links.
Select the Row
11. With the row selected, you can change the text alignment, text vertical
alignment, add a background color and border color for the entire row. The
same warning about the border value applies to adding background and border
colors of a table row.
Row Inspector
12. You can also make changes to individual cells. To select a cell, simply
click inside that cell. The cell inspector will appear at the bottom of the
HTML editor. The Cell Inspector allows you to change the width and height of
the cell. You can change the text alignment, text vertical
alignment, add a background color and border color for the cell.
Cell Inspector
13. Another thing you can do with cells is merge the them horizontally or
vertically.You can also add new columns or rows. To merge the cells, click
inside the cell you want to merge, click on the Increase Colspan icon. Notice
that the cell border between them disappears.
Selected Cell
Increase Colspan Icon
Cells Merged
14. You can also add or remove rows by clicking on the appropriate icon within
the Cell Inspector. If you want to add a row or column, click the cell where
you want to add a row or column and click the Add Row or Add Column icon.
Add Column and Row Icons
15. To remove a row or column, click inside the cell where you wish to remove
the column or row. Click the Remove Column or Row Icon.
Remove Column and Row
16. Click Accept Changes when you are done with adding the table..
Click Accept Changes
Related Topics:
Using the Built-in HTML Editor 