1 / 36

Creating Tables in a Web Site

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.

frea
Download Presentation

Creating Tables in a Web Site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Project 4 Creating Tables in a Web Site

  2. 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

  3. Starting Notepad Project 4: Creating Tables in a Web Site

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. Starting Notepad Project 4: Creating Tables in a Web Site

  18. 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

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. Adding a Table Caption <caption align="bottom"><em>Listing of movies by actor</em></caption> </table> Project 4: Creating Tables in a Web Site

  29. type.html File Project 4: Creating Tables in a Web Site

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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

  35. 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

  36. Project 4 Complete Creating Tables in a Web Site

More Related