1. Implementing Tables to Hold Data in HTML

2. Example
Table of high scores

3. Note By default… Data is arranged in table layout, but
…there are no lines (until you style the table with css)
This lesson is not about styling tables, but let’s draw some borders to make viewing this easier

4. Styles

5. That make up a basic table
Individual Tags
That make up a basic table

6. <table> Tag
Pair of tags
Surrounds entire content of table

7. <tr> Tag Pair of tags Specify a table row ()
One set of these surrounds each row of the table

8. <th> Tag Pair of tags
Surrounds each cell containing a heading (Table Heading)
Set of these for each cell containing headings

9. <td> Tag Pair of tags
Surrounds each cell containing a piece of data (Table Data)
Set of these for each cell containing data

10. Dimensions Up to You
Can have as many rows and as many columns as needed

11. Attributes
colspan & rowspan

12. Spanning Multiple Cells
What if you want one row to span several columns?
…or one column to span several rows?

13. Colspan & rowspan

14. Additional Markup <thead> <tbody> <tfoot>
Put around heading rows
<tbody>
Put around main data content
<tfoot>
Put around cells making up footer
Note: This is WEIRD, but you MUST markup the <tfoot> BEFORE the <tbody>
Note: If you use one, you MUST use all three!

15. Example

16. Why Bother with This? If a table is very long …and we print it
It takes up multiple pages
The <thead> content will print over multiple pages
Could also make it so only <tbody> is scrollable while keeping headings on screen when you’re really a styling master

17. Note:
There may not be a natural footer (which usually contains some sort of summary data)
Sometimes people opt to repeat header information in the footer (which can be helpful visually for long tables)