HTML Tables Presenting data in rows and columns

Sometimes data is best presented in tables �  Rows �  Columns

�  Cells �  With headers and footers

Tables are simple to create, but verbose

<table> … </table> <tr> … </tr> <td> … </td>

A simple table has just rows and columns <table>!<tr>!<td>Andy Bernard</td><td>$9,963.49</td><td>$5,976.20</td><td>$7,920.45</td><td>$23,860.14</td>!</tr>!<tr>!<td>Pam Halpert</td><td>$8,258.87</td><td>$6,188.07</td><td>$9,365.33</td><td>$23,812.27</td>!</tr>!<tr>!<td>Stanley Hudson</td><td>$5,587.17</td><td>$9,493.05</td><td>$5,911.82</td><td>$20,992.04</td>!</tr>!…!</table>!

Table headers and footers � Header <thead>!<tr>! <th></th><th>January</th><th>February</th><th>March</th><th>Total</th>!</tr>!</thead>!

�  Footer <tfoot>!<tr><td></td><td>$46,515.48</td><td>$45,703.88</td><td>$47,796.08</td><td>$140,015.43</td></tr>!</tfoot>!

We can have data that spans across two or more rows or columns

<tr>! <th colspan="5">First Quarter Sales</th>!</tr>!

Tables are for data, not layout

Stylin' tables can and should be done using CSS

Much more on styling tables soon.

Applying overall styles <link rel="stylesheet" type="text/css" href="site.css" />!

table{!

!font-family: Arial, Sans-Serif;!

!font-size: 12px;!

!background: #fff;!

!margin: 45px;!

!width: 480px;!

}!

th{!

!font-size: 14px;!

!color: #039;!

!padding: 10px 8px;!

!border-bottom: 2px solid;!

}!

td{!

!color: #669;!

!padding: 9px 8px 0px 8px;!

}!

Alternating rows tr:nth-child(odd) {! background: #eef; !}!

Hovering over a row: tr:hover tbody tr:hover td!{! color: #339;! background: #d0dafd;!}!

Conclusion

� HTML tables are for data, not for layout � They can have headers and footers � Cells can span rows and columns � We can make tables look fantastic by styling

them through CSS