HTML5 – HTML5 Tables: Constructing Data in a Tabular Format

How to Install Docker on macOS” href=”https://devtutorial.io/how-to-install-docker-on-macos.html” target=”_blank”>How to Install Docker on macOS

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 header
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.

Blog