Creating HTML Documents

Creating HTML documents Tables

1. Open, in the text editor, the file that we created in the last class. Change the date displayed.

Your name’s web page.

Type your name.

Web page modified on (current date).

Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching.

Write a second paragraph about your outside interests.

How to contact me
Type your address.
Type your phone number.

2. Tables provide a means for making your web pages look neater when presented either text, pictures or even links. In this lesson, we will be making a table that eventually will be for links to other pages on your web site. We will put the table after the second paragraph about yourself, but before the horizontal line.

Write a second paragraph about your outside interests.

By itself, these 2 tags do not do a lot. But, they are needed to tell the browser that you are about to make a table.

3. Every table consists of rows and columns, just the table feature in Word. The intersection of each row and column is a cell. We will be making a table that has links needed for Project 2.

Our table will consist of 4 rows and 2 columns. The general set up would be:

Row  cell cell Row  cell cell Row  cell cell ID-2950 Mrs. Jeanne Osborne Row  cell cell

Each row begins with and ends with . Each cell on the row begins with and ends with . Type in the following:

NJ Core Curriculum Course Content Standards	Technology Standards
How I will incorporate technology	State Educational websites
Professional organizations	Education courses completed

. Note: You will be creating pages for each of the items in the table. I would suggest that the first page that you do will the one about the education classes that you have completed. Include in that page, the course number, title, semester taken, and grade earned. For current classes (like this one), indicate that it is in progress. Present the data in a table. In the last HTML lesson, you will learn how to link from the home page to the new page.

View the table on your browser. Note, while it is organized, it can use some improvement.

4. Center the table. Do you remember the tag? Put it before and after the tags for table.

5. Now, we will add a border to the table, and, if desired a color.

If you are using the table to format the page, borders may not be necessary. If they detract from the overall appearance, then don’t use them.

6. Did you notice how the words were right close to the border? Cell padding adds spaces between the border and the words.

7. To increase the size of the border between cells, use cell spacing.

8. If you want to, you can set the cell width. The cell width is written as a percent of the screen. The percent is automatically equally divided among all of the cells. Typically, the contents of a cell will determine the cell width, but you may want to make a uniform cell width for appearances. You could 2 ID-2950 Mrs. Jeanne Osborne also set the width as a number of pixels. If you use pixels, use a maximum of 600 so that all browsers can view the table.

Each cell is 15% of the screen since we had 2 columns.

Each cell is 30% of the screen.

If you want to set the cell width for individual cells, you can put the width attribute in the

tag for the first row, use

Example for the webpage you are creating on your education classes completed:

tag. All cells in the same column will have the same width. Be sure that the total does not exceed 100% or 600 pixels. This would be useful if you want the different columns to have different widths. Cell heights could be also changed, but not all browsers will recognize this. You could add the attribute height = # to the table tag, where the # is either the number of pixels OR a percent. 9. Adding column labels – you should do this for the web page that you are going to create for the education classes that you have taken. To do this, after the
for the heading for each cell. Close each cell with

tag. All cells in the same column will have the same width. Be sure that the total does not exceed 100% or 600 pixels. This would be useful if you want the different columns to have different widths.

Cell heights could be also changed, but not all browsers will recognize this. You could add the attribute height = # to the table tag, where the # is either the number of pixels OR a percent.

9. Adding column labels – you should do this for the web page that you are going to create for the education classes that you have taken. To do this, after the

for the heading for each cell. Close each cell with

Continue with the rest of the table, using tags.

10. If you want to create newspaper style type columns, use

. Repeat for each column. If you wanted to align at the bottom, use bottom, instead of top. If you don’t use align, the text will be centered within the cells.

11. If you want to color the cells in your table, you can. You can do it for the entire table within the

Course number	Name of course	Semester taken	Grade
and	. Then type your column text. End with

tag, for the entire row within the tag or for individual cells within the

or	tags. You can also change font colors, if desired. 12. Cells within a table can have a variety of contents – words, graphics, links to other web pages or web sites, even another table is possible. 3