Let’s talk about the ten table creation tags for HTML5. They allow developers to create different types of table-based content, using a tabular format in a grid-based layout. These more specialized table-related tags allow HTML5 developers to define their document tabular content with a significant amount of flexibility, using less than a dozen tags. The table tags are inherently semantic because they are clearly used to define tables of data collections and information grids.
The chapter explains table tags, which implement tabular content in HTML. All of the tags are supported in HTML5; and also are supported in earlier versions of HTML. They include the table <table>, table data <td>, table row <tr>, column <col>, table column group <colgroup>, caption <caption>, table body <tbody>, table header <thead>, table footer <tfoot> and table group header <th>.
HTML5 Table Tags: Tabular Information
This chapter covers the ten text-related table tags that are supported in HTML5. They create tabular collections of information, much like a grid in Android or Java programming, but styled as a table, which is like a 2D data definition collection (databases use tables as well) similar to what you experience with basic SQL definitions. All of these tags are supported in legacy versions of HTML; a few of the tags even go all the way back to HTML 2.0, and I’ll point
this out, where applicable. The table tags are optimally used as child tags of the semantic tags covered in Chapter 10, so that your table-based content is encapsulated (or wrapped) into standardized semantic containers. Table data is also semantic; it is assimilated by semantic search, as the table-related tag names describe what the data contained inside of the table tag name represents to the organization of your tabular content!
Because of the conformance to the new Web 3.0 semantic thrust currently underway in HTML5, table tags have returned from the recent obscurity they were facing. For a while, developers were moving away from using tables and frames toward using other containers and CSS to achieve the same visual results. But used properly, table tags can create tables of interrelated data, much like a database. Table 14-1 shows the ten table tags that are supported in HTML5 as well as in earlier HTML versions.
Table 14-1. Ten HTML Content Publishing Tags
for Table Creation
HTML Table Creation Tags |
HTML Table Creation Tag Usage |
---|---|
table |
Defines a table |
caption |
Defines a table caption |
tr |
Defines a table row |
th |
Defines a table heading cell |
td |
Defines a table data cell |
thead |
Defines a table |
tbody |
Defines a table body |
tfoot |
Defines a table footer |
col |
Defines a table column |
colgroup |
Defines a table column group |
Let’s take a look at the table creation tags in logical sections, in the same way that they’re arranged in this table, starting with your core HTML5 table tags <table>, <tbody>, and <caption>. These define important table characteristics to the HTML5 rendering engine. For this reason, these list tags could also be classified as semantic search tags, and so it is important that they be implemented correctly by HTML5 content developers.
Top Level HTML Table Creation: Table and Caption
The top-level table tags are used to define the table itself; these include the table <table> tag, which is used as the parent container for the table, and its child tags— <tbody> and <caption>, which are used to specify the primary table data, called table
body
and table caption, respectively.
The TABLE Tag: The Core Tag Used to Create the Table Element
A <table> tag defines the HTML table element. At a bare minimum, an HTML table must consist of the <table> element and one or more <tr>, <td>, and <th> elements.
Two <table> element
parameters are still supported in HTML5: sortable and border. Eight parameters were replaced by CSS3, but are valid in prior HTML versions. They are all shown in Table 14-2.
Table 14-2. Ten <table> Parameters
Used for Table Configuration
HTML Table Tag Parameters |
HTML Table Tag Parameter Usage |
---|---|
sortable |
Defines the table as sortable |
border |
Defines the table as having a border |
align |
Defines alignment (left, right, center) |
bgcolor |
Defines the table background color |
cellpadding |
Defines the table cell padding value |
cellspacing |
Defines the table cell spacing value |
frame |
Defines outside borders that are visible |
rules |
Defines inside borders that are visible |
summary |
Defines the summary of the table content |
width |
Defines the table width |
As you see later on in this chapter, all of the other table tags are child tags of <table>. The <tr> element defines a table row, the <td> element defines each table cell, and the <th> element defines a table header labeling the table columns.
More complex tables would also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements, all of which is covered in detail over the course of this chapter.
Let’s use the <table> tag to create a table in a section containing popular brands and models of Italian sport cars, and use the two parameters supported in HTML5, border and sortable, to make this table have borders,
and be able to be sorted. It’s important to note that not all the browsers currently support a sortable parameter
. This exotic car table is accomplished using the following HTML5 markup:
<!DOCTYPE html><html>
<head><title>Exotic Car Table</title></head>
<body>
<section >
<table border="1" sortable>
<tr>
<th>Brand</th>
<th>Model</th>
</tr>
<tr>
<td>Ferrari</td>
<td>LaFerrari</td>
</tr>
<tr>
<td>Bugatti</td>
<td>Chiron</td>
</tr>
<tr>
<td>Maserati</td>
<td>GranCabrio</td>
</tr>
<tr>
<td>Lamborghini</td>
<td>Gallardo</td>
</tr>
</table>
</section>
</body></html>
Next, let’s take a look at how the table caption <caption> tag allows you to add a caption to the parent Table <table> tag it is contained in.
The CAPTION Tag: Adding a Caption to Your Table
The <caption> tag is used as a child tag to define the caption for your table element. The <caption> tag needs to be inserted immediately after the <table> tag. This tag has one align parameter, which is not supported in HTML5 due to the trend toward using CSS for styling and tag markup for content definition.
Let’s use the
caption tag
to add a caption to your table example. This is accomplished in the following HTML markup:
<!DOCTYPE html><html>
<head><title>Exotic Car Table with Caption</title></head>
<body>
<section >
<table>
<caption>Exotic Italian Car Manufacturers and Current Models</caption>
<tr><th>Brand</th><th>Model</th></tr>
<tr><td>Ferrari</td><td>LaFerrari</td></tr>
<tr><td>Bugatti</td><td>Chiron</td></tr>
<tr><td>Maserati</td><td>GranCabrio</td></tr>
<tr><td>Lamborghini</td><td>Gallardo</td></tr>
</table>
</section>
</body></html>
Notice that I’ve also made the table markup more compact in the way I am spacing my tags, with table row constructs each occupying their own line of markup. As long as everything nests properly, spacing makes no difference to the HTML5 parsing engines.
Next, let’s look at table content definition child tags.
HTML5 Table Content Definition: TR, TH, and TD
The next three tags in Table 14-1 allow you to define your table rows and their cells. There are five
parameters for the <tr> tag, none of which is supported in HTML5. I include them in Table 14-3 for those of you working on legacy projects.
Table 14-3. Five Table Row <tr> Parameters Used Prior to HTML5
HTML Table Tag Parameters |
HTML Table Tag Parameter Usage |
---|---|
align |
Alignment (left, right, center, justify) |
bgcolor |
Defines the table row background color |
char |
Aligns content to a table row character |
charoff |
Defines the character alignment offset |
valign |
Vertical alignment (top, middle, bottom) |
A table row is kind of like a record in a database, with the table cells serving as data fields inside of a data record. In fact, with tables being sortable and semantic search relating more and more to data, the <table> tag and its children are very well positioned to be used in this fashion in Web 3.0.
As you’ve seen in the examples thus far, each <tr> element contains one or more <th> or <td> elements.
Since you have already seen how the <tr> element is used, I move on to cover table heading <th>, and table data <td> elements in this section, without using up any space for markup listings. To see these elements in action, simply refer back to the tags that I covered in the previous section.
The TH Tag: Defining the Table Heading Cells in the Table Row
The <th> tag defines the table headings in a table row. These headings are used to label subsequent rows of data by using headings for each column. An HTML table has two kinds of cells: heading cells, called
header cells, which contain heading information, and standard cells, which contain table data. Standard cells are created by using the <td> element, which is covered in the next section.
The text content used inside these <th> elements are bolded and centered by default (automatically). The text in your <td> elements, on the other hand, would not be bolded, and should be
left-aligned as a default, just like text in most tables and in spreadsheets, that is, data, and not heading text (labels, data field names, etc.).
This is seen in the default CSS3 stylesheet settings for the <th> element, which are shown here to reinforce this:
th { display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center; }
Notice that CSS supports tables implicitly with a table-cell parameter and that the vertical alignment parameter is inherited, from the table row <tr> parent tag (see Table 14-3).
There are six parameters supported for the table heading <th> tag in HTML5, as seen in the top section of Table 14-4. There are nine other parameters that aren’t supported in HTML5 but work in earlier versions of HTML. The
sorted parameter
allows you to define the sort direction (reversed, number, reversed number, or number reversed) and a scope parameter allows you to define your <th> tag’s scope of influence (row, column, rowgroup, or colgroup).
Table 14-4. Fifteen <th> Parameters Used for Table Headers
HTML Table Tag Parameters |
HTML Table Tag Parameter Usage |
---|---|
sorted |
Defines a sort direction for that column |
scope |
Defines header scope (col, row or group) |
abbr |
Defines a header abbreviation term |
headers |
Defines header cells a header relates to |
colspan |
Defines a number of columns header spans |
rowspan |
Defines a number of rows a header spans |
align |
Alignment (left, right, center, justify) |
axis |
Defines category names for header cell |
bgcolor |
Defines the header background color |
char |
Aligns content to table header character |
charoff |
Defines the character alignment offset |
height |
Defines the table height |
nowrap |
Specify no wrap flag for header content |
valign |
Vertical alignment (top, middle, bottom) |
width |
Defines the table width |
The abbr parameter defines the abbreviation for your header. The headers parameter
defines the header cells that the <th> tag relates to. This allows you to have more than one level of header information. To use this headers parameter, assign an id to your top-level header, and reference it using a headers parameter. Here’s an example of this using HTML markup:
<tr><th colspan="2">Enter Name Here:</th></tr>
<tr>
<th headers="namedata">Proper Name:</th>
<th headers="namedata">Family Name:</th>
</tr>
I also show a colspan parameter in the previous example, since your Enter Name Here needs to align over your Proper Name and Family Name headings, so it needs to span two columns using a colspan=”2″ parameter value. You can do this same thing using the rowspan parameter to have a heading
span more than one row.
Next, let’s look at complex tables that have different header, footer, and body sections.
Complex Table Definition: THEAD, TBODY, TFOOT
Similar to semantic tags, the <table> parent tag allows you to define a header and a footer for your table, as well as a main body of content. The <thead> element is used in conjunction with the <tbody> and <tfoot> elements, and each of these can specify the various component parts of your table definition; that is, a table header, or <thead>; a table body, or <tbody>; and a table footer, or <tfoot>. This more complex form of table definition uses the tags shown in the third section of Table 14-1.
The THEAD Tag
: Defining Each Description Term Child Element
The <thead> tag groups header content in an HTML table. The <thead> element needs to be used in conjunction with the <tbody> and <tfoot> elements so that you are specifying each of the component semantic sections that are in your table. Browsers then leverage these semantic design elements for asynchronous scrolling, allowing a table body to independently move while the header and footer information remains locked in place. When printing a large table that spans multiple pages, defining these global table region elements enables a table header and a table footer to be printed at the top and bottom of each page, respectively.
This <thead> tag must always be a child tag of a <table> parent tag and needs to be declared after any <caption> as well as any <colgroup> elements. Additionally a <thead> must be used before the <tbody> or <tfoot> table section containers and used before any <tr> elements.
Default CSS3 defined for this <thead> tag is shown here, for reference purposes only, and, as you can see, the header is centered vertically, and its border color is inherited from its parent container, and it has its own table-header-group CSS3:
thead { display: table-header-group;
vertical-align: middle;
border-color: inherit; }
None of the table header group parameters are supported in HTML5, but I list them in
Table 14-5 for those of you working on legacy HTML markup projects. The parameters are all used for alignment and their usage is fairly self-explanatory.
Table 14-5. Table Head <thead> Parameters Used Prior to HTML5
HTML THEAD Tag Parameters |
HTML THEAD Tag Parameter Usage |
---|---|
align |
Alignment (left, right, center, justify) |
char |
Aligns content to a table row character |
charoff |
Defines the character alignment offset |
valign |
Vertical alignment (top, middle, bottom) |
Next, let’s take a look at the table body <tbody> tag.
The TBODY Tag: Defining Each Description Data Child Element
The <tbody> tag
holds the main part of your table, and has the same considerations as discussed in the previous section covering thead. This <tbody> tag must always be a child tag of a <table> parent tag, and needs to be declared after any <caption> element, and after any <colgroup> elements and after the <thead> element. Additionally, a <tbody> must be used before the <tfoot> table footer section containers and used before any <tr> elements containing any <th> and <td> elements.
The default CSS for a <tbody> tag is seen as a grouping of table rows, and
is middle (vertical center) aligned. This is shown here for reference purposes, because this book does not cover CSS3 quick syntax reference:
tbody { display: table-row-group;
vertical-align: middle;
border-color: inherit; }
The <tbody> parameters are the same ones shown in Table 14-5, so I will not repeat them again here.
Next, let’s morph the initial example in this chapter and use a more complex table version with <thead> and <tbody> to create the same results:
<!DOCTYPE html><html>
<head><title>Exotic Car Table with Caption</title></head>
<body>
<section >
<table>
<caption>Exotic Italian Car Manufacturers and Current Models</caption>
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tbody>
<tr><td>Ferrari</td><td>LaFerrari</td></tr>
<tr><td>Bugatti</td><td>Chiron</td></tr>
<tr><td>Maserati</td><td>GranCabrio</td></tr>
<tr><td>Lamborghini</td><td>Gallardo</td></tr>
</tbody>
</table>
</section>
</body></html>
Next, let’s take a look at the table footer <tfoot> tag.
The TFOOT Tag: Defining Each Description Data Child Element
The <tfoot> tag
holds the footer part of a table. It has the same considerations as discussed in the previous two sections. This <tfoot> tag must always be a child tag of a <table> parent tag, and needs to be declared after any <caption> element, and after any <colgroup> elements and after the <thead> element. Additionally, a <tfoot> must be used before the <tbody> table body section container, which is counter-intuitive to what you might assume. I would have assumed that the <tfoot> markup comes after the <tbody> markup. In fact, this is not the case, so remember
this rule!
Default CSS for a <tfoot> tag looks like the following:
tfoot { display: table-footer-group;
vertical-align: middle;
border-color: inherit; }
The <tfoot> parameters are the same ones shown in Table 14-5, so, I will not repeat them again here. Remember, they are not supported in HTML5, so only use them in legacy HTML projects and use CSS to implement these features. An HTML5 browser might render these deprecated parameters, so be sure to test your HTML markup across all popular browsers.
Next, let’s morph the initial example in this chapter and use a more complex table version using <thead>, <tbody> and <tfoot>, to create an enhanced table result, which has a footer with references. This is done in the following HTML5 markup:
<!DOCTYPE html><html>
<head><title>Exotic Car Table with Caption</title></head>
<body>
<section >
<table>
<caption>Exotic Italian Car Manufacturers and Current Models</caption>
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tfoot>
<tr><th>References:</th></tr>
<tr><td>Sports Car Brands and Models researched using Google</td></tr>
</tfoot>
<tbody>
<tr><td>Ferrari</td><td>LaFerrari</td></tr>
<tr><td>Bugatti</td><td>Chiron</td></tr>
<tr><td>Maserati</td><td>GranCabrio</td></tr>
<tr><td>Lamborghini</td><td>Gallardo</td></tr>
</tbody>
</table>
</section></body></html>
Next, let’s take a look
at column-related table tags.
Table Column Definition: COL and COLGROUP
Finally, let’s look at
a couple of the table tags that allow you to work with table columns. A <col> tag is generally used inside a <colgroup> tag to define column characteristics across an entire column, so that you don’t have to do it inside every single <th> or <td> tag. None of the column parameters is supported in HTML5, but I list them in Table 14-6 for all of you working on legacy HTML markup projects.
Table 14-6. Table Column Parameters Used Prior to HTML5
HTML THEAD Tag Parameters |
HTML THEAD Tag Parameter Usage |
---|---|
align |
Alignment (left, right, center, justify) |
char |
Aligns content to a table row character |
charoff |
Defines the character alignment offset |
width |
Defines the column width |
valign |
Vertical alignment (top, middle, bottom) |
Next, let’s add a background color to each column in the example table. We’ll use yellow for the car manufacturer column and orange for the car model column. This is accomplished by nesting these two <col> definitions in order and arranged from left to right inside the <colgroup> parent tag, as shown in the following HTML5 markup:
<!DOCTYPE html><html>
<head>
<title>Exotic Car Table with Caption</title>
</head>
<body>
<section >
<table>
<caption>Italian Car Manufacturer (Yellow) and Model (Orange)</caption>
<colgroup>
<col style="background-color:yellow" />
<col style="background-color:orange" />
</colgroup>
<thead>
<tr><th>Manufacturer</th><th>Model</th></tr>
</thead>
<tfoot>
<tr><th>References:</th></tr>
<tr><td>Sports Car Brands and Models researched using Google</td></tr>
</tfoot>
<tbody>
<tr><td>Ferrari</td><td>LaFerrari</td></tr>
<tr><td>Bugatti</td><td>Chiron</td></tr>
<tr><td>Maserati</td><td>GranCabrio</td></tr>
<tr><td>Lamborghini</td><td>Gallardo</td></tr>
</tbody>
</table>
</section>
</body></html>
This puts yellow behind the car
manufacturer column and orange behind the car model column. Note that the <colgroup> construct of the child <col> tag definition is after the <caption> tag, and before any <tr>, <thead>, <tfoot>, or <tbody> tags.
Summary
In this chapter, you learned about table tag support in HTML5 and earlier HTML versions, including the <table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>, <caption>, <colgroup>, and <col> tags. The next chapter looks at the HTML5 tags that support the publishing of form-based content within HTML5 documents and applications.