Using a Table

Tables are a way of displaying different types of data conveniently and neatly so that they are easy to read. Tables play an important role in formatting data and designing the entire page.

In this chapter you will:

Create a new page named books.html containing a table of books that you recommend.
Create a new page named friends.html containing a table of your friends.

A table consists of horizontal row(s)and vertical column(s). A cell in the table is created where a row and a column cross each other.

At the end of this chapter your Web pages will look as follows:

Create a new HTML page - books.html file

The page will be about books that you have read and recommend, and it will be named books.html.

Open Windows Explorer.
Go to the justin folder.
In the right pane (where you see your HTML files)right click with the mouse. Select New from the shortcut menu, then select Text Document.
Make sure that the new document, which is now called New Text Document.txt, is highlighted. If it is not highlighted, highlight the file you created named New Text Document.txt.
Change the name of the document to books.html (pay attention to the change in the file name extension from txt to html). A dialog box will open asking whether you wish to change the file name extension. Click Yes.
Double click on the file name books.html (double or single click depending on your Windows definitions). The browser will open with the file (which is still empty)inside it, but you will see nothing because the books.html file is still empty.
Return to Windows Explorer, highlight the file books.html, right-click with the mouse and choose Open With, and then choose Notepad.

In Notepad, type:

<html>
 <head>
  <meta http-equiv="content-type"
  content="text/html;charset=iso=8859-1" />
  <title>Books</title>
 </head>
<body>

</body>
</html>

From the Notepad menu bar, select File and then select Save to save the file.

Adding the text

Type the following text after the <body> tag and before the </body> tag. You can copy the text from the book's Web site. Instructions can be found under the heading Help:

Books
I didn't always read books. When I was little, Mom and
Dad read children's books to me. When I was 5, they
signed me up at the library. I noticed that my parents
read books, not just newspapers.
Now I know what fun reading is. My parents say that
"people who read, do better in school. They have a
better vocabulary, they express themselves better and
they know more about the world", so they encourage me
to read.

Save the changes you made in the books.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the books.html file.
Go back to the Notepad window containing the content of the books.html file.
Change the background color of the Web page to #FBE995.
```
<body bgcolor="#FBE995">
```
Format the text Books to be a heading (h2) with a navy color.
```
<h2><font color="navy">Books</font></h2>
```

Format the two paragraphs using the <p> tag, as follows:

<p>
I didn't always read books. When I was little, Mom and
Dad read children's books to me. When I was 5, they
signed me up at the library. I noticed that my parents
read books, not just newspapers.
</p>
<p>
Now I know what fun reading is. My parents say that
"people who read, do better in school. They have a
better vocabulary, they express themselves better and
they know more about the world", so they encourage me
to read.
</p>

Save the changes in the books.html file.
Go to the browser window, click the Refresh\Reload button to view the changes you made in the books.html file.

Figure 7.1: The first two paragraphs.
Go back to the Notepad window containing the content of the books.html file.

Stop! Do not try to create a table yet. Read the rest of this section. The instructions for creating a table will be provided in the next section (soon).

You can copy the text from the book's Web site. From the menu on the left-hand side, select Chapter 7. The instructions for using the text are on the Web site under the heading Help.

This is the table that you are going to create:

Title	Short Description
Charlie and the Chocolate Factory	Willy Wonka, a chocolate factory owner, announces a golden ticket contest. Five lucky people will be given a tour of his factory, and one will even win a lifetime supply of chocolate (WOW!!). Charlie, whose family is very poor and can hardly afford to purchase a bar of chocolate...
Hatchet	A dramatic, heart-stopping story of a boy who, following a plane crash in the Canadian wilderness, must learn to survive with only a hatchet and his own wits...
The Polar Express	On Christmas Eve, a boy boards a train called "The Polar Express", that is bound for the North Pole. When the train reaches the North Pole, Santa chooses one of the children on board to receive the first gift of Christmas. He chooses the boy, who asks for...

Create a table

In the following section you will create from scratch a table displayed above. Place the cursor following the </p> tag at the end of the second paragraph (ends with "to read."). Press Enter and type:

<table align="center" border="1" cellpadding="6"
cellspacing="2">
</table>

A table begins with the <table> tag and ends with </table> tag. All other tags used when creating a table are included between these tags.

The easiest way to think of a table is as a collection of individual cells arranged in rows and columns. A cell is created where the columns and rows cross each other.

A table with 6 rows, 3 Columns and 18 cells (6x3=18)

The align attribute determines how the table is aligned (horizontal alignment). The center value makes sure that it will be positioned in the center of the window (lefr-right).

The border attribute determines the boundaries of the table. The default setting is 0 - without any border line.

The cellpadding attribute determines the space between the cell border and the text inside the cell.

The cellspacing value determines the space between each of the individual cells in the table.

Creating the first row of the table

Place the cursor following the <table> tag, press Enter and type:

<tr>
</tr>

The table is built according to rows, therefore you have to create a row before you can create a cell(s)in that row.

Creating cells in the first row

Place the cursor following the <tr> tag, press Enter and type:
```
<td>
Title
</td>

<td>
Short description
</td>
```
The following screen displays:

Figure 7.2: The source code of the table.
So far the table that you have made contains 1 row with 2 cells in it.
Save the changes you made in the books.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made to the books.html file (see figure 7.3).

Figure 7.3: The first row of the table.
Go back to the Notepad window containing the content of the books.html file.

Creating the second row of the table

Place the cursor following the last </tr> tag which is before the </table> tag, press Enter and type:

<tr>
</tr>

Creating cells in the second row

Place the cursor following the last <tr> tag that you typed, press Enter and type:

<td>
Charlie and the Chocolate Factory
</td>
<td>
Willy Wonka, a chocolate factory owner, announces a
golden ticket contest. Five lucky people will be given
a tour of his factory, and one will even win a lifetime
supply of chocolate (WOW!!). Charlie, whose family is
very poor and can hardly afford to purchase a bar of
chocolate...
</td>

Save the changes you made in the books.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made to the books.html file (see figure 7.4).

Go back to the Notepad window containing the content of the books.html file.

Creating the third row of the table

Place the cursor following the last </tr> tag which is before the </table> tag, press Enter and type:

<tr>
</tr>

Creating cells in the third row

This procedure is similar to creating the first and second rows.

Place the cursor following the last <tr> tag that you typed, press Enter and type:

<td>
Hatchet
</td>
<td>
A dramatic, heart-stopping story of a boy who,
following a plane crash in the Canadian wilderness,
must learn to survive with only a hatchet and his own
wits...
</td>

Save the changes you made in the books.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the books.html file (see figure 7.5).

Figure 7.5: The table with 3 rows.
Go back to the Notepad window containing the content of the books.html file.

Creating the fourth row of the table

Place the cursor following the last </tr> tag which is before the </table> tag, press Enter and type:

<tr>
</tr>

Creating cells in the fourth row

Place the cursor following the last <tr> tag that you typed, press Enter and type:

<td>
The Polar Express
</td>
<td>
On Christmas Eve, a boy boards a train called "The
Polar Express", that is bound for the North Pole. When
the train reaches the North Pole, Santa chooses one
of the children on board to receive the first gift of
Christmas. He chooses the boy, who asks for...
</td>

Save the changes you made in the books.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made to the books.html file.

Figure 7.6: The whole table.
Go back to the Notepad window containing the content of the books.html file.

Tips

Hard white space

The browser determined the width of the columns. You will notice that the title of the book Charlie and the Chocolate Factory is written in more than one line. If you would like to display the title in one line (as a single unit, without line breaks), you must allocate hard white space by typing   instead of pressing the space bar in the keyboard.

Edit the name of the book Charlie and the Chocolate Factory. Replace each space with   in the text:
```
Charlie&nbsp;and&nbsp;the&nbsp;Chocolate&nbsp;Factory
The&nbsp;Polar&nbsp;Express
```
Save the changes you made in the books.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made to the books.html file (see figure 7.7).

Figure 7.7: The book titles with hard-white-space.

Vertical alignment

Now let's align the text in a table cell. The browser's default setting for displaying the content of a table cell is to center it vertically. If you want to align the content to the top of the table cell you must use the valign attribute of the <td> tag. To align the content of a table cell:

Add the valign attribute to the <td> tag of the cell which contains the text Charlie and the Chocolate Factory.

<td valign="top">

The same procedure applies to each cell you want to vertically align.

Background color of a table

In order for the table to be seen clearly and not be "over powered" by the background colors of the Web page, let's change the background color of the table to #FEF7D4, by using the bgcolor attribute.

Add the bgcolor attribute to the <table> tag.

<table align="center" border="1" cellpadding="6"
cellspacing="2" bgcolor="#FEF7D4">

Note - you can write the bgcolor attribute wherever you like in the <table> tag. Remember! The sequence of the attributes within a tag is NOT important.

Table heading

And finally, create the heading row in bold. Change the <td> tags to <th> tags in the first row of the table. The <td> tag and the <th> tag are similar, except that the content of the cell is centered and bold.

Change the <td> tags in the first row of the table to <th> and do NOT forget to change also the closing </td> tags to </th> tags. The changes will look like this:

<table align="center" border="1" cellpadding="6"
cellspacing="2" bgcolor="#FEF7D4">
<tr>
<th>
Title
</th>
<th>
Short Description
</th>
</tr>
<tr>
<td valign="top">
Charlie&nbsp;and&nbsp;the&nbsp;Chocolate&nbsp;Factory
</td>
<td valign="top">
Willy Wonka, a chocolate factory owner, announces a
golden ticket contest. Five lucky people will be given
a tour of his factory, and one will even win a lifetime
supply of chocolate (WOW!!). Charlie, whose family is
very poor and can hardly afford to purchase a bar of
chocolat...
</td>
</tr>
::
::

Save the changes you made in the books.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made to the books.html file (see figure 7.8).

Figure 7.8: Now it is easy to view and read the content of the table.

You are doing fine until now. Let's continue

Add an image to a table

The einther content for building a personal Web site can be found on the book's Web site. Select Chapter 7 from the menu on the left-hand side.

Downloading images from the book's Web site:

Go to the book's Web site
Select Chapter 7 from the menu on the left-hand side.
In the content pane, on the right-hand side, you will see the images: charlie.jpg, hatchet.jpg and polarExp.jpg
Download the three images to your computer. Instructions for downloading the images are available under Help on the left.

Adding an image

Using the src and title values listed below, add the image of each book beneath the name of the book and in the same cell using the <img /> tag.

The Book	src	title
Charlie and the Chocolate Factory	images/charlie.jpg	Charlie and the Chocolate Factory by Roald Dahl
Hatchet	images/hatchet.jpg	Hatchet by Gary Paulsen
The Polar Express	images/polarExp.jpg	The Polar Express by Chris Van Allsburg

The following is the code for the three left cells of the table, containing the book title and image:

<td valign="top">
Charlie&nbsp;and&nbsp;the&nbsp;Chocolate&nbsp;Factory
<br /><img src="images/charlie.jpg" title="Charlie and
the Chocolate Factory by Roald Dahl" />
</td>
<td valign="top">
Hatchet
<br /><img src="images/hatchet.jpg" title="Hatchet by
Gary Paulsen" />
</td>
<td valign="top">
The Polar Express
<br /><img src="images/polarExp.jpg" title="The Polar
Express by Chris Van Allsburg" />
</td>

Save the changes you made in the books.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made to the books.html file. The page will display as follows:

Figure 7.9: The table with images.
Close the browser window displaying the books.html file.
Close the Notepad window displaying the books.html file.

Create a new HTML page - friends.html file

Create a new page named friends.html with details of your friends.

Open Windows Explorer.
Go to the justin folder.
In the right pane (where all your HTML files are) right click. From the shortcut menu select New and then select Text Document.
Make sure that the new document, which is now called New Text Document.txt, is highlighted. If not, highlight it.
Change the name of the document to friends.html. Pay attention to the change in the file name extension from .txt to .html. A dialog box will open asking whether you wish to change the file name extension. Click Yes.
Double click on the file name friends.html (double or single click depending on your Windows definitions). The browser will open with the file (which is still empty), but you will see nothing because the friends.html file is still empty.
Return to Windows Explorer, highlight the file friends.html, right-click with the mouse and choose Open With, and then choose Notepad.

In Notepad, type:

<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1" />
<title>Friends</title>
</head>
<body>

</body>
</html>

Change the Web page background color to #FBE995.
```
<body bgcolor="#FBE995">
```
Create an header (h2) with the text Friends and navy color.
```
<h2><font color="navy">Friends</font></h2>
```
From the Notepad menu bar select File and then select Save to save the file.

Create a table

Stop! Do not try to create a table yet. We are just preparing the background for the next section. For now, just read the rest of this section, then go to the next items and follow the instructions for creating a table. You will create a table of your friends that contains the text below. To save on typing you can copy the text from the book's Web site. Select Chapter 7 from the menu on the left-hand side. You will find instructions for using the text under the Help heading.

Tony is my best friend. He runs all day long. I don't
understand where he's running to, but he's always on
the move.
Danny is my second best friend. I like to go to the
pool and the beach with him. He likes the water, the
sun and girls. Last summer we were together in a summer
camp and it was great.
Jimmy dreams of being a pilot and it's driving him
crazy. All day long he thinks about nothing but
airplanes and waves his arms around like wings, and
sometimes he scares me.

Create a table with 3 rows (the same number as the friends), each row with a single cell containing a description of one friend.

Place the cursor following the </h2> tag, press Enter and type:

<table align="center" border="1" cellpadding="6"
cellspacing="4" bgcolor="#FEF7D4">
</table>

Creating the first row of the table

Place the cursor following the <table> tag, press Enter and type:

<tr>
</tr>

Creating one cell in the row

Place the cursor following the last <tr> tag that you typed, press Enter and type:

<td valign="top">
Tony is my best friend. He runs all day long. I don't
understand where he's running to, but he's always on
the move.
</td>

Save the changes you made in the friends.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the friends.html file.

Figure 7.10: The first row of the table.
Go back to the Notepad window containing the content of the friends.html file.

Creating the next rows will follow the prcedure of the first one.

Creating the second row of the table

Place the cursor following the last </tr> tag which is before the <table> tag, press Enter and type:

<tr>
</tr>

Creating one cell in the row

Place the cursor following the last <tr> tag that you typed, press Enter and type:

<td valign="top">
Danny is my second best friend. I like to go to the
pool and the beach with him. He likes the water, the
sun and girls. Last summer we were together in a summer
camp and it was great.
</td>

Save the changes you made in the friends.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made to the friends.html file.
Go back to the Notepad window containing the content of the friends.html file.

Creating the third row of the table

Place the cursor folloeing the last </tr> tag and before the </table> tag, press Enter and type:

<tr>
</tr>

Creating one cell in the row

Place the cursor following the last <tr> tag that you typed, press Enter and type:

<td valign="top">
Jimmy dreams of being a pilot and it's driving him
crazy. All day long he thinks about nothing but
airplanes and waves his arms around like wings, and
sometimes he scares me.
</td>

Save the changes you made in the friends.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the friends.html file.

Figure 7.11: The table with 3 rows.
Go back to the Notepad window containing the content of the friends.html file.

Additional layout designs

Bold the names of your friends: Tony, Danny and Jimmy:

<b>Tony</b> is my best friend...
<b>Danny</b> is my second best...
<b>Jimmy</b> dreams of being...

Note - You can delete any empty row that were created in the course of making the table.

Add a column to the table

Downloading images from the Web site of the book

Go to the book's Web site
Select Chapter 7 from the menu on the left-hand side. In the content pane, on the right-hand side, you will see the images: tony.jpg, danny.jpg and jimmy.jpg
Download the three images to your computer. Instructions for downloading the images are available under Help on the left.

Add a cell with an image

Place the cursor following the first <tr> tag in the friends.html Web page and press Enter and type.
```
<td valign="top">
<img src="images/tony.jpg" />
</td>
```
You created a new cell in the first row of the table. Now there are 2 cells in that row.
Place the cursor following the second <tr> tag, press Enter and type:
```
<td valign="top">
<img src="images/danny.jpg" />
</td>
```
Place the cursor following the third <tr> tag, press Enter and type:
```
<td valign="top">
<img src="images/jimmy.jpg" />
</td>
```
Save the changes you made in the friends.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made to the friends.html file.

Figure 7.12: The table after you added a column with images.
Go back to the Notepad window containing the content of the friends.html file.

Change the width of a table

Change the width of the table to 80% of the width of the window displaying the page, center the table, change the border color of the table (attribute: bordercolor) to brown.
```
<table align="center" border="1" cellpadding="6"
cellspacing="4" width="80%" bgcolor="#FEF7D4"
bordercolor="brown">
```
The width attribute determines the width of the table. If you do not set a width for the table, the browser will do it, based on the content of the table.
Save the changes you made in the friends.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made to the friends.html file.

Figure 7.13: The table with a brown border.
Close the browser window displaying the friends.html file.
Close the Notepad window displaying friends.html file.

Part I

Part II