|
Table Instructions by Joyce L. Morris, Ed.D. The College of Education and Social Services University of Vermont 6/01 |
Tables help you organize and present information in a grid of columns and rows. You can also use one or more tables on a page when you want to have greater control over the layout of your text and images. You could create aborderless table that's the size of the entire page, for example, and then add text and images into the table's columns and rows to give your page a consistent, tidy appearance. Tables are the key to professionally formatted looking sites.Inserting a table Click on the table icon to insert a table. Your table can have any number of rows and columns. You can also determine whether your table will have a border, whether there will be spaces between cells or space within the cell (padded). You can control the width of the table, alignment, and also select a color or Image for your cell background.In choosing a width, you should decide whether you want a % of the window(this means the layout of the table will be controlled by the size of the window the user selects) or put in a specific # of pixels (this controls the layout regardless of how the user resizes their window) -this is usually the better choice. Widths should not be larger than 640 pixels to fit on a typical computer screen.
Editing a Table Once your table is in place you can edit it by placing your cursor in one of the cells and selecting Table Info. from the format menu. This will bring up a dialog box that lets you change the color or size of individual cells, rows ,or table, depending on the top tab you select.
Cells can have their data or graphics Horizontally or Vertically specified, and cells can span rows or columns for some interesting effects. Once you span a row or column you will create leftover cells that must be deleted.Adding a row or Column to a table Under the Insert Menu you can add a row, column or cell to your table. Make sure your cursor is in the table you are changing.Deleting a row or column or cell Click you cursor on the cell or row you wish to delete. Under the Edit Menu you can delete a table, row, or cell.
Using tables improve design.
Tables can take a variety of formats. See some ideas below:
a. This table is made from:
- one row, two columns
- border =3
- equal column widths
- a fixed table width of 300 Pixels
table color set at pink.
Cell One Cell Two b. In this example
Cell One Cell Two Cell Three Cell Four
- Begin by creating a two row and two column table.
- The border has not been checked, denoting a value of 0.
- The width has been controlled to 250 pixels
- After the table is inserted, one at a time, the color has been changed for each cell.
- To set the tables color Click in one cell with your cursor and from the format menu, select Table Info (Format/Table Info)
- The cell tab will appear.
- Select cell background color. Double click in the rectangular box and your html color guide/grid should appear.
- Repeat this procedure to change the color in each of the boxes.
c. To create this design:
Cell One Cell Two ![]()
This is a picture I drew of myself
- Inserting a table much like the one above except this one has two columns.
Cell One Cell Two Cell Three Cell Four
- Next we are going to specifically format Cell Three. Click in the cell with your cursor and from the format menu, select Table Info (Format/Table Info)
- The cell tab will appear.
- Your first option is to change the cell span
Cell One Cell Two Cell Three Cell Four
- You must now delete the additional cell, cell four, formed by spanning cell three from one to two columns.
- Place your cursor in the cell to be deleted. If you have no text in that cell, it may appear small.
- Go to the Edit menu and select Delete Table Cell
Cell One Cell Two
- Lastly, insert your picture and write underneath. I selected the individualized text color selection tool to make this particular text white.
![]()
![]()
d. In this design
My Resume Courses I Teach Research Publications Workshops
- Insert a table with 5 rows and two columns
- Then click in the right top cell and select Format/Table Info from the top menu
- In the cell menu, select span 5 rows
- You must now delete the extra cells.
- Click in the cell to be deleted, go to the Edit menu and Delete/Cell
![]()
Can you figure out how these tables were made?
Best High s s VT USA
Links Links Links Links Links Picture or Title Links Links Links Links Links Links Links
Resume d Scholarship d Teaching d Service
1 2 3