360 likes | 370 Views
Learn how to create tables in a web site, including borderless and bordered tables, vertical/horizontal menu bar with text links, changing alignment of text, adding background color to rows and cells, altering spacing between cells, inserting captions, and using rowspan and colspan attributes.
E N D
Project 4 Creating Tables in a Web Site
Project Objectives • Create a table (borderless and borders). • Create a vertical/horizontal menu bar with text links • Change the horizontal alignment of text • 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 • Use the rowspan and colspan attributes Project 4: Creating Tables in a Web Site
Starting Notepad Project 4: Creating Tables in a Web Site
Entering the HTML Tags to Define the Web Page Structure • <!DOCTYPE html • PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <html> • <head> • <title>Bell video -- Great Selection</title> • </head> • <body> • </body> • </html> Project 4: Creating Tables in a Web Site
Creating a Borderless Table to Position Images <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Bell video -- Great Selection</title> </head> <body> <table border="0" cols="2“ width="90%"> </table> </body> </html> Project 4: Creating Tables in a Web Site
Table tags • <table></table>Creates a table • <tr></tr>Sets off each row in a table • <td></td>Sets off each cell in a row • <th></th>Sets off the table header (a normal cell with bold, centered text) Project 4: Creating Tables in a Web Site
Setting rows and cells in a Table <table border="0" cols="2" width="90%"> <tr> <td></td> </tr> </table> Project 4: Creating Tables in a Web Site
Inserting Images in a Table <table border="0" cols="2" width="90%"> <tr> <td><img src="bellvideologo.gif" width=“430" height=“74" alt="Bell Video Logo" /></td> <td><img src="csexcellence.gif" width="108" height=“94" alt="Excellence Award" /></td> </tr> </table> Project 4: Creating Tables in a Web Site
Creating a Vertical Menu Bar with Text Links <br /> <table border="0" cellspacing = "15" cols="2" width="90%"> <td> New Releases Browse by Actor Browse by Type </td> </table> Project 4: Creating Tables in a Web Site
Creating a Vertical Menu Bar with Text Links <br /> <table border="0" cellspacing = "15" cols="2" width="90%"> <td> <a href = "newreleases.htm"> New Releases</a> <a href = "actor.htm"> Browse by Actor</a> <a href = "type.htm"> Browse by Type</a> </td> </table> Project 4: Creating Tables in a Web Site
Creating a Vertical Menu Bar with Text Links <br /> <table border="0" cellspacing = "15" cols="2" width="90%"> <td> <a href = "newreleases.htm"> New Releases</a> <p><a href = "actor.htm"> Browse by Actor</a></p> <p><a href = "type.htm"> Browse by Type</a></p> </td> </table> Project 4: Creating Tables in a Web Site
Creating a Vertical Menu Bar with Text Links <br /> <table border="0" cellspacing = "15" cols="2" width="90%"> <tr> <td valign = "top" width = “20%" bgcolor = “lightsteelblue"> <a href = "newreleases.htm"> New Releases</a> <p><a href = "actor.htm"> Browse by Actor</a></p> <p><a href = "type.htm"> Browse by Type</a></p> </td> </tr> </table> Project 4: Creating Tables in a Web Site
Adding Text to a Table Cell <br /> <table border="0" cellspacing = "15" cols="2" width="90%"> <tr> <td valign = "top" width = “20%" bgcolor = “lightsteelblue"> <a href = "newreleases.htm"> New Releases</a> <p><a href = "actor.htm"> Browse by Actor</a></p> <p><a href = "type.htm"> Browse by Type</a></p> </td> <td> </td> Project 4: Creating Tables in a Web Site
Adding Text to a Table Cell <br /> <table border="0" cellspacing = "15" cols="2" width="90%"> <tr> <td valign = "top" width = “20%" bgcolor = “lightsteelblue"> <a href = "newreleases.htm"> New Releases</a> <p><a href = "actor.htm"> Browse by Actor</a></p> <p><a href = "type.htm"> Browse by Type</a></p> </td> <td valign = "top" width = “65%"> </td> Project 4: Creating Tables in a Web Site
Adding Text to a Table Cell <a href = "newreleases.htm"> New Releases</a> <p><a href = "actor.htm"> Browse by Actor</a></p> <p><a href = "type.htm"> Browse by Type</a></p> </td> <td valign = "top" width = "75%"> <b> Bell video is the leading video rental store... "Excellence in Customer Service" award. <p> The Bell video web site is a new </p> <p> Please send any comments to ..</p></b> </td> Project 4: Creating Tables in a Web Site
Adding Text to a Table Cell <a href = "newreleases.htm"> New Releases</a> <p><a href = "actor.htm"> Browse by Actor</a></p> <p><a href = "type.htm"> Browse by Type</a></p> </td> <td valign = "top" width = “65%"> <b> Bell video is the leading video rental store... "Excellence in Customer Service" award. <p> The Bell video web site is a new </p> <p> <font size = "-1">Please send any comments to <a href = "mailto:bellvideo@ips.com">bellvideo@isp.com</a></font></p></b> </td> Project 4: Creating Tables in a Web Site
Starting Notepad Project 4: Creating Tables in a Web Site
Newreleases.html - structure <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title>Bell Video - New Releases</title> </head> <body> <table border="0" cols="7" width="60%"> <tr> <td><img src="bellvideologo.gif" width="430" height="74" alt="Bell Video Logo" /></td> </tr> </table> </body> <html> Project 4: Creating Tables in a Web Site
Creating a Horizontal Menu Bar with Text Links <td><img src="bellvideologo.gif" width="430" height="74" alt="Bell Video Logo" /></td> </tr> </table> <br /><table border="0" cols="7" width="60%"> <tr align="center"> <td width="20%"><a href="bellvideohome.htm">Home</a></td> <td width="1%">|</td> <td width="25%"><a href="newreleases.htm">New Releases</a></td> <td width="1%">|</td> <td width="15%"><a href="actor.htm">Actor</a></td> <td width="1%">|</td> <td width="15%"><a href="type.htm">Type</a></td> </tr> </table> Project 4: Creating Tables in a Web Site
Creating a Table with Borders and Inserting Table Headings <br /><table cols="4" border="5" width="80%"> <tr bgcolor="lightsteelblue"> <th><font color="#993366" size="+1">Title</font></th> <th><font color="#993366" size="+1">Type</font></th> <th><font color="#993366" size="+1">Actor(s)</font></th> <th><font color="#993366" size="+1">Rating</font></th> </tr> Project 4: Creating Tables in a Web Site
Creating a Table with Borders and Inserting Text … <th><font color="#993366" size="+1">Actor(s)</font></th> <th><font color="#993366" size="+1">Rating</font></th> </tr> <tr> <td>The Lord of the Rings: <br />The Fellowship of the Ring</td> <td>Fantasy</td> <td>Ian McKellen <br />Elijah Wood</td> <td>PG-13</td> </tr> Project 4: Creating Tables in a Web Site
Creating Additional Cells and Inserting Text … <td>PG-13</td> </tr> <tr> <td>The Matrix Revolutions</td> <td>Action</td> <td>Keanu Reeves <br />Laurence Fishburne</td> <td>R</td> </tr> <tr> <td>Mona Lisa Smile</td> <td>Drama</td> <td>Julia Roberts</td> <td>PG-13</td> </tr> </table> Project 4: Creating Tables in a Web Site
actor.html File - structure <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title>Bell Video - Actor</title> </head> <body> <table border="0" cols="1" width="90%"> <tr> <td><img src="bellvideologo.gif" width="430" height="74" alt="Bell Video Logo" /></td> </tr> </table> </body> </html> Project 4: Creating Tables in a Web Site
actor.html File – menu bar <table border="0" cols="1" width="90%"> <tr> <td><img src="bellvideologo.gif" width="430" height="74" alt="Bell Video Logo" /></td> </tr> </table> <br /><table border="0" cols="7" width="60%"><tr align=center> <td width="20%"><a href="bellvideohome.htm">Home</a></td> <td width="1%">|</td><td width="25%"><a href="newreleases.htm">New Releases</a></td><td width="1%">|</td> <td width="15%"><a href="actor.htm">Actor</a></td> <td width="1%">|</td><td width="15%"><a href="type.htm">Type</a></td> </tr> </table> Project 4: Creating Tables in a Web Site
actor.html File – bordered table • <br /><table border="5" cols = "4" width="70%"> • <tr bgcolor="lightblue"> • <th><font color="#993366" size="+1">Actor</font></th> • <th><font color="#993366" size="+1">Movie</font></th> • <th><font color="#993366" size="+1">Type</font></th> • </tr> Project 4: Creating Tables in a Web Site
Adding Cellspacing and Cellpadding to a Table <br /><table border="5" cols = "4" cellspacing="2" cellpadding="5" cols="4" width="70%"> <tr bgcolor="lightblue"> <th><font color="#993366" size="+1">Actor</font></th> <th><font color="#993366" size="+1">Movie</font></th> <th><font color="#993366" size="+1">Type</font></th> </tr> Project 4: Creating Tables in a Web Site
Adding cells and inserting text <tr> <td>Russell Crowe</td> <td>Gladiator</td> <td>Drama</td> </tr> <tr> <td>Russell Crowe</td> <td>A Beautiful Mind</td> <td>Drama</td> </tr> <tr> <td>Diane Keaton</td> <td>Something's Gotta Give</td> <td>Comedy</td> </tr> Project 4: Creating Tables in a Web Site
Adding a Table Caption <caption align="bottom"><em>Listing of movies by actor</em></caption> </table> Project 4: Creating Tables in a Web Site
type.html File Project 4: Creating Tables in a Web Site
Creating the First Heading That Spans Columns <br /><table border="5" cellspacing="2" cellpadding="5" cols="2" width="80%" > <tr> <th colspan="3" bgcolor="lightsteelblue"> <font color="#993366" face+"chaucer" size="+2">Movies by Type</font> </th> </tr> Project 4: Creating Tables in a Web Site
Creating the Second Heading That Spans Rows <tr bgcolor="ffffff"> <th rowspan="5" width="20%" bgcolor="#336699"> <font color ="#ffffff" size=+1>Action</font> </th> Project 4: Creating Tables in a Web Site
Creating the Third Heading That Spans Colums <th colspan="2" bgcolor="thistle"> <font color="#336699" size=+1>Title - Actor(s)</font> </th> </tr> Project 4: Creating Tables in a Web Site
Add columns and insert text <tr> <td>Cinderella Man</td> <td>Russell Crowe <br />Renee Zellweger</td> </tr> <tr> <td>Master and Commander: <br />The Far Side of the World</td> <td>Russell Crowe</td> </tr> <tr> <td>Mission Impossible</td> <td>Tom Cruise</td> </tr> <tr> <td>Batman</td> <td>Jack Nicholson <br>Michael Keaton</td> </tr> Project 4: Creating Tables in a Web Site
Adding another headings that span rows and columns <tr> <th rowspan=“3" bgcolor="#336699"> <font color="#ffffff" size="+1">Comedy</font> </th> <th colspan="2" bgcolor="thistle"> <font color="#336699" size="+1">Title - Actor(s)</font> </th> </tr> Project 4: Creating Tables in a Web Site
Insert text <tr> <td>Ace Ventura: Pet Detective</td> <td>Jim Carrey</td> </tr> <tr> <td>Airplane</td> <td>Leslie Nielsen</td> </tr> </table> Project 4: Creating Tables in a Web Site
Project 4 Complete Creating Tables in a Web Site