lesson 3 - ms wardeckemswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. ·...
TRANSCRIPT
![Page 1: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/1.jpg)
LESSON 3
Coding Tables Continued
![Page 2: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/2.jpg)
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.
![Page 3: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/3.jpg)
Creating the Secondary
(New Releases) Web Page
![Page 4: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/4.jpg)
Starting Notepad
• Open Notepad++
• Save in Folders:
HTML and JS Unit 3 – Tables In Class Project
• Save As: newreleases.html
![Page 5: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/5.jpg)
Enter in HTML Skeleton
<!DOCTYPE>
<html>
<head>
<title>Bell Video – New Releases</title>
</head>
<body>
</body>
</html>
![Page 6: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/6.jpg)
Add Skeleton
![Page 7: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/7.jpg)
• 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!
![Page 8: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/8.jpg)
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)
![Page 9: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/9.jpg)
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
![Page 10: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/10.jpg)
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>
![Page 11: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/11.jpg)
![Page 12: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/12.jpg)
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
![Page 13: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/13.jpg)
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>
![Page 14: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/14.jpg)
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>
![Page 15: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/15.jpg)
![Page 16: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/16.jpg)
What you Should See So Far
![Page 17: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/17.jpg)
Creating a Table with Borders
![Page 18: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/18.jpg)
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
![Page 19: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/19.jpg)
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>
![Page 20: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/20.jpg)
Creating Table Outline
• (continued)<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
![Page 21: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/21.jpg)
![Page 22: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/22.jpg)
Thinking Through Row 1
Row 1 Requirements:
1) 3 Heading Cells – will default to
center alignment
**will use <th> tags**
2) Background color = blue
![Page 23: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/23.jpg)
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>
![Page 24: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/24.jpg)
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**
![Page 25: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/25.jpg)
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>
![Page 26: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/26.jpg)
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>
![Page 27: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/27.jpg)
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>
![Page 28: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/28.jpg)
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>
![Page 29: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/29.jpg)
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
![Page 30: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/30.jpg)
![Page 31: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/31.jpg)
What you Should Now See!
![Page 32: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/32.jpg)
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
![Page 33: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/33.jpg)
Testing Links in a Web Page
Project 4: Creating Tables in a Web
Site
33
![Page 34: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/34.jpg)
Displaying Rules within a
Table
![Page 35: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/35.jpg)
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
![Page 36: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/36.jpg)
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?**
![Page 37: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/37.jpg)
Displaying Rules In Table
• Displaying Vertical Rules
![Page 38: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/38.jpg)
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?**
![Page 39: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/39.jpg)
Displaying Rules In Table
• Displaying Horizontal Rules
![Page 40: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/40.jpg)
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?**
![Page 41: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/41.jpg)
Displaying Rules In Table
![Page 42: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/42.jpg)
Displaying Rules In Table
• Special Note
• Be Default a table will display all rules
• If you want something different – you must specify
![Page 43: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/43.jpg)
Practice
Worksheet 3C
![Page 44: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/44.jpg)
![Page 45: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/45.jpg)
LESSON 4
Coding Tables Continued (Cell spacing, padding,
captions, and spanning)
![Page 46: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/46.jpg)
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.
![Page 47: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/47.jpg)
Adding Cellspacing,
Cellpadding, and a Caption
![Page 48: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/48.jpg)
Cell Formatting
• Cell Formatting
• By default, the size of each data cell fits the
minimum size for the inserted text
![Page 49: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/49.jpg)
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)
![Page 50: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/50.jpg)
Compare
Can Make Tables Look Nicer
![Page 51: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/51.jpg)
Opening an HTML File
• Open actor.html file in NotePad (downloaded
from my classroom website and saved with the other
files
![Page 52: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/52.jpg)
BEFORE
Cellspacing, Cell padding, and table Caption
![Page 53: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/53.jpg)
AFTER
Cellspacing and Cell padding, and Caption
![Page 54: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/54.jpg)
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>
...
![Page 55: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/55.jpg)
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
![Page 56: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/56.jpg)
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>
![Page 57: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/57.jpg)
Table after Cellspacing and Cell padding, and
Caption
![Page 58: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/58.jpg)
Saving and Printing the HTML File and Viewing and
Printing the Web Page
Project 4: Creating Tables in a Web
Site
58
![Page 59: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/59.jpg)
Spanning Rows and
Columns
![Page 60: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/60.jpg)
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**
![Page 61: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/61.jpg)
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
![Page 62: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/62.jpg)
Table without Cell Spanning
![Page 63: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/63.jpg)
Table with Cell Spanning
Adds to the visual Appearance of a Table!!
![Page 64: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/64.jpg)
Practicing Spanning
• Write the basic code to create the cell spanning on the
table on the next slide (we’ll add in attributes later)
![Page 65: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/65.jpg)
![Page 66: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/66.jpg)
Opening an HTML File
• Open type.html (should be downloaded from
my classroom website)
![Page 67: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/67.jpg)
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
![Page 68: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/68.jpg)
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>
![Page 69: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/69.jpg)
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
![Page 70: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/70.jpg)
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>
![Page 71: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/71.jpg)
Span 2 Rows• Notice after Drama – in Row 2
• Title-Actor(s) spans 2 columns – so needs colspan=“2”
![Page 72: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/72.jpg)
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>
![Page 73: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/73.jpg)
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>
![Page 74: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/74.jpg)
![Page 75: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/75.jpg)
What you should see!
![Page 76: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/76.jpg)
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>
![Page 77: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/77.jpg)
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>
![Page 78: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/78.jpg)
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>
![Page 79: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/79.jpg)
![Page 80: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/80.jpg)
What you Should Now See!
![Page 81: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/81.jpg)
Project 4: Creating Tables in a Web
Site
81
![Page 82: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/82.jpg)
Homework
• Worksheet 3D
![Page 83: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/83.jpg)
![Page 84: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/84.jpg)
DAY 6, 7, 8Project 3A Work Days!
![Page 85: LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and](https://reader034.vdocuments.us/reader034/viewer/2022051906/5ff8970df400dc2819249ba9/html5/thumbnails/85.jpg)
DAY 9 & 10Review and Test!