Tableless
Tables exist in HTML for a single reason: To display tabular data. But then with the border="0"
It became possible for designers to have a grid on which to place images and text. thus designing visually rich websites, the use of tables is actually a way to interfere with the development of a better, more accessible, flexible and functional Web. Let’s see what the problems are:
Beginning
At first, the Internet was essentially a means for academics, researchers, and the military to share information. However, it didn’t take long for business visionaries to realize that this new medium of communication was ideal for selling everything from fresh produce to hot dogs.
However, like anything else in his childhood, the Internet at first was aesthetically 'raw' (and was not appealing to consumers) until David Siegel published his reference book, which offered some brilliant solutions to the limitations of existing browsers and W3C specifications.
Problems with Tables
- Mixing presentation data with content.
- This makes your pages size unnecessarily large, so users need to download this presentation data every time they visit the page.
- Band is not infinite, by the way, it is very scarce.
- This makes redesigning existing sites and adding content an extremely difficult job (and expensive).
- This also makes it extremely difficult (and expensive) to maintain the complete visual consistency of all pages of a website.
- Table-based pages are also much less accessible using smartphones.
Best practice
Modern web-browsers follow web standards and we don’t need to use these archaic methods anymore for building pages.
Instead of tables inside tables, causing a huge problem to deal with later, we can use CSS to set positions and are faster to load, easier to redesign, and more accessible to all.
Utilize table
only where you are sure it is a table
Where to use then?
We should date use the table tag. Think of it as an excel, normally data represented in excel, are tabular data, follow an example:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:100%">
<caption>Economia mensal</caption>
<tr>
<th>Mês</th>
<th>Economizado</th>
</tr>
<tr>
<td>Janeiro</td>
<td>R$ 100</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>R$ 50</td>
</tr>
</table>
I think it’s not wrong but the idea is to structure with div’s.
– Jorge B.
It’s not that "it’s wrong", but "not recommended". Focusing everything on CSS makes it much easier to maintain the code, as well as readability.Not to mention that divs are more flexible than the tds of the table.
– user28595
Regardless of what you asked, this table is unbalanced, it has more columns in the second row. It lacked a
colspan
in one of the first-line cells.– bfavaretto
@bfavaretto yes, it was an example only...the question itself is the structuring of a form, css or attributes should be used either in table or in div
– Rod
Wrong is a very strong word. Because of the recommendation
tableless
I’ll say it’s inappropriate– Wallace Maxters