1. How to work with tables
Chapter 10

2. Learning Outcomes Applied
Use HTML to create tables with merged cells, captions, headers, and footers.
Use CSS and the CSS3 structural pseudo-classes to format the tables that you create.
Use the HTML5 figure and figcaption elements to treat a table as a figure.
Use HTML to provide accessibility for tables.
Knowledge
Describe these components of a table: rows, columns, cells, header cells, data cells, table header, table footer, and table body.
Describe the proper use of tables, now that CSS should be used for page layout.
Describe the use of nesting and wrapping with tables.
Describe the use of the table attributes for accessibility. 

3. HTML Tables
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 Elements for Coding Tables
<table> Contains the table, (block display)
<tr> Contains a table row
<td> Contains a table data cell
<th> Contains a table header cell
<caption> Configures a description of the table, (block display); must be inserted immediately after the <table> tag.

5. <table> <tr> <th>Book</th> <th>Year Published</th> <th>Sales</th> </tr> <td>PHP and MySQL</td> <td>2014</td> <td>$372,381</td> . <th>Total Sales</th> <td></td> <td>$2,154,786</td> </table>
HTML Table Example

6. HTML colspan Attribute
<table> <tr> <td colspan="2">Birthday List</td> </tr> <td>James</td> <td>11/08</td> <td>Karen</td> <td>4/17</td> </table>

7. HTML rowspan Attribute
<table> <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>

8. Grouping Table Content
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

9. Table Row Groups Example
<caption>Work Schedule</caption>
<thead>
<tr>
<th>Day</th>
<th>Hours</th>
</tr>
</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 Example

10. Enclosing Tables in Figures
You can enclose a table in figure element and use the figcaption element in place of the table caption element
<figure>
<figcaption>Total Sales by Book</figcaption>
<table> .
</table>
</figure>

11. Accessibility and Tables
Use the caption element to provide the title/caption for the table OR enclose the table in figure element and use figcaption to provide the title/caption for the table.
Use table header elements (<th> tags) to indicate column or row headings.
Other attributes that provide for accessibility:
headers & id
scope

12. Table accessibility: headers, scope and id
scope attribute
Used on th elements; specifies whether a header cell is a header for a column, row, or group of columns or rows; typical values "col" or "row"
id attribute
Used on th elements to identify the element
headers attribute
Used on td elements; specifies a space-separated list of id's (from the th's) to one or more header cells the header cell is related to

13. The HTML for a table that provides for accessibility
<caption>Total sales for books published from 2008 to 2012</caption>
<thead>
<tr>
<th id="hdr_book" scope="col">Book</th>
<th id="hdr_year" scope="col">Year Published</th>
<th id="hdr_sales" scope="col">Sales</th>
</tr>
</thead>
<tbody>
<td headers="hdr_book">PHP and MySQL</td>
<td headers="hdr_year">2014</td>
<td headers="hdr_sales">$372,381</td>

14. The HTML for a table that provides for accessibility (cont.)
<tr>
<td headers="hdr_book">JavaScript and jQuery</td>
<td headers="hdr_year">2015</td>
<td headers="hdr_sales">$305,447</td>
</tr>
</tbody>
<tfoot>
<th id="hdr_total" scope="row">Total Sales</th>
<td></td>
<td headers="hdr_sales hdr_total">$2,154,786</td>
</tfoot>
</table>

15. Using CSS to Style a Table
CSS Property
Align a table: table { width: 75%; margin: auto; }
Align within a table cell: text-align
background-color
padding
border-spacing or border-collapse
height
vertical-align
width
border, border-style, or border-spacing
background-image
caption--side

16. CSS border-collapse property
The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.
Values: separate, collapse
Default Value: separate
Recommended declaration:
table{border-collapse:collapse;}
separated borders
collapsed borders

17. CSS3 Structural Pseudo-classes
Purpose
:first-of-type
Applies to the first element of the specified type.
:first-child
Applies to the first child of an element. (CSS2 selector)
:last-of-type
Applies to the last element of the specified type.
:last-child
Applies to the last child of an element
:nth-of-type(n)
Applies to the “nth” element of the specified type. Values: a number, odd, or even

18. CSS that uses Pseudo-classes
th:first-child, td:first-child {text-align: left; } th:nth-child(2), td:nth-child(2) {text-align: center; } tbody tr:nth-child(even) {background-color: silver; }