Tables: Beyond Rows and Columns - TPGi - a Vispero company

"There are many semantic HTML tags covered under WCAG SC 1.3.1: Info and Relationships, but in this article, we'll zoom in on one of the most misunderstood, the table. You might be thinking: "Do we really need tables when we already have semantic tags like lists?" It's a valid question. Lists (<ul>, <ol>, <dl>) are fantastic for presenting structured information, but when data grows beyond a simple one-to-one relationship, tables step in as the powerhouse."

"<table> &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Full Name&lt;/th&gt; &lt;th&gt;Date of Birth&lt;/th&gt; &lt;th&gt;Gender&lt;/th&gt; &lt;th&gt;Country&lt;/th&gt; &lt;th&gt;Company&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Tom Henry&lt;/td&gt; &lt;td&gt;01-Jan-1999&lt;/td&gt; &lt;td&gt;Male&lt;/td&gt; &lt;td&gt;Australia&lt;/td&gt; &lt;td&gt;Google&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Stifen Watson&lt;/td&gt; &lt;td&gt;02-Jan-2000&lt;/td&gt; &lt;td&gt;Male&lt;/td&gt; &lt;td&gt;U.S.&lt;/td&gt; &lt;td&gt;TPGi&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; This will look like:"

WCAG SC 1.3.1 covers semantic HTML tags and relationships, and tables are a key semantic element. Lists (<ul>, <ol>, <dl>) work well for simple one-to-one relationships and single-entity details. A description list presents a single person’s details clearly but becomes unwieldy for multiple records. Tables organize multi-row, multi-column datasets into rows and columns, making it easier for all users, including screen reader users, to locate specific information. Proper table structure uses thead, tbody, tr, th, and td elements to convey headers and cell relationships for improved accessibility.

Read at TPGi - a Vispero company