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
Add Bell Video Image to Top! Inside the body tags immediately add the following code. <body> <img src = bellvideologo.jpg" width="596 height="93 /> </body>
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>
Row Requirements: Thinking Through Row 1 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
Table Requirements: Thinking Through the Second Table 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>
Row 1 Requirements: Thinking Through Row 1 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> </tr> <td>walk the Line</td> <td>joaquin Phoenix<br /> Reese Witherspoon</td> <td>the music is compelling; the lives are riveting.</td>
Edit Row 4 Edit the fourth row of text: <tr> </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>
Edit Row 5 Create the fifth row of text and end the table: <tr> </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>
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
Project 4: Creating Tables in a Web Site Testing Links in a Web Page 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>
55 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**
56 Table Caption 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
Project 4: Creating Tables in a Web Site Saving and Printing the HTML File and Viewing and Printing the Web Page 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> </tr> <th colspan="3" bgcolor="blue"> </th> <font color="white" face= Chaucer size="+2">movies by Type</font>
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 </tr> <th colspan="2" bgcolor="gainsboro"> </th> <font color="blue" size="+1">title - Actor(s)</font>
Add the next two rows Remember- on the next two rows the first cell is already taken up by cell spanning <tr> </tr> <tr> </tr> <td>good Night, and Good Luck</td> <td>david Strathairn</td> <td>the Constant Gardener</td> <td>rachel Weisz<br />Ralph Fiennes</td>
What you should see!
Add Comedy RowSpan After the 3 rd row (drama movies) Insert the following to span Comedy over two rows <tr> <th rowspan="3" width="20%" bgcolor="black"> </th> <font color="#ffffff" size="+1">comedy </font>
Creating the Second Heading That Spans Columns Complete row 5 Title Actor(s) spans 2 columns <th colspan="2" bgcolor="gainsboro"> </th> </tr> <font color="blue" size="+1">title - Actor(s)</font>
Add the next two rows Remember- on the next two rows the first cell is already taken up by cell spanning <tr> </tr> <tr> </tr> <td>the Wedding Crashers</td> <td>owen Wilson</td> <td>napoleon Dynamite</td> <td>jon Heder</td>
What you Should Now See!
Project 4: Creating Tables in a Web Site 81
Homework Worksheet 3D
DAY 6, 7, 8 Project 3A Work Days!
DAY 9 & 10 Review and Test!