Death of a hero
The html <table> tag (1997-2020)
<table> tag has all but vanished in modern web development. This page is a dedication to the first hero of organizing elements, ahead of its time, long may it live.Humble beginnings
The table tag was introduced as a concept in 1993, according to A brief history of tables (http://www.barrypearson.co.uk/articles/layout_tables/history.htm), which contains an enormous amount of information on the history of the table tag and is definitely worth a read. Tables are conceived as a concept within HTML years before even CSS, not to mention Javascript. It's worth noting just how important tables were to the modern website until the advent of flexbox and CSS grid-- below is a comparison of search popularity to demonstrate the importance of the "table" compared the the general "div" tag and relatively new "flex" concept:The introduction
In December 1996, CSS1 was introduced with no formal styling for tables :(
In January 1997, with HTML 3.2 the table tag officially became a part of web programming. It was widely used among web designers throughout the early 2000s, and can be seen used on the following archived page: http://www.yahoo.com/ - February 1998
The mobile nightmare
The real issue with heavy reliance on table elements came from their inability to allow for readable content for desktop and mobile websites. Consider the below tables:
| This table is 1000px wide :) | It's so nice and spacious... | It's not like every word is on it's own line or something stupid like that... |
| This table is 320px wide :) | This is the width of a mobile device | This is a perfect metaphor for asking web developers in the early 2010s to develop for mobile... |
The Bootstrap Diagnosis
So, with the rise of cell-phones and more and more websites being accessed on mobile screens, web developers turned to responsive libraries which utilized the powerful, abstract <div> tag. Utilizing bootstraps extensive grid-based responsive layout, smarty-pants web developers no longer had to make two versions of their sites, one with elements organized for mobile screens and one for desktop-- instead using Bootstrap the site would re-organize the elements depending on the screen to improve readability automatically. Thus the table element began to dissapear from most widely used websites.
The sun sets.
The CSS flexbox was introduced in 2013 (ish) into an internet of questionable support for pioneering front-end web technologies in popular browsers. Flexbox is essentially native in HTML5/CSS3 in 2020. Through using 'display: flex' in CSS on an HTML div tag-- web developers can now get the same responsive layout that bootstrap provided, but without having to important opinionated libraries. There is also CSS Grid but I don't use that lol.
With essentially complete support of an easy-to-use, native, responsivem, box-based layout, it's hard to justify using <table> in a modern website for a web developer. So in the 2020s we have to say goodbye and thank you, and new developers won't share the joy of the <tr> tag, those of us who experienced the special hell of the table layout will never forget.
Out of respect for the fallen this page was constructed from one large table element. As it fades in the conscious memory of the living internet we won't forget all the table tag gave the world.
This site was made in one hour. Sorry.