Chapter 9 Table Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

Size: px

Start display at page:

Vernon Lionel Sullivan
5 years ago
Views:

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 2

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 3

4 The Table Element <table> <table> Element Contains the table Element Contains a table row <td> Element Contains a table data cell <th> Element Contains a table header cell <caption> Element Configures a description of the table 4

5 <table border="1"> <caption>birthday List</caption> <td>name</td> <td>birthday</td> <td>james</td> <td>11/08</td> <td>karen</td> <td>4/17</td> <td>sparky</td> <td>11/28</td> </table> HTML Table Example Birthday List TRY IT - do practice 9.15

6 <table border="1"> <th>name</th> <th>birthday</th> <td>james</td> <td>11/08</td> <td>karen</td> <td>4/17</td> <td>sparky</td> <td>11/28</td> </table> HTML Table Example 2 Using the <th> Element 6

7 HTML colspan Attribute <table border="1"> <td colspan= 2 > Birthday List</td> <td>james</td> <td>11/08</td> <td>karen</td> <td>4/17</td> </table> 7

8 HTML rowspan Attribute <table border="1 > <td rowspan="2">this spans two rows</td> <td>row 1 Column 2</td> <td>row 2 Column 2</td> </table> 8

9 Accessibility and Tables Use table header elements (<th> tags) to indicate column or row headings. Use the caption element to provide the title/caption for the table. headers & id attributes also provide for accessibility.

10 Accessibility: <table> <caption> Word Schedule</caption> <th id="day">day</th> <th id="hours">hours</th> <td headers="day">monday</td> <td headers="hours">4</td> <td headers="day">tuesday</td> <td headers="hours">3</td> <td headers="day">total</td> <td headers="hours">7</td> </table> headers & id Attributes

11 Old-style HTML Attribute (avoid) Using CSS to Style a Table CSS Property align Align a table: table { width: 75%; margin: auto; } Align within a table cell: text-align bgcolor background-color cellpadding cellspacing height valign width border padding border-spacing or border-collapse height vertical-align width border, border-style, or border-spacing --- background-image --- caption--side

12 Hands-On Practice

13 code <style> table { margin: auto; border: 5px solid LightSlateGray; width: 600px; border-spacing: 0; } td, th { border-style: none; padding: 5px; font-family: Ariel, sans-serif; } tr { vertical-align: top; } caption { font-family: verdana, sans-serif; font-weight: bold; font-size: 1.2em; padding-bottom:5px; }.altrow { background-color: LightSteelBlue; } 13

14 CSS3 Structural Pseudo-classes Pseudo-class :first-of-type :first-child :last-of-type :last-child :nth-of-type(n) Purpose Applies to the first element of the specified type. Applies to the first child of an element. (CSS2 selector) Applies to the last element of the specified type. Applies to the last child of an element Applies to the nth element of the specified type. Values: a number, odd, or even Try Hands-On Practice 9.4 to see how efficient this is 14

15 Hands-On Practice 9.4 Instead of creating an altrow class, use pseudo-class to style alternate rows tr:nth-of-type(even) { background-color: Lime; } Or style first row tr:first-of-type { background-color: Pink } 15

16 <table> <caption>work Schedule</caption> <thead> <th>day</th> <th>hours</th> </thead> <tbody> <td>monday</td> <td>4</td> <td>tuesday</td> <td>3</td> </tbody> <tfoot> <td>total</td> <td>7</td> </tfoot> </table> Table Row Groups <thead> table head rows <tbody > table body rows <tfoot> table footer rows

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

Web Development & Design Foundations with HTML5

1 Web Development & Design Foundations with HTML5 CHAPTER 8 TABLES 2 Learning Outcomes In this chapter, you will learn how to... Create a basic table with the table, table row, table header, and table