Table vs Tableless
To table or not to table? That's the question.
Whether or not to use tables on a web page depends on your purpose in representing certain data.
It was once the tag <table>
As mentioned in other responses, there was a time when most layouts of websites were done using tables.
For example, most commonly used IDE's, such as Dreamweaver, have a wizard to create site layouts. See the example below:
Soitwascommontostartasitethinkingabouthowmanyrowsorcolumnsitwouldbedividedsowewouldfitalltheelementstogether.Thegreatadvantageofdoinglayoutslikethisisthatitislogicalandintuitive.
However,therearemanylimitationsinlayoutswithtables.
- Headachewhenanelementneedstooverlapthelayout,suchasasubmenuinalist.
- Tailorthelayouttomobiledevices.
- Delayedrendering,becausethebrowserneedstoreadthetableallthewaythroughtoshowitcorrectly.
- Messycode,usuallywithtablesinsidetableswithintableswithintables...
Andsoon...
Thendivsandspans
Toremedytheselimitations,manywebdesignershavebeguntoimplementlayoutswithgenericdivandspanblockstogetherwithCSSstylemanipulationtechniquestogeneratemoreflexibleandresponsivelayouts.
WiththeadventofHTML5,newtagshavebeenaddedtomakecodingeveneasierbyaddingsemanticstocertainpageelements.Someare:header,footer,sectionandaside.Theyareexemplifiedintheexamplebelow.
Unlikeanormaltable,whereeachcellmustobeythetablepositioningpatterns,theblocksaremoreindependent.Eachblockcanbepositionedindependentlybutrelativetotheotherblocks.
Seetheexamplebelow:
This seems the same thing as a table, but it does away with the limitations mentioned above.
In the HTML code, the layout might look something like this:
<body>
<header>
Meu cabeçalho
</header>
<aside class="esquerda">
Menu à esquerda
</aside>
<aside class="direita">
Menu à direita
</aside>
<section id="content">
Conteúdo da página.
</section>
<footer>
Meu rodapé
</footer>
</body>
So the advantages:
- More freedom when positioning elements, as it is not necessary to follow exactly the grid of a table.
- In small screens, for example in cell phones, elements can be arranged in a completely different positions from a large screen using CSS medium queries .
- The browser is able to require each tag as soon as it receives browser content, so if your page is made up of too much data it will be displayed gradually and not all at once after a long initial delay.
- You can split the code into different sections and not everything is inside a single table. Using dynamic languages like PHP, JSP, ASP, this allows you to split the code into several files more efficiently and avoid breaking the layout if any larger than expected content is written to the page.
Of course, not everything is flowers. In the beginning, creating a 100% tableless layout was a big headache. The most complicated thing was to create code that would work the same in all browsers.
However, with CSS standardization advancing, evolving browsers, and consolidating HTML and CSS encoding standards, today it is much easier to do this if you do not want to reinvent the wheel.
Thousands and thousands of websites provide examples of how to do this, and there are libraries like Foundation and Bootstrap that allow you to reuse ready-made styles to create your site.
Whether or not to use tables
If you have data that is really tabular, as in the case of representing data from a database, where it is important that columns always have to be aligned, then tables are the most ideal solution.
On the other hand, imagine a photo gallery. On a larger monitor you may want to display 4 photos per line, but by decreasing the table size, 3, 2 or even 1 photos can be displayed, for example in smartphones . Tables simply do not work here.
Do not stop here
One tip to better understand how this works is to go to the Bootstrap page and see how the Grid System works. On the same page, there is a table usage example .
Understanding how both systems work will make it easier to decide when to use both.
