1 / 15

Basics of Web Design

Basics of Web Design. Chapter 9 Table Basics Key Concepts. Learning Outcomes. Describe the recommended use of a table on a web page Configure a basic table with the table, table row, table header, and table cell elements. Configure table sections with the thead, tbody, and tfoot elements.

yaholo
Download Presentation

Basics of Web Design

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. Basics of Web Design Chapter 9Table BasicsKey Concepts

  2. Learning Outcomes • Describe the recommended use of a table on a web page • Configure a basic table with the table, table row, table header, and table cell elements. • Configure table sections with the thead, tbody, and tfoot elements. • Configure a table to provide for accessibility • Use CSS to style an HTML table • Describe the purpose of CSS3 structural pseudo-classes

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

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

  5. HTMLTable Example <table border="1"><caption>Birthday List</caption> <tr> <td>Name</td> <td>Birthday</td> </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> Birthday List

  6. HTMLTable 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> Using the <th> Element

  7. HTML border Attribute • Indicates the table is specifically not used for page layout • Optional • border=“1”Visible browser default border • border=“”No visible browser default border.

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

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

  10. Accessibility and Tables • Use table header elements (<th> tags) to indicate column or row headings. • Use the summary attribute on the table element to provide an overview of the purpose and organization of the table. Has no visual effect • Use the caption element to provide the title/caption for the table. • Other attributes that provide for accessibility: • headers & id – Meta data for the columns • Scope (associate headers)

  11. Accessibility:headers & id Attributes <table> <caption> Word Schedule</caption> <tr> <th id="day">Day</th> <th id="hours">Hours</th> </tr> <tr> <td headers="day">Monday</td> <td headers="hours">4</td> </tr> <tr> <td headers="day">Tuesday</td> <td headers="hours">3</td> </tr> <tr> <td headers="day">Total</td> <td headers="hours">7</td> </tr> </table>

  12. Using CSS to Style a Table

  13. CSS3 Structural Pseudo-classes

  14. <table> <caption>Work Schedule</caption> <thead> <tr> <th>Day</th> <th>Hours</th> </tr> </thead> <tbody> <tr> <td>Monday</td> <td>4</td> </tr> <tr> <td>Tuesday</td> <td>3</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>7</td> </tr> </tfoot> </table> Table Row Groups • <thead>table head rows • <tbody >table body rows • <tfoot> table footer rows

  15. Summary • This chapter introduced coding techniques to create and configure tables. • You will use these skills over and over again as you create web pages.

More Related