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.

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.

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:

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

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

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

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

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

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.

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

Creating HTML Documents

Type your name.