The Basics

An HTML table consists of 3 parts. The table element, which is the root; tr, which represents a table row, and tc, or table column. An easy way to remember this is table stands for “table”, tr stands for “table row”, and tc stands for “table column”

If you’ve used a DIV based css grid (DBCG) before, you might be familiar with this. The Table API was probably modeled after this so that developers would be instantly familiar with the new API.

So what’s the difference? In DBCG’s, tables, rows and columns are all represented using the div element (hence the name). This is a big no-no. As it completely destroys the informational hierarchy of your content. People who do this are called Anti-Semantics.

With tables, the divs are replaced by their properly semantic cousins. And the C.S.S is built right into the browser. Theres nothing more for you to do.