Should I Use Tables in HTML?

HTML tables have been heavily used ever since web pages started to pop up in the early days of the Internet. However, in recent years, there have been other alternatives you can use instead, and there are people who now say that tables in HTML is bad practice.

So the question is;

Should I Use Tables in HTML? You can still use tables in HTML. The key benefit for using tables is that you can create a beautiful layout fast and straightforward. However, HTML tables are not useful for responsive design. So if you want your web application to look good on multiple devices, you should not use tables.

Previously, quite a lot of web designers/developers made use of HTML tables to structure a web page as that was the only flexible way to achieve their design aim.

The reason why HTML tables have been so popular is that all the cells/data in a row or a column stretches altogether as you further expand the row or column.

While HTML tables have been very useful for the old time’s web developer and designers, the advent of CSS is somewhat making the need to use tables in HTML redundant.

In this article, you will get to know everything as regards to using tables in HTML; whether it is still relevant for this-time development or an outcast you should ignore.

Also, you will see a better alternative to present your data instead of struggling with HTML table elements/syntaxes. Well, there are shortcuts to creating HTML tables, you know? Read on to see.

What exactly is a table in HTML?

What else could a table be if not a set of defined columns and rows containing relevant data inside? However, in HTML, tables are presented using a specific element <table></table>, including this element in an HTML code will tell the system that you’re making a table. Also, HTML tables require several other element tags such as one or more <tr>, <th>, <tbody>, and <td>.

<tr> stands for table rows: this is what you use to define the number of rows your table should have

<td> stands for table data

<th> or <thead> stands for table header

<tf> or <tfoot> stands for table footer

<tbody> stands for table body

A table in HTML is used to elaborate more about certain information or used for layout design in rare cases. Tables help to present information in a more explainable pattern so that anyone who can access the information gets the exact interpretation.

It is very important in HTML except for making layout designs which are now preferred to be done using other simpler methods like CSS.

Below are some examples of HTML tables; the outcome and source code;

HTML	Tables
inline	content

The table above was designed with the source code below.

<table>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Tables</td>
    </tr>
    <tr>
      <td>inline</td>
      <td>content</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

This is just a simple HTML table. Now, take a look at a more complex HTML example; take note of the elements – <tr>, <td>, etc.

Web development	Frontend	CMS
Backend	codes
Designing	HTML	CSS	JAVA

The source code for this table is presented below;

<table>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2" width="319">Web development</td>
      <td width="160">Frontend</td>
      <td width="160">CMS</td>
    </tr>
    <tr>
      <td width="160">Backend</td>
      <td width="160">codes</td>
    </tr>
    <tr>
      <td width="160">Designing</td>
      <td width="160">HTML</td>
      <td width="160">CSS</td>
      <td width="160">JAVA</td>
    </tr>
  </tbody>
</table>

If you noticed, there are new elements introduced on the second HTML table; the elements are the “colspan” and “rowspan”. They are the elements we use to span columns or rows on HTML.

You can virtually create any kind of table using HTML codes, only what you need is to know the various elements to use and implement the table style.

The shortcut to creating HTML tables?

This will work if you have access to WordPress Editor (text/visual) or any other flexible editor. You could use the pre-defined table templates on Microsoft word to create any kind of complex table you want. It is easier to create complex tables with Microsoft word, then, copy it to WP editor and toggle to the text editor mode. The screenshots below will explain it better.

Create the table on Microsoft Word using a template or draw it manually

Copy the table from MS Word and paste to a WordPress editor

Now, switch to the “text” module to get the HTML code of the above table

This shortcut will help newbie developers who are not experienced with the various HTML table elements. However, you must have access to a WP editor for this technique to work.

Why is it considered bad to use Tables in HTML?

This does not apply to general HTML tables, instead, it is only applicable to designing layouts. Using tables for layout in HTML is not a good practice.

Here are a few points to back up this claim;

• Typically, tables are bulky: they have more bytes of markup which also involves traffic bytes for the host
• They are inaccessible: naturally, screen readers interpret web pages as displayed in the HTML backend code; on the other hand, screen readers find it a bit difficult to analyze table layouts in HTML. As suspected, this is due to the tons of elements which must be used for creating such tables plus extra nested tables. It is very hard for screen readers to parse table layout designs in HTML.
• Difficult to redesign: when using tables, you may have to split one image into multiple images. When this is done, it makes redesign a troublesome task for another developer/designer. Also, it increases web page load time in form of more HTTP requests.
• Tables are tricky: maintaining a website designed using tables for layout is quite difficult. Unless it’s just a single, simple web page, you’ll find it extremely difficult to deal with pages structured using tables.

How are tables tricky?

While designing the tables, it appears very easy. But, once you’re done, then, you’ll discover you’ve just designed something that will stress the hell out of you to maintain. Remembering how you nested tables, added many cells into certain rows, etc. all these will weaken you each time you go back to the design for maintenance.

• CSS designs load faster on the frontend: apparently, there is just one way to achieve a unique layout design using tables in HTML which is by nesting the tables; that is, inserting tables into another. Now, the more nested tables that is in your design, the longer time it will require for the page to load on a server.

When compared with CSS, you find out that you’ll use a few elements to design complex tables which would load faster than the same similar design done with tables in HTML.

• Tables in HTML are not SEO friendly: When using tables, naturally, the first content to load is the one placed on the left navigation sidebar. Therefore search engines bots do not see such pages as importan. Meanwhile, with CSS, you can place the important contents first in your HTML design.

In summary, HTML tables do not guarantee a responsive design, plus, they are heavy to load. It is very bad to use Tables in HTML because the repercussions are quite unbearable for designer/developers. Just go and use the alternatives, do not waste your precious time with tables.

Alternatives to using tables in HTML

Since it is bad for one to use tables in HTML, what are the alternatives to this? Yeah, there are quite a bunch of alternatives for you to use instead of HTML tables for layout designing/structuring. These alternatives are even simpler, less-bulky, and load fast on the front-end when executed on a browser.

Use divs

In this era when responsive designs are the trend, divs are better off to use in place of HTML table elements for structuring layouts. For a layout like the one below; using Divs is the best way to achieve it flawlessly.

Here is the div code;

<body>
  <div style="border: 1px solid; float: right; width: 25%; height: 1000px;" id="1">one</div>
  <div style="border: 1px solid; height: 250px; width: 74%;" id="1">two</div>
  <div style="border: 1px solid; width: 35%; float: right; height: 750px;" id="1">three</div>
  <div style="border: 1px solid; width: 35%; height: 750px;" id="1">four</div>
</body>

It is easier and shorter with Divs than <table>.

This is one of the best alternatives for web designers.

CSS Grid

CSS grid layout shortened as CSS grid is a web development technique used by developers to structure even complex responsive web design layouts much faster than other techniques. Unlike the Div method, this technique offers an excellent and unique grid-based layout, with rows and columns, without the developer using floats and positioning.

Flexbox

This is yet another Cascading Styles Sheet technique for styling layout. It is as well one of the best alternatives to tables in HTML.

Are there some cases where using tables is a good choice?

Sure, you need tables to present certain data in HTML. Tables are only not good for layout designs, asides layout structuring the use of tables in HTML totally acceptable.

Conclusion

You can still use tables in your HTML but not for layout designs. You’ve just read the side-effects of using tables for layouts; instead of tables, CSS Grid is the best, or, you could even use Divs.