View
1
Download
0
Category
Preview:
Citation preview
LESSON 3
Coding Tables Continued
Lesson Learning Targets
• I can create a Web page table that displays text and / or
images.
• I can create a Web page table that serves as a menu bar.
Creating the Secondary
(New Releases) Web Page
Starting Notepad
• Open Notepad++
• Save in Folders:
HTML and JS Unit 3 – Tables In Class Project
• Save As: newreleases.html
Enter in HTML Skeleton
<!DOCTYPE>
<html>
<head>
<title>Bell Video – New Releases</title>
</head>
<body>
</body>
</html>
Add Skeleton
• Inside the body tags – immediately add the following code.
<body>
<img src = “bellvideologo.jpg" width="596“
height="93“ />
</body>
Add Bell Video Image to Top!
Creating a Horizontal Menu Bar with Text Links
Insert a Table with 1 Row and 7 Columns (Each Word Gets a Column and Each “I”
Gets a Column)
Thinking Through the First Table
Table Requirements(color coded with
next slide):
1) Borderless
2) 1 Row – all cells in row are centered
3) 7 Columns
4) Want it to take up 60% of the width of
the browser
Creating a Horizontal Menu Bar with Text Links
• After the <img/> tag, type the following:
<br />
<table border="0" cols="7” width="60%">
<tr align="center">
</tr>
</table>
Thinking Through Row 1
Row Requirements:
1) 7 Columns – each with word or “|”
2) All Data Cells
3) Each have a varying width % of the
table
Add Cell 1 and Cell 2
• After the <tr> tag, type the following:
<tr align="center">
<td width="20%"><a href =
“bellvideohome.html">Home</a></td>
<td width="1%">|</td>
Add Cells, 3, 4, 5, 6
• (continue)
<td width="25%"><a =href="newreleases.html">New
Releases</a></td>
<td width="1%">|</td>
<td width="15%"><a
href="actor.html">Actor</a></td>
<td width="1%">|</td>
<td width = “15%”><a
href=“type.html”>Type</a></td>
What you Should See So Far
Creating a Table with Borders
Thinking Through the Second Table
Table Requirements:
1) Border = 5 pixels
2) 5 Rows – 1 heading, 4 data
3) 3 Columns
4) Want it to take up 80% of the width of
the browser
Creating Table Outline
• After the horizontal menu table just added, create a new table and the first row of headings:
<br />
<table cols="3" border="5" width="80%">
<tr>
</tr>
<tr>
</tr>
Creating Table Outline
• (continued)<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Thinking Through Row 1
Row 1 Requirements:
1) 3 Heading Cells – will default to
center alignment
**will use <th> tags**
2) Background color = blue
Edit Row 1
• Edit the code for the first row
<tr bgcolor="blue">
<th><font color="white” size="+1"> Title</font></th>
<th><font color="white” size="+1">
Actor(s)</font></th>
<th><font color="white” size="+1">
Description</font></th>
</tr>
Thinking Through Row 2
Row 2, 3, 4 Requirements:
1) 3 data Cells **will use <td> tags**
**NOTE – when define the width of the cells
(percentage wise%) in one row – applies to
all rows**
Edit Row 2
• Edit second row of text:<tr>
<td width="25%">Good Night,
<br />and Good Luck</td>
<td width="30%">David Strathairn
<br />George Clooney</td>
<td width="45%">Nostalgic black and white used to show period authenticity.</td>
</tr>
Edit Row 3
• Edit third row of text:
<tr>
<td>Walk the Line</td>
<td>Joaquin Phoenix<br />
Reese Witherspoon</td>
<td>The music is compelling; the
lives are riveting.</td>
</tr>
Edit Row 4
• Edit the fourth row of text:
<tr>
<td>The Constant Gardener</td>
<td>Rachel Weisz
<br />Ralph Fiennes</td>
<td>Flashback structure enhances
this mystery as it circles
around a conspiracy.</td>
</tr>
Edit Row 5
• Create the fifth row of text and end the table:
<tr>
<td>Cinderella Man</td>
<td>Paul Giamatti
<br />Russell Crowe</td>
<td>A movie where a good man
prevails despite odds
against him.</td>
</tr>
Special Note When Designing tables
• As many rows of text can continue to be added as you need
• You ONLY need to specify and know number of columns
ahead of time because this MUST be specified in the <table> tag
What you Should Now See!
Testing Links in a Web Page – DO They Work?
• Click the Home link in the horizontal menu bar on the New
Releases Web page
• Click the New Releases link in the vertical menu bar on
the home page to return to the New Releases Web page
• Click the Type link in the horizontal menu bar on the New
Releases Web page
• Click the Actor link in the horizontal menu bar on the Type
Web page
Testing Links in a Web Page
Project 4: Creating Tables in a Web
Site
33
Displaying Rules within a
Table
Displaying Rules In Table
• Rules Attribute
• used to create horizontal or vertical lines within a
table (around the individual cells)
• Insert inside the <table> tag
• rules=“cols” shows vertical lines
• rules=“rows” shows horizontal lines
• rules=“none” shows no lines
Displaying Rules In Table
• Displaying Vertical Rules
• Add the following into the <table> tag
<br />
<table cols=“3" border="5“ rules=“cols”
width="80%">
<tr bgcolor="blue">
**Now Refresh your browser – what do you
see?**
Displaying Rules In Table
• Displaying Vertical Rules
Displaying Rules In Table
• Displaying Horizontal Rules
• Change the following in the <table> tag
<br />
<table cols=“3" border="5“ rules=“rows”
width="80%">
<tr bgcolor="blue">
**Now Refresh your browser – what do you
see?**
Displaying Rules In Table
• Displaying Horizontal Rules
Displaying Rules In Table
• Displaying No Rules
• Change the following in the <table> tag
<br />
<table cols=“3" border="5“ rules=“none”
width="80%">
<tr bgcolor="blue">
**Now Refresh your browser – what do you
see?**
Displaying Rules In Table
Displaying Rules In Table
• Special Note
• Be Default a table will display all rules
• If you want something different – you must specify
Practice
Worksheet 3C
LESSON 4
Coding Tables Continued (Cell spacing, padding,
captions, and spanning)
Lesson Learning Targets
• I can format a Web page table with cell padding and cell
spacing.
• I can format a Web page table using cell spanning to
combine cells across a row or column.
Adding Cellspacing,
Cellpadding, and a Caption
Cell Formatting
• Cell Formatting
• By default, the size of each data cell fits the
minimum size for the inserted text
Cell Formatting
• Cell Padding : cellpadding
• Defines the number of pixels of space within a
cell of a table (white space inside the cell)
• Cell Spacing : cellspacing
• Defines the number of pixels of space between
cells in a table (width of the cell borders)
Compare
Can Make Tables Look Nicer
Opening an HTML File
• Open actor.html file in NotePad (downloaded
from my classroom website and saved with the other
files
BEFORE
Cellspacing, Cell padding, and table Caption
AFTER
Cellspacing and Cell padding, and Caption
Adding Cellspacing and Cellpadding to a Table
• Find the table immediately after the horizontal menu; make
the following changes:
<table border="5" cellspacing=“2”
cellpadding=“5” cols="4"
width="70%">
<tr bgcolor="blue">
<th><font color="white"
size=+1>Actor</font></td>
...
Adding a Table Caption
• A caption helps clarify the purpose of the table
• Immediately before the end of the table, find the text
<!--Insert caption here -->
• Replace the comment with:
<caption align=“bottom”><em>Listing of
movies by actor</em></caption>
**note this tag is nested INSIDE the table
tag**
55
Table Caption
56
Start Tag Purpose End Tag
<caption> - Place inside the table tags
- Will place a “caption” around table
- Used to provide clarification to table
- Can use align attribute to choose location around
table (top, bottom)
</caption>
Table after Cellspacing and Cell padding, and
Caption
Saving and Printing the HTML File and Viewing and
Printing the Web Page
Project 4: Creating Tables in a Web
Site
58
Spanning Rows and
Columns
Spanning Rows and Columns
• Cell Spanning
• Merging several cells into a single cell
• An attribute of the <th> or <td> tags
**This is where planning becomes
extremely IMPORTANT**
Spanning Rows and Columns
• Column Spanning Attribute: colspan
• Defines the number of columns spanned by
a cell
• Row Spanning Attribute : rowspan
• Defines the number of rows spanned by a
cell
Table without Cell Spanning
Table with Cell Spanning
Adds to the visual Appearance of a Table!!
Practicing Spanning
• Write the basic code to create the cell spanning on the
table on the next slide (we’ll add in attributes later)
Opening an HTML File
• Open type.html (should be downloaded from
my classroom website)
We Want to Span 3 columns in the first Row Together
• The first cell in the first row – spans three columns
• Add colspan=“3” as an attribute to this cell
• We will then only program ONE CELL for this row
Creating the First Heading
That Spans Columns• Find the end of the table with the horizontal menu bar; insert
the follow (in yellow):
<br />
<table border="5" cellspacing="2“
cellpadding="5" cols="2"
width="80%">
<tr>
<th colspan="3" bgcolor="blue">
<font color="white" face=“Chaucer“
size="+2">Movies by Type</font>
</th>
</tr>
Span 2 Rows• In row 2 – first cell with rowspan=“3”
• In row 3&4 – the first cell will already be accounted for (in row 2) so when
we program we start with cell 2
• In row 5 – first cell with rowspan=“3”
• In row 6&7 – the first cell will already be accounted for (in row 5) so when
we program we start with cell 2
Creating the First Heading
That Spans Columns
• After the movies by Type Row add the following
</tr>
<tr>
<th rowspan="3" width="20%"
bgcolor="black">
<font color="#ffffff“
size="+1">Drama</font>
</th>
Span 2 Rows• Notice after Drama – in Row 2
• Title-Actor(s) spans 2 columns – so needs colspan=“2”
Add next 2 cells in row 2
• After the Drama Cell – complete the row with the following
<th colspan="2" bgcolor="gainsboro">
<font color="blue" size="+1">Title
- Actor(s)</font>
</th>
</tr>
Add the next two rows
Remember- on the next two rows – the first cell is already
taken up by cell spanning
<tr>
<td>Good Night, and Good Luck</td>
<td>David Strathairn</td>
</tr>
<tr>
<td>The Constant Gardener</td>
<td>Rachel Weisz<br />Ralph Fiennes</td>
</tr>
What you should see!
Add Comedy RowSpan
• After the 3rd row (drama movies) Insert the following to
span Comedy over two rows
<tr>
<th rowspan="3" width="20%"
bgcolor="black">
<font color="#ffffff" size="+1">Comedy
</font>
</th>
Creating the Second Heading
That Spans Columns
• Complete row 5 – Title – Actor(s) spans 2 columns
<th colspan="2" bgcolor="gainsboro">
<font color="blue" size="+1">Title
- Actor(s)</font>
</th>
</tr>
Add the next two rows
Remember- on the next two rows – the first cell is already
taken up by cell spanning
<tr>
<td>The Wedding Crashers</td>
<td>Owen Wilson</td>
</tr>
<tr>
<td>Napoleon Dynamite</td>
<td>Jon Heder</td>
</tr>
What you Should Now See!
Project 4: Creating Tables in a Web
Site
81
Homework
• Worksheet 3D
DAY 6, 7, 8Project 3A Work Days!
DAY 9 & 10Review and Test!
Recommended