Posts for 2023

With the birth of the Internet, there have been two HTML elements that have often been used to do the same job - namely, the table and div tag. In this blogpost, we will compare the two and their best use cases.

Tables are predominantly a grid-layout element that is best used to present data that can be presented in a spreadsheet. In fact, if you highlight a HTML table and copy it, you can then paste the table in a spreadsheet application.


Tables can have columns that span multiple rows, and rows that span multiple columns. In this manner, more complex data can be represented.

Learning curve

Tables are not a difficult concept to muster. They can, however, be heinously cumbersome to write, let alone maintain. The table tag does not function on its own; it at the very least requires tr and td elements. thead and tbody are largely optional.



Usage is simple enough even if one throws rowspan and colspan attributes into the mix. Enough repetition and a child could learn it. The real question is whether or not that child would want to.

The problem with too many tags is that if one closing or opening tag is left out, this leads to malformed HTML. And with the nature of tables, this happens all too easily.

Use cases

These days it's not even a contest, but there was a time when using tables for page layout was actually a thing. In some dark corners of the web, table-based layout, along with (gasp!) frames, can be found if one looks hard enough. These days, though, suggesting tables as a site layout would earn you some serious side-eye.

Tables were adequate for layout back when screen sizes did not vary so much. Fixed width-layouts could handily be created with table elements that had the border attribute set to 0. Still not ideal, and smacked of trying to fit a square peg in a round hole, but they worked in a pinch if you weren't planning to make frequent changes or do anything extremely fancy.


Times have changed, and table layouts for websites are almost completely a thing of the past. Yes, I said almost. Hey, some people enjoy suffering; there's no accounting for taste, is there?

No, tables have now been relegated to carrying out the task they were originally meant for - presenting grid data. And that's a task they perform like no other.

SEO

Now, web crawlers have no problem reading content from tables. However, since tables and content are intrinsically tied together and tabular data is read linearly, this presents a problem if the visual design of the site clashes with the SEO requirements.

For instance, say you have content that you want displayed at the top of a site. However, in terms of importance, some other information takes precedence and you want the web crawlers to read that first. That can't happen in a table element unless you replicate the information at the top of the table and then hide it visually (which is workable I guess, just a huge pain in the butt to maintain).


Also because tabular data is linear in nature, content readers for the visually impaired would totally mess it up if they were reading table-based web layout.

Divs have been the de facto standard for web layout for over a decade since the advent of CSS. The versatility of divs cannot be overstated, though it is possible (and alarmingly easy!) to overuse them.


Any web developer who has ever run into front-end maintenance problems due to multiple levels of nested div tags, will know exactly what I mean. This, of course, naturally leads to the question: Can tables be nested too? The answer is yes, and those seriously disturbed individuals who have attempted this will doubtless live to regret such depravity.

Learning curve

Divs are usually used as containers for HTML elements and content (including other divs) and then styled using CSS. This can lead to a whole ton of nested divs if a web developer is not careful. Again, as with tables, any missing open or closing tags leads to malformed HTML, thus it is important to keep them as simple as possible. Unlike tables, this is actually possible for divs, since the minimum viable HTML for one div is a single div tag.


The learning curve for divs by themselves isn't huge, though CSS is another matter entirely. There are tons of options that can drastically change the visuals of your site. In addition to learning about the CSS Box Model, a web developer also needs to understand the position property if fancier shenanigans are required.

Use cases

Web layout now predominantly uses divs for many reasons, chief of which is mobile layout. Div layouts are easily made to be scalable (due to CSS) and this a site can be easily fitted to whichever screen size is required, without needing to make a lot of changes.


Divs can also be used for tabular layout with a few interesting options depending on the library used, but this also tends to complicate matters; and in my opinion, does not significantly have less problems than simply using table tags for such use cases.

SEO

The ability to separate styling from content is one of the greatest boons of div tags and CSS. This solves many problems that table-based layouts are prone to.


For example, when using div tags for layout, it is possible to position important content in the HTML for web crawlers to pick up first, while visually repositioning the content elsewhere or even hiding it. Not only is it possible, CSS makes it almost ridiculously easy.

Conclusion

Tables and divs both have their place. Divs are ubiquitious. Tables fulfill a smaller, but still vital, place in the HTML ecosystem. It is important to use both for their respective best use cases.