Web Development & Design Foundations with HTML5 8th Edition презентация

Web Development & Design Foundations with HTML5 8th Edition CHAPTER 8 KEY CONCEPTS

Learning Outcomes In this chapter, you will learn how to ... Create a basic table with the table, table row, table header, and table cell elements Configure table sections with the thead, tbody, and tfoot elements Increase the accessibility of a table Style an HTML table with CSS Describe the purpose of CSS structural pseudo-classes

HTML Table Tables are used on web pages to organize tabular information Composed of rows and columns – similar to a spreadsheet. Each individual table cell is at the intersection of a specific row and column. Configured with table, tr, and td elements

HTML Table Elements <table> Contains the table <tr> Contains a table row <td> Contains a table cell <caption> Configures a description of the table

HTML Table Example <table border="1"> <caption>Bird Sightings</caption> <tr> <td>Name</td> <td>Date</td> </tr> <tr> <td>Bobolink</td> <td>5/25/10</td> </tr> <tr> <td>Upland Sandpiper</td> <td>6/03/10</td> </tr> </table>

HTML Table Example 2 <table border="1"> <tr> <th>Name</th> <th>Birthday</th> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> <tr> <td>Sparky</td> <td>11/28</td> </tr> </table>

HTML Table Attributes align (obsolete) bgcolor (obsolete) border cellpadding (obsolete) cellspacing (obsolete) summary (obsolete but may be reinstated) width (obsolete) Use CSS to configure table characteristics instead of HTML attributes

HTML Common Table Cell Attributes align (obsolete) bgcolor (obsolete) colspan rowspan valign (obsolete) height (deprecated) width (deprecated) Use CSS to configure most table cell characteristics instead of HTML attributes

HTML colspan Attribute <table border="1"> <tr> <td colspan=“2”> Birthday List</td> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> </table>

HTML rowspan Attribute <table border="1"> <tr> <td rowspan="2">This spans two rows</td> <td>Row 1 Column 2</td> </tr> <tr> <td>Row 2 Column 2</td> </tr> </table>

Accessibility and Tables Use table header elements (<th> tags) to indicate column or row headings. Use the caption element to provide a text title or caption for the table. Complex tables: Associate table cell values with their corresponding headers <th> tag id attribute <td> tag headers attribute

<table border="1"> <table border="1"> <caption>Bird Sightings</caption> <tr> <th id="name">Name</th> <th id="date">Date</th> </tr> <tr> <td headers="name">Bobolink</td> <td headers="date">5/25/10</td> </tr> <tr> <td headers="name">Upland Sandpiper</td> <td headers="date">6/03/10</td> </tr> </table>

Checkpoint Describe the purpose of using a table on a web page. How is the text contained in a th element displayed by the browser? Describe one coding technique that increases the accessibility of an HTML table.

Using CSS to Style a Table

CSS Structural Pseudo-classes

Table Row Groups <thead> table head rows <tbody > table body rows <tfoot> table footer rows

Checkpoint 1. Describe a reason to configure a table with CSS properties instead of HTML attributes. 2. List three elements that are used to group table rows.

Summary This chapter introduced the HTML and CSS techniques used to create and configure tables on web pages.