Implementing Tables to Hold Data in HTML

Example Table of high scores

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

Styles

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

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

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

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

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

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

Attributes colspan & rowspan

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

Colspan & rowspan

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!

Example

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

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)