Review of HTML table tags

The table element is used to represent multiple dimensions data. How to organize and present tabular data in a web page or application is interesting and challenging.

HTML table structure

The table element is made from these 5 parts:

  • Table caption - <caption>
  • Row group - <thead>, <tbody>, <tfoot>
  • Column group - <colgroup>, <col>
  • Table rows - <tr>
  • Table cells - <td>, <th>

The Hierarchy of table element and its children
Hierarchy of HTML table elements
* Flow contents include these elements: a, p, hr, pre, ul, ol, dl, div, h1, h2, h3, h4, h5, h6, hgroup, address, blockquote, ins, del, object, map, noscript, section, nav, article, aside, header, footer, video, audio, figure, table, form, fieldset, menu, canvas, details em, strong, small, mark, abbr, dfn, i, b, s, u, code, var, samp, kbd, sup, sub, q, cite, span, bdo, bdi, br, wbr, ins, del, img, embed, object, iframe, map, area, script, ruby, video, audio, input, textarea, select, button, label, output, datalist, keygen, progress, command, time, meter

HTML table structure

The sequence of table's child elements is:
caption => thead => tbody => tfoot
or
caption => thead => tfoot => tbody

Caption, thead, tbody and tfoot, colgroup and col tags are all optional. A table with data can be created with only 3 tags: table, tr and td tags.

Usage of HTML table tag

HTML table tag is supposed to be used for tabular data. But the argument is never end on whether it is a good practice to use it for layout purpose, for example, using table tag to create a 3-column layout.

Differences between HTML5 and HTML

  HTML HTML 5
table align
bgcolor
border
cellpadding
cellspacing
frame
rules
summary
width
border
caption align  
tbody align
char
charoff
valign
 
td abbr
align
axis
bgcolor
char
charoff
colspan
headers
nowrap
rowspan
scope
valign
width
colspan
rowspan
headers
tfoot align
char
charoff
valign
 
thead align
char
charoff
valign
 
th abbr
align
axis
bgcolor
char
charoff
colspan
headers
nowrap
rowspan
scope
valign
width
 
tr align
bgcolor
char
charoff
valign
 
colgroup align
char
charoff
span
valign
width
span
col align
char
charoff
span
valign
width
span

Most ignored table tags - <col> and <colgroup>

The col element is table column. The colgroup element is a group of table column. Table rows only have at most 3 groups: thead, tbody and tfoot, while table columns may have as many groups as the number of columns.

Tags: