Chapter 12

Exercise 1

In this exercise you will learn the tags used to create a table. You will also crate a table and insert information in the table cells.

Understanding Tables

A table consists of rows, which run horizontally, and columns, which run vertically. Rows and columns intersect to create cells.

Three tags are used to create an HTML table. The <TABLE> tag tells the browser where to begin the table. The <TABLE> tag also includes the specifications for the table, such as table size and border width. The <TR> tag defines a row of cells. The <TD> tag indicates table data and is used to specify a table cell. You do not need to specify the number of columns in your table, just the number of cells in each row.

Creating Tables

To create a table, do the following steps:

1. Open your HTML template file.
2. Key Table as the title.

First, you have to specify where the table should begin and end.

3. In the body text, key <TABLE>, then pres Enter or Return twice.
4. Key </TABLE>.

Next, you need to define a table row.

5. In the blank line between the table tags, key <TR>, then press Enter or Return twice.
6. Key </TR>.

Now you need to define the table cell and enter the cell data.

7. In the blank line between the table row tags, key <TD>, key your name, then key </TD>. Press Enter or Return.
8. To add another cell to the table, repeat step 7 and key your friend’s name.

Note: You must use the <TD> and </TD> tags for each cell in the row. Also, you must use the <TR> and </TR> tags for each row in the table.

9. Save the document as chap 12 exer 1 lastnameinitial.
10. View the document in your browser.

You should see only two names on the page. By default, tables do not have borders, or lines around the table and cells. Later, you will add the border for your table.

Add another row to the table by doing the following steps:

11. Position the insertion point at the end of the </TR> tag and press Enter or Return twice.
12. Repeat steps 5-8 to insert a new row with two cells that contain the names of two other friends.

Notice you have to define each row in the table, and within each row, you must define each cell. To make your table tags easier to read, you can insert blank lines in your text editor as shown in the figure below:

13. Make any desired changes in your text editor.
14. Save the document and refresh your browser.

Changing the Table Borders

Table borders are specified using the BORDER=# attribute. The number is the width of the border. The attribute is placed inside the <TABLE> tag, like this: <TABLE BORDER=5>.

To create a border for the table, do the following step:

15. Change the <TABLE> tab to <TABLE BORDER>.

To change the width of the border, do the following steps:

16. Change the <TABLE BORDER> tag to <TABLE BORDER=3>.
17. Save the document and refresh your browser.
18. Change the border from “3” to “10”.
19. Save the document and refresh your browser.

Notice the border is getting thicker as the number get larger.

20. Change the border from “10” to “50”.
21. Save the document and refresh your browser.
22. Change the border from “50” to “3”.
23. Save the document and refresh your browser.

Your table should look like the figure below. If your table does not look like the example, double-check your source code and make sure you keyed the tags correctly.

Exercise 2

In this exercise you will change the size of the table. You will also format the table cells.

Changing the Table Size

You can change the width (from left to right) and height (from top to bottom) of your table similarly to the way you changed the size of the border.

When no width is specified, the table is only as long as it needs to be. Notice each cell in Figure 12-3 is only as long as the longest text in each column.

When changing the width of the table, you need to decide what percentage of the window’s width you want the table to occupy. For example, a table width of 50% would take up 50% (half) of the width of your document window. A table width of 100% would go across the whole window.

To change the width of your table, do the following steps:

1. Open chap 12 exer 1 lastnameinitial.
2. Add the following, <TABLE> tag: WIDTH=50%

The tag should now read <TABLE BORDER=3 WIDTH=50%>.

3. Save the document as chap 12 exer 2 lastnameinitial
4. View the document in your browser.

The table should be halfway across your Web page.

5. Change the width from “50%” to “100%”.
6. Save the document and refresh your browser.

The table should be as wide as your Web page.

7. Change the width from “100%” to “50%”.
8. Save the document and refresh your browser.

Changing the height is similar to changing the border size. The height is changed using numbers instead of percentages. The default border size is none, or zero. Each number increases the size of the border. For example, BORDER=3 would produce a thin border, and BORDER=75 would produce a very thick border.

To change the height of the table, do the following steps:

9. Add HEIGHT=100 to the <TABLE> tag.

The tag should now read <TABLE BORDER=3 WIDTH=50% HEIGHT=100>.

10. Save the document and refresh your browser.
11. Change the height from “100” to “200”.
12. Save the document and refresh your browser.

Formatting Table Cells

You can specify how the data in the table cell will appear by aligning the text horizontally, vertically, or both.

To align the text horizontally (left to right), use the ALIGN=XXX inside the <TD> tag. XXX can be either left, center, or right. The default is left.

To align the text vertically (top to bottom), use the VALIGN=XXX inside the <TD> tag. XXX can be either top, middle, or bottom. The default is middle.

To change the horizontal alignment of a cell, do the following steps:

13. Change the <TD> tag before your name to <TD ALIGN=CENTER>.
14. Save the document and refresh your browser.

Notice your name is the only one centered. Each cell must be individually formatted.

15. Change the alignment of your name from “center” to “right”.
16. Save the document and refresh your browser.

To change the vertical alignment of a cell, do the following steps:

17. Change the <TD> tag before your name to <TD VALIGN=TOP>.
18. Save the document and refresh your browser.
19. Change the alignment from “top” to “bottom”.
20. Save the document and refresh your browser.

Now let’s change the format for all the cells in the first row.

21. Change the <TD> tag for the first cell (your name) to <TD VALIGN=TOP>.
22. Change the <TD> tag for the next cell to <TD ALIGN=RIGHT VALIGN=TOP>.

Now let’s change the format for all the cells in the second row.

23. Change the <TD> tag for the first cell in the second row to <TD VALIGN=BOTTOM>.
24. Change the <TD> tag for the next cell to <TD ALIGN=RIGHT VALIGN=BOTTOM>.

Your table should look like the Figure below. If your table does not look like the figure, double-check your source code and make sure you keyed the tags correctly.

Define the table	<TABLE> </TABLE>
Define table with border	<TABLE BORDER> </TABLE>
Define table with specific border size	<TABLE BORDER=#> </TABLE>
Specify desired table width	<TABLE WIDTH=#> </TABLE>
Define table row	<TR> </TR>
Define table cell	<TD> </TD>
Horizontally aligns data in the cell	<TD ALIGN=LEFT/CENTER/RIGHT>
Vertically aligns data in the cell	<TD VALIGN=TOP/MIDDLE/BOTTOM
Specify number of columns for cell to span	<TD COLSPAN=#>
Specify number of rows for cell to span	<TD ROWSPAN=#>

Exercise 3

In this exercise you will use what you have learned to create another table.

1. Open your HTML template file.
2. Key Fruits and Vegetables as the title.
3. In the body text, key The following table is a list of fruits and vegetables.
4. Insert a paragraph tag.
5. Define a table.
6. Specify a table border size of 10.
7. Set the table width to 50% and the height to 100.
8. Define a row.
9. Create a cell with Fruits as the cell data, and bold the text.
10. Create a cell in the same row with Vegetables as the cell data, and bold the text.
11. Align the data in both cells to be centered horizontally.
12. Create another row containing two cells
13. In the first cell, key Apples
14. In the second cell key Green Beans.
15. Create a third row containing two cells.
16. In the first cell, key Oranges.
17. In the second cell, key Squash.
18. Create a fourth row containing two cells.
19. In the first cell, key Bananas.
20. In the second cell, key Broccoli
21. Add another row containing one cell
22. Span the cell across two columns.
23. In the cell, key If you want to learn more about me you can read my autobiography.
24. Create a link to chap 9 exer 2 lastnameinitial.html. Use autobiography as the anchor text.
25. Save the document as chap 12 exer 3 lastnameinitial.html.

Exercise 4

In this exercise you will use what you have learned to create a Web page table.

1. Open your HTML template file.
2. Key Web pages I’ve Visited Recently as the title.
3. Key The following table lists the Web pages I’ve created or visited recently.
4. Define a table that will have three rows with two cells in each row.
5. In the first cell of each row, create a link to a Web page. You can use Web pages you have created or Web pages on the Internet.
6. In the second cell of each row, key a description of the link.
7. Save the document as chap 12 exer 4 lastnameinitial.html