Transcript Tables

HTML
Concepts and Techniques
Fifth Edition
Chapter 4
Creating Tables in a Web Site
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
2
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
3
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
4
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. 148. 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
5
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. 150-151
Chapter 4: Creating Tables in a Web Site
6
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
7
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
8
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
9
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
10
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
11
Entering the HTML Tags to Define the
Web Page Structure
Chapter 4: Creating Tables in a Web Site
12
Creating a Borderless Table
to Position Images
• Do the exercise on pg. 159-160
• This will put your banner in a table.
Chapter 4: Creating Tables in a Web Site
13
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
14
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. 169-174).
• Remember, we don’t print these out!
• Now let me see it again!
Chapter 4: Creating Tables in a Web Site
15
Viewing a Web Page
Chapter 4: Creating Tables in a Web Site
16
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
17
Validating, Viewing, and Printing the
Web Page Using the Browser
Chapter 4: Creating Tables in a Web Site
18
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. 178-180
• Save this file as vacancy.html
• Validate it.
• Now, see how all of them link together.
Chapter 4: Creating Tables in a Web Site
19
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. 185-190 – adding row and column
spanning to this document.
Chapter 4: Creating Tables in a Web Site
20
Saving and Printing the HTML File and
Viewing and Printing the Web Page
Chapter 4: Creating Tables in a Web Site
21
• Labs
• Individual project
– Flash cards for Ch. 4
• In the lab Lab 2 – pg. 197
at
• You will need to get the
www.scsite.com/html5
mask.jpg file from HTML
e/learn
files/ch 4/In The lab
– Must score at least
• Group project
15/20
• Cases and places #5
– Do a minimum of 20
• Choose a partner and
cards
create these websites
– Due next class
together.
• Homework
meeting (after we
discuss this)
Chapter 4: Creating Tables in a Web Site
22