1 / 36

Chapter 5

Chapter 5. Formatting Content with Tables. Learning Objectives. How to use the <table> tag to create a table within a webpage How to use HTML tags to format content within HTML table How to embed images within an HTML table How to nest one table within another

barny
Download Presentation

Chapter 5

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. Chapter 5 Formatting Content with Tables

  2. Learning Objectives • How to use the <table> tag to create a table within a webpage • How to use HTML tags to format content within HTML table • How to embed images within an HTML table • How to nest one table within another • How to center a table within a page • How to align content within a table cell • How to place a border around a table • How to control rules around a table cell • How to provide a table caption and column headers • How to use the table header, body, and footer areas for formatting

  3. Learning objectives continued • How to control cell spacing and padding • How to control table row and column display • How to control table and table cell sizes

  4. Common table components

  5. Creating a simple table • <!DOCTYPE html><html><body><table><tr><td>Column One</td><td>Column Two</td></tr><table></body></html>

  6. Four-column table • <!DOCTYPE html><html><body><table><tr><td style="color:blue">Column One</td><td style="color:green">Column Two</td><td style="color:orange">Column Three</td><td style="color:red">Column Four</td></tr><table></body></html>

  7. Rows and columns • <!DOCTYPE html><html><body><table><tr><td>Food</td><td>Calories</td></tr><tr><td>Cheese burger</td><td>620</td></tr><tr><td>Pizza</td><td>600</td></tr><tr><td>Milk Shake</td><td>400 to 800</td></tr><tr><td>Pasta</td><td>350 to 600</td></tr><table></body></html>

  8. Formatting table content • <!DOCTYPE html><html><body><table><tr><td>Food</td><td style="font-weight: bold;">Calories</td></tr><tr><td>Cheese burger</td><td style="font-weight: bold;">620</td></tr><tr><td>Pizza</td><td style="font-weight: bold;">600</td></tr><tr><td>Milk Shake</td><td style="font-weight: bold;">400 to 800</td></tr><tr><td>Pasta</td><td style="font-weight: bold;">350 to 600</td></tr><table></body></html>

  9. Links within a table • <!DOCTYPE html><html><body><table><tr><td>Site</td><td>Web Address</td></tr><tr><td>Yahoo</td><td><a href="http://www.yahoo.com">Yahoo</a></td></tr><tr><td>Google</td><td><a href="http://www.google.com">Google</a></td></tr><tr><td>Microsoft</td><td><a href="http://www.microsoft.com">Microsoft</a></td></tr><tr><td>Facebook</td><td><a href="http://www.facebook.com">Facebook</a></td></tr><table></body></html>

  10. Images within a table • <!DOCTYPE html><html><body><table><tr><td>Pet</td><td>Photo</td></tr><tr><td>Dog</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/dog.jpg" width="300" height="150"/></td></tr><tr><td>Cat</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/cat.jpg" width="300" height="150"/></td></tr><tr><td>Horse</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/horse.jpg" width="300" height="150"/></td></tr><tr><td>Mouse</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/mouse.jpg" width="300" height="150"/></td></tr><table></body></html>

  11. Centering a table • <DOCTYPE! html><html><body><table style="margin: auto;"><tr><td>Calendar</td></tr><tr><td>Monday: Travel to New York</td></tr><tr><td>Tuesday: Meeting with CNN</td></tr><tr><td>Wednesday: Fly to Chicago</td></tr><tr><td>Thursday: Bulls Game</td></tr><tr><td>Friday: Fly to Phoenix</td></tr></table></body></html>

  12. Centering content in a cell • <DOCTYPE! html><html><body><table style="text-align: center;"><tr><td>City</td><td>Photo</td></tr><tr><td>Phoenix</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/Phoenix.jpg" width="150" height="100"></td></tr><tr><td>San Francisco</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/SanFrancisco.jpg" width="150" height="100"></td></tr><tr><td>New York</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/NewYork.jpg" width="150" height="100"></td></tr></table></body></html>

  13. Aligning content in a cell

  14. Aligning content of a specific cell • <DOCTYPE! html><html><body><table><tr><td>Description</td><td style="text-align: center;">Photo</td></tr><tr><td>Bikes Parked</td><td style="text-align: center;"><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/bike01.jpg"></td></tr><tr><td>Bike early in morning</td><td style="text-align: center;"><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/bike02.jpg"></td></tr><tr><td>Bike rider in city</td><td style="text-align: center;"><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/bike03.jpg"></td></tr></table></body></html>

  15. Aligning content vertically in a cell • <DOCTYPE! html><html><body><table><trvalign="top"><td>Tree Type</td><td style="text-align:center">Photo</td></tr><trvalign="top"><td>Apple</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/apple.jpg"></td></tr><trvalign="top"><td>Cherry</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/cherry.jpg"></td></tr><trvalign="top"><td>Orange</td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/orange.jpg"></td></tr></table></body></html>

  16. Adding or deleting table borders • <DOCTYPE! html><html><body><table border="1"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><table><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table></body></html>

  17. Controlling border widths • <DOCTYPE! html><html><body><table border="1"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><br/><table border="5"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><br/><table border="10"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table></body></html>

  18. Specifying table borders

  19. Border positions • <DOCTYPE! html><html><body><table border="1" frame="lhs"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><br/><table border="5" frame="below"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><br/><table border="10" frame="rhs"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table></body></html>

  20. Specifying border rules

  21. Border rules • <DOCTYPE! html><html><body><table border="1" rules="all"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><br/><table border="1" rules="cols"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><br/><table border="1" rules="row"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table></body></html>

  22. Table cell spacing • <DOCTYPE! html><html><body><h3>No Spacing</h3><table border="1"><tr><td>City</td><td>Sales</td></tr><tr><td>Phoenix</td><td>100</td></tr><tr><td>San Francisco</td><td>350</td></tr><tr><td>New York</td><td>252</td></tr></table><h3>Spacing</h3><table border="1" cellspacing="10"><tr><td>City</td><td>Sales</td></tr><tr><td>Phoenix</td><td>100</td></tr><tr><td>San Francisco</td><td>350</td></tr><tr><td>New York</td><td>252</td></tr></table></body></html>

  23. Cell padding • <DOCTYPE! html><html><body><h3>No Padding</h3><table border="1"><tr><td>City</td><td>Sales</td></tr><tr><td>Phoenix</td><td>100</td></tr><tr><td>San Francisco</td><td>350</td></tr><tr><td>New York</td><td>252</td></tr></table><h3>Padding</h3><table border="1" cellpadding="10"><tr><td>City</td><td>Sales</td></tr><tr><td>Phoenix</td><td>100</td></tr><tr><td>San Francisco</td><td>350</td></tr><tr><td>New York</td><td>252</td></tr></table></body></html>

  24. Using table captions • <DOCTYPE! html><html><body><table border="1"><caption>January Sales</caption><tr><td>City</td><td>Sales</td></tr><tr><td>Phoenix</td><td>100</td></tr><tr><td>San Francisco</td><td>350</td></tr><tr><td>New York</td><td>252</td></tr></table><table border="1"><caption>February Sales</caption><tr><td>City</td><td>Sales</td></tr><tr><td>Phoenix</td><td>200</td></tr><tr><td>San Francisco</td><td>250</td></tr><tr><td>New York</td><td>275</td></tr></table><table border="1"><caption>March Sales</caption><tr><td>City</td><td>Sales</td></tr><tr><td>Phoenix</td><td>150</td></tr><tr><td>San Francisco</td><td>250</td></tr><tr><td>New York</td><td>290</td></tr></table></body></html>

  25. Table heading (caption) • <DOCTYPE! html><html><body><table border="1"><caption>City Newspapers</caption><tr><th>City</th><th>Paper</th></tr><tr><td>Phoenix</td><td>Arizona Republic</td></tr><tr><td>San Francisco</td><td>San Francisco Chronicle</td></tr><tr><td>New York</td><td>New York Times</td></tr></table></body></html>

  26. Table header and footer • <DOCTYPE! html><html><body><table border="1"><thead style="background: Orange"><tr><th>City</th><th>Paper</th></tr></thead><tbody style="background: LightBlue"><tr><td>Phoenix</td><td>Arizona Republic</td></tr><tr><td>San Francisco</td><td>San Francisco Chronicle</td></tr><tr><td>New York</td><td>New York Times</td></tr></tbody><tfoot style="background: Yellow"><tr><td>Optional Table Footer</td></tr></tfoot></table></body></html>

  27. Unequal number table rows/columns • <DOCTYPE! html><html><body><table border="1"><tr><th>Account</th><th>Sales Manager</th><th>Sales Rep</th></tr><tr><td>Costco</td><td>John Smith</td><td>Mary Allen</td></tr><tr><td>Costco</td><td colspan="2">John Smith</td></tr><tr><td>Walmart</td><td>John Smith</td><td>Jean Smith</td></tr></table></body></html>

  28. Using rowspan • <DOCTYPE! html><html><body><table border="1"><tr><th>Wine</th><th>Favorites</th></tr><tr><td rowspan="2">Pinot Grigio</td><td>Cavit</td></tr><tr><td>EccoDomani</td></tr><tr><td>Chardonnay</td><td>Kendall Jackson</td></tr><tr><td>Merlot</td><td>Robert Mondavi</td></tr></table></body></html>

  29. A nested table • <DOCTYPE! html><html><body><table border="1"><tr><th>Wine</th><th>Favorites</th></tr><tr><td>Pinot Grigio</td><td><table><tr><td>Cavit</td></tr><tr><td>EccoDomani</td></tr></table></td><tr><td>Chardonnay</td><td>Kendall Jackson</td></tr><tr><td>Merlot</td><td>Robert Mondavi</td></tr></table></body></html>

  30. Treating a column uniquely with column groups • <DOCTYPE! html><html><body><table border="1" cellpadding="10" style="text-align:center"><colgroup><col></col><col style="background:yellow"></col><col></col></colgroup><tr><th>Wine</th><th>Cigar</th><th>Pizza</th></tr><tr><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/wine.jpg"/></td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/cigar.jpg"/></td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/pizza.jpg"/></td></tr></table></body></html>

  31. Colgroup continued • <DOCTYPE! html><html><body><table border="1" cellpadding="10" style="text-align:center"><colgroup><col span="2" style="background:yellow"></col><col></col></colgroup><tr><th>Apple</th><th>Cherry</th><th>Orange</th></tr><tr><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/apple.jpg"/></td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/cherry.jpg"/></td><td><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/orange.jpg"/></td></tr></table></body></html>

  32. Controlling a table’s width and height • <DOCTYPE! html><html><body><table border="1" height="100" width="100" style="text-align:center"><caption>100x100</caption><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><table border="1" height="200" width="200" style="text-align:center"><caption>200x200</caption><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><table border="1" height="400" width="400" style="text-align:center"><caption>400x400</caption><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table></body></html>

  33. Specifying cell sizes • <DOCTYPE! html><html><body><table border="1" style="text-align:center"><tr><td width="100" height="100">100x100</td><td width="200" height="200">200x200</td></tr><tr><td width="300" height="300">300x300</td><td width="400" height="400">400x400</td></tr></table></body></html>

  34. Formatting an entire page with a table • <DOCTYPE! html><html><body bgcolor="lightblue"><table border="1" style="margin:auto; background:white; " cellpadding="10" width="800"><tr><td style="text-align:center" colspan="2"><imgsrc="http://www.WebSiteDevelopmentBook.com/Chapter05/Pets.jpg"/></td></tr><tr><td><p>Loremipsum dolor sit amet, consecteturadipiscingelit. Suspendisse a tellus vitae quam elementuminterdumquis a massa. Etiaminterdumbibendumleo, rhoncusconvallisturpissodales tempus. Sedegetorci ac felismollispretium. Aenean et elit vitae loremblanditaliquam et viverrarisus. In blandit, risus ac commodopharetra, risus magna tincidunt ante, at posuereodioodioeuenim. Phaselluslibero dui, eleifend a eleifendeget, tempor et libero. Curabiturportaposuere dictum. Morbicursusnullaauctorneque semper euismod. Nullamodiotortor, venenatis at vehiculapulvinar, lobortisnecnisl. Nam consequatcursusnibhquistincidunt. Vivamussedliberoquismaurisfacilisisplacerat. </p></td><td><p>Integer et maurismassa. Praesentporttitorvariusvehicula. Loremipsum dolor sit amet, consecteturadipiscingelit. Aeneanaliquam ligula et risusimperdietvestibulum. Nullamutmetus a tellusdignissimconvallis in ac augue. Etiamfermentumfelisquisleosuscipit a scelerisque ante imperdiet. Morbivestibulumscelerisqueviverra. Cum sociisnatoquepenatibus et magnis dis parturient montes, nasceturridiculus mus. Aliquam at arcumauris. Sedestarcu, placeratfeugiatporttitor et, cursusegetnulla.</p></td></tr><tr><td style="text-align:center" colspan="2"><iframe width="640" height="360" src="http://www.youtube.com/embed/nLuEdBr9ee4?feature=player_embedded" frameborder="0" allowfullscreen></iframe></td></tr></table></body></html>

  35. Real world: Using color names

  36. summary • Web sites make extensive use of tables to present text, images, products, and even to format the page content itself. • To create a table within a web page, developers use the <table> and </table> tag pair. • Within the table definition, the developers use the <tr> and </tr> tag pair to define a row. • Each row consists of one or more cells which developers specify using the <td> and </td> tag pair. In this chapter, you made extensive use of tables to format a variety of data. • Using style attributes, you can control whether or not a table has a border, the height and width of the table and its cells, as well as the alignment. • You can also create a nested table, which is a table within a table.

More Related