Is it correct to use a table in the page layout?

Question

I made a data table for a colleague of mine here at work and used a table, only it had no header, it had only 2 columns. And he told me that the staff hates table, which was for me to read about Tableless, and I did it, but I can’t understand why it’s "ugly" or not suitable to use table.

Example of the table I made was something like this:

Nome:                            João
Banco:                      Santander
QualquerCoisa:                   XXXX
Saldo:                         345,00 <-- em negrito

In this case, my idea is that it is rather a table, but instead of the titles being on top they are on the left side.

-What I mean is, what would be the right thing to use in this case? It is wrong to make a table in this case since in the end it does not appear to be a table (with borders, titles and etc)?

Answer 1

Whoever told you in that case not to use a table should read about tableless because apparently you know nothing of the subject.

Tableless

Tableless web design (or tableless web layout) is a web design philosophy avoiding the use of HTML tables for control purposes layout page.

Instead of HTML tables, we use style sheets (CSS) to organize elements and text on a web page.

tableless applies to layout

Tableless emerged when via CSS it became possible to format a page efficiently without having to resort to tables to create the graphic aspect of it.

A few years ago, the layout as follows:

<center>
  <table border="0" width="500" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td align="left" width="500" valign="top">
          <table border="0" width="500" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td align="left" width="160" valign="top">Coluna esquerda</td>
                <td align="left" width="180" valign="top">Coluna centro</td>
                <td align="left" width="160" valign="top">Coluna direita</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</center>

Actually, this doesn’t make sense, because with much less Markup and little formatting via CSS we do the same:

#grid {
  width: 500px;
  margin: 0 auto;
}
#grid:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}
#grid > div {
  float: left;
}
#grid > div {
  width: 160px;
}
#grid .main {
  width: 180px;
}

<div id="grid">
  <div>Coluna Esquerda</div>
  <div class="main">Coluna Centro</div>
  <div>Coluna Direita</div>
</div>

^{And this is just one example, there are hundreds of solutions to organize a layout these days.}

Tableless != stop using tables

The term is not synonymous with "stop using tables", the HTML tag <table/> is still used and perfectly valid when we are presenting tabular data. There, it was created for this very purpose:

W3c - table

On the web, tables are a good way to organize data in a tabular format.

Just think about it and apply the same logic applied to layout page:

• We reduced the Markup favoring CSS properties to achieve the same layout low maintenance, more scalable and always with as little code as possible (tableless).

We will now present tabular data making use of immense elements, increasing our Markup, making it difficult to maintain the page and its data in the future, probably by using CSS to format things in the same way as a table, rather than simply using the tag <table/> ?

Of course not!

---

Summary

^{Yeah, I should be upstairs, but being here, you made them read :)}

If you are displaying tabular data, the HTML tag <table/> was created for that very reason. If you’re making a layout one-page, tableless is the way forward for the issues already highlighted.

Answer 2

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 goal when representing certain data.

Once upon a time the tag <table>

As has already been mentioned in other responses, there was a time when most layouts websites were made using tables.

For example, they were common in the most commonly used IDE’s, like Dreamweaver, to have a Wizard to create website layouts. See the example below:

So it was common to start a site thinking about how many rows or columns it would be divided so that we could fit all the elements together. The great advantage of doing layouts like this is that it is logical and intuitive.

However, there are many limitations in table layouts.

• Headache when an element needs to override the layout, such as a list submenu.
• Adapt the layout to mobile devices.
• Time-consuming rendering as the browser needs to read the table to the end to show it correctly.
• Messy code, usually with tables inside tables inside tables inside tables inside tables...

And so on and so on...

Then appeared divs and spans

To remedy these limitations, many webdesigners have started to implement layouts with generic blocks div and span combined with CSS style manipulation techniques to generate more flexible and responsive layouts.

With the advent of HTML5, new tags were added to make coding even easier by adding semantics to certain page elements. Some are: header, footer, section and aside. They are exemplified in the example below.

Unlike a normal table, where each cell must obey the patterns of table positioning the blocks are more independent. Each block can be positioned independently, but relative to the other blocks.

See the example below:

That looks like the same thing as a table, but ends with the limitations mentioned above.

In 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, because it is not necessary to follow exactly the grid of a table.
• On small screens, for example on mobile phones, the elements can be arranged a completely different positions of a large screen using media queries of the CSS.
• The browser can require each tag as soon as it receives the content from the browser, so if your page is composed of lots of data they will be displayed slowly and not all at once after a long initial delay.
• You can split the code into different sections and not all within a single table. Using dynamic languages such as PHP, JSP, ASP allows you to split the code into several files more efficiently and avoid breaking the layout if some content larger than expected is written on the page.

Of course, not everything is flowers. At first, create a layout 100% tableless was a big headache. The most complicated was creating a code that worked the same in all browsers.

However, with the advancement of CSS standardization, the evolution of the various browsers and the consolidation of HTML and CSS coding standards, today it is much easier to do this if you don’t want to reinvent the wheel.

Thousands and thousands of websites on the internet provide an example of how to do this and there are libraries like Foundation and Bootstrap that allow you to reuse styles already ready to create your site.

When to use tables or not

If you have data that is actually tabular, as in the case of representing data from a database, where it is important that columns need to always 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 when decreasing the table size, you can display 3, 2 or even 1 photos, for example on smartphones. Tables just don’t work here.

Don’t stop here

A tip to better understand how this works is to go to the Bootstrap page and see how it works Grid System. On the same page, there is a example of table usage.

Understanding how the two systems work will be easier to decide when to use one and the other.

Answer 3

Tableless is a term that emerged when CSS and HTML began to evolve and enable a much wider range of control for Frontend personnel.

To better understand, imagine that at that time there were not used Divs, spans and etc. The entire layout of the site was "cut out" and mounted inside tables. Many tables, one inside the other, that is, something very laborious and that still did not allow a good quality. Hence the resistance of many until today with the tables.

However, flexibility is very welcome. Tables have their use, as the name says, to tabulate data. It is not recommended to position elements and assemble the layout, which is against the concept of tableless, but for something like your example, it can be used perfectly that will not make your HTML amateur or low quality. An example are jQuery plugins like datatable https://www.datatables.net/ that modernize and streamline the use of tablets, the way it is to be, to tabulate data.

Answer 4

The tag Table was created to display a table with data tabular.

So using a table to control the layout of the elements on the page is bad practice. Because of that the concept of tableless was created, to use the tables correctly, only in the data tabular.

Tables should not be used as AIDS layout. Historically, some Web Authors have misused Tables in HTML as a way to control their page layout. This Usage is non-conforming, because tools attempting to Extract tabular data from such Documents would obtain very confusing Results. In particular, users of Accessibility tools like screen Readers are likely to find it very Difficult to navigate pages with Tables used for layout.

Translation:

Tables should not be used for layout purposes. Historically some web developers have used tables to control the layout of their pages. This use is a non-conformity, because tools that look for tabular data from HTML would come across very confusing data. In addition, people who use accessibility tools, such as screen readers, tend to have major problems navigating pages where the layout is done by tables.

Source: http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-table-element