1. Creating Tables in a Web Site
Chapter 4
Creating Tables in a Web Site

2. Chapter Objectives Define table elements
Describe the steps used to plan, design, and code a table
Create a borderless table to position images
Create a horizontal menu bar with text links
Copy and paste HTML code to a new file
Create a borderless table to organize text
Create a table with borders and insert text
Change the horizontal alignment of text
Chapter 4: Creating Tables in a Web Site

3. Chapter Objectives Add background color to rows and cells
Alter the spacing between and within cells using the cellspacing and cellpadding attributes
Insert a caption below a table
Create headings that span rows and columns using the rowspan and colspan attributes
Chapter 4: Creating Tables in a Web Site

4. Prepare yourself Create a Ch 4 folder in your home directory
Copy the files from public in the following directory P:\HTML Stuff\Chapter04\ChapterFiles
DO NOT COPY the whole directory, only the 3 files in it.
Put these in your home directory.
Read the project on pg. 144
Chapter 4: Creating Tables in a Web Site

5. Tables Tables – allow you to organize information on a web page.
Allows you to arrange items in rows and columns.
They can be complex or simple
Look at pg. 147 for some examples.
You can also use tables to position text and images, see pg This gives you more flexibility with the website.
Another thing you can do with tables is create frames – see pg. 149.
Chapter 4: Creating Tables in a Web Site

6. Table elements Row – horizontal line of information
Column – vertical line of information
Cell – intersection of a row and column
Heading cell – displays text bold and centered
Data cell – display normal text, left-aligned
Table border – line that encloses the perimeter of the table
Table header – same as a heading cell
Table caption – descriptive text located above or below the table
Look at some examples on pg
Chapter 4: Creating Tables in a Web Site

7. Do you need a table?
General rule – if it will help organize information or web page elements so that it is easier to read
Look at pg. 152, which looks better, table or bulleted list?
Chapter 4: Creating Tables in a Web Site

8. Planning the table
You can’t create tables effectively without first etching out on paper what they should look like.
Look at the examples on pg. 153.
Now I want you to plan a table….
Get in groups of 3
Chapter 4: Creating Tables in a Web Site

9. Table scenario
You are the facilities manager at a conference center in Starkville, MS. It is a general use facility for the community which hosts many events. You would like to place a table on the website to reflect the usage of the center. The rooms are available for use from 8am until 9pm. There are 7 rooms total that can be used.
Use your imagination and draw up a table that will meet the needs of this center. Be mindful of row and column spanning…
Chapter 4: Creating Tables in a Web Site

10. Coding the table <table></table> - start and end of table
<tr></tr> - start and end of a table row (heading or data)
<th></th> - start and end of a heading cell (BOLD and centered)
<td></td> - start and end of a data cell
Look at the example on pg. 155
Now turn the page (pg. 156) and look at the attributes you can assign to each tag.
Chapter 4: Creating Tables in a Web Site

11. Entering the HTML Tags to Define the Web Page Structure
Enter the HTML code shown in Table 4–3. (You can just start with the template you created and make it match, that’s what I would do.)
Compare what you typed to Figure 4–12. If you notice errors, use your mouse pointer or ARROW keys to move the insertion point to the right of each error and use the BACKSPACE key to correct the error
Chapter 4: Creating Tables in a Web Site

12. Entering the HTML Tags to Define the Web Page Structure
Chapter 4: Creating Tables in a Web Site

13. Creating a Borderless Table to Position Images
Do the exercise on pg
This will put your banner in a table.
Chapter 4: Creating Tables in a Web Site

14. Creating a Horizontal Menu Bar with Text Links
Look on pg. 161 at the horizontal navigation bars…
Enter the HTML code shown in Table 4-4, pressing ENTER after each line
The pipe symbol (|) is shift \ (above the Enter key)
Save this file as statewide.html
Chapter 4: Creating Tables in a Web Site

15. Adding Text to a Table Cell
Now we need to populate the table..
Do pg. 164
Don’t forget to save your file.
Validate your code.
Let me see it before we go any further.
After I see it, continue creating the 2nd web page (pp ).
Remember, we don’t print these out!
Now let me see it again!
Chapter 4: Creating Tables in a Web Site

16. Viewing a Web Page
Chapter 4: Creating Tables in a Web Site

17. Testing Links on a Web Page
Test all the links to make sure they work…
Show me…
Chapter 4: Creating Tables in a Web Site

18. Validating, Viewing, and Printing the Web Page Using the Browser
Chapter 4: Creating Tables in a Web Site

19. Cellspaceing & Cellpadding
Cellspacing - # of pixels of space between CELLS
Cellpadding - # of pixels of space between the cell’s data and it’s border
See pg. 176
DO pg
Save this file as vacancy.html
Validate it.
Now, see how all of them link together.
Chapter 4: Creating Tables in a Web Site

20. Row and column spanning
Colspan – attribute that specifies the # of columns to span
Rowspan – attribute that specifies the # of rows to span
These go on the <th> or <td> tag.
Look at the example on pg. 183
Open the file bedrooms.html in your home directory.
Do pp – adding row and column spanning to this document.
Chapter 4: Creating Tables in a Web Site

21. Saving and Printing the HTML File and Viewing and Printing the Web Page
Chapter 4: Creating Tables in a Web Site

22. Homework Flash cards for Ch. 4 at www.scsite.com/html5e/learn
Labs
Individual project
In the lab Lab 2 – pg. 197
You will need to get the mask.jpg file from HTML files/ch 4/In The lab
Group project
Cases and places #5
Choose a partner and create these websites together.
Homework
Flash cards for Ch. 4 at
Must score at least 15/20
Do a minimum of 20 cards
Due next class meeting (after we discuss this)
Chapter 4: Creating Tables in a Web Site