Page 148 - HTML5

Chapter 38: Tables

Introduction

The HTML <table> element allows web authors to display tabular data (such as text, images,
links, other tables, etc.) in a two dimensional table with rows and columns of cells.

Syntax

• <table></table>
• <thead></thead>
• <tbody></tbody>
• <tfoot></tfoot>
• <tr></tr>
• <th></th>
• <td></td>

Remarks

The various table elements and their content attributes together define the table model. The
<table> element is the container element for table models/tabular data. Tables have rows,
columns, and cells given by their descendants. The rows and columns form a grid; a table's cells
must completely cover that grid without overlap. The list below describes the various elements
in the table model:

• <table> - The container element for table models/tabular data. <table> represents data with
more than one dimension in the form of a table.
• <caption> - Table caption or title (Like a figcaption to a figure)
• <col> - A column (a no-content element)
• <colgroup> - A grouping of columns
• <thead> - Table header (only one)
• <tbody> - Table body / content (multiple are okay)
• <tfoot> - Table footer (only one)
• <tr> - Table row
• <th> - Table header cell
• <td> - Table data cell

Semantically, tables are meant for holding tabular data. You can think of it as a way to display
and describe data that would make sense in a spreadsheet (columns and rows).
Using tables for layout is not recommended. Instead, use CSS rules for layout and formatting,
including display: table.
One notable exception typically displayed in the industry regarding using <table> layout is in
regards to HTML email: some email clients, including Outlook, rolled back to older rendering
engines after Microsoft lose their monopoly case vs. the EU. In order for Microsoft to make IE
not part of the OS, they simply rolled back Outlook's rendering engine to an earlier version of
Trident. This rollback simply doesn't support modern web technologies, so using <table> based
layouts for HTML email is the only way to ensure cross-browser/platform/client compatibility.

Examples

Simple Table

<table>
<tr>
<th>Heading 1/Column 1</th>
<th>Heading 2/Column 2</th>
</tr>

https://riptutorial.com/ 132