HTML Element: table

HTML Element: table

<table> is an HTML element that displays data in tabular format. HTML tables use rows and columns to make data and relationships easy to interpret.

You might use a <table> element to display a timetable, or a product’s pricing structure. Tables display related content in a way that is accessible and easy to understand at a quick glance.

Example

The HTML <table> element works with some required and some optional nested elements.

Syntax

1	<table>
2	<thead>
3	<th>First name</th>
4	<th>Last name</th>
5	<th>Occupation</th>
6	</thead>
7	<tbody>
8	<tr>
9	<td>John</td>
10	<td>Doe</td>
11	<td>Scientist</td>
12	</tr>
13	<tr>
14	<td>Jane</td>
15	<td>Doe</td>
16	<td>Web Developer</td>
17	</tr>
18	</tbody>
19	</table>

Result

Browser support

The <table> tag is supported in all modern browsers as well as many email clients. Read more on caniuse.com.

Attributes

The <table> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

Content

Within tables you can use a variety of additional HTML elements.

• Table captions: <caption>
• Row groups: <thead>, <tfoot>, and <tbody>
• Column groups: <colgroup> and <col>
• Table rows: <tr>
• Table cells: <th> and <td>

Add <caption> for Better Accessibility

To increase accessibility, try adding a <caption> element immediately after the opening <table> tag, giving a clear description of the table’s purpose.

The example above uses the CSS caption-side property to position the caption. This can either be top or bottom.

The <caption> will help someone understand what content is being presented and if they should spend time digesting it. Additionally, the <caption> element provides cues to assistive technologies like screen readers.

Styling HTML Tables

Tables are rigid but can be styled to meet most needs. CSS properties that might be useful in styling a <table> element include width, border, border-style, border-color, border-width, border-collapse, border-spacing, margin, padding, text-align, and vertical-align.

Mobile Device Considerations

• Do not use tables unless the device or devices are known to support them (1)
• Do not use nested tables (2)
• Do not use tables for layout (3)
• Use alternatives to tabular presentation (4)

Learn More

Did you know? <table> was a relative latecomer to HTML, only being introduced to the spec in January 1997.

After their introduction to the HTML spec, tables were soon being used to create layouts for web pages. This was a logical development as they allow for columns and nested content. 

Graphics packages such as Adobe Photoshop jumped onboard, developing the slice tool, which allowed designs to be “sliced” up and exported in pieces, ready to be reassembled in table cells.

Whilst all this was incorrect use of the <table> element, there were no layout alternatives at the time. Nowadays, table-based layouts on the web aren’t needed since CSS provides better solutions.

• Official W3C specification <table>
• Tableless web design

• 

  HTML & CSS for Beginners (MEGA Free Course!)

  

  Adi Purdila

  08 Sep 2022