2.1 A Quick Overview of Tables
Back in the day, web pages were built with tables. Rows and cells formed the cornerstone of any layout.
Nowadays, we have so many different and much simpler ways of creating layouts, and we can use tables for their true purpose: displaying data. Let’s explore this in more detail.
2.1 A Quick Overview of Tables
Back in the day, web pages were built using tables. Those were the cornerstone of any layout. We used tables not only to display data but also to create layouts. Nowadays, we have so many different and much simpler ways of creating layouts. Floats, flexbox, grid, multicolumn, we don't need tables for this anymore. But that doesn't mean they're obsolete. When it comes to displaying data in columns and rows, tables are still the most appropriate solution both structurally and semantically. Take a look at this table. Is it possible to created by not using the table tag? Of course, would the code be more elegant? Could be, sure. Should we do it? Should we use a different mark up to create a table? Well, not really, and here's why. Number one, tables are displayed pretty much the same in all browsers, even the older ones. So, messing around with a different markup will probably not give you the best browser compatibility. Number two, screen readers will read tables properly and users will be able to navigate them correctly. A different mark up will not be interpreted as a table by a screen reader and that will lead to all sorts of accessibility issues. Number three, when you print a table that was built correctly, you get a table. If you're just mimicking the layout of a table using other techniques, that will not print correctly, unless of course you are changing the print styles. But that's over complicating things. So, tables are still irrelevant in the modern day and age because they can still do their job better than any other element in a web page and that is to display tabular data. This is what they were made for. The fact that we use them for layout is another matter. And before you dismiss tables even further, consider this. Tables are used in the majority of the emails you receive today. And you might think that, it's 2019 and all the emails are built with modern CSS and they all have Flexbox, no, no. Emails are built with tables because the table mark up is recognized by pretty much all email clients out there. So, where should you use tables? Well, it's simple. I use them for tabular data. So anything that can belong in a spreadsheet should be rendered on a web page using tables. Think pricing plans, calendars, conference, schedules, lists of nutritional facts, maybe a list of employees, a list of customer orders, all right? So anything that has basically two axes of information should go in a table. Now, you should not use tables for layouts. Emails are a different story, we're not talking about those right now, we're talking about web pages. And for web pages, there are dedicated layout methods, and I mentioned a couple earlier. We have flexbox, grid, multicolumn, even floats can be used to create layouts but not tables. Tables were meant from the start to display tabular data, and that is the only thing that they should be used for. With that said, there are situations when you will display certain elements like a table. So you're not actually using a table element, but you're displaying them via CSS. You are setting the properties of a table to those elements, there is a different. It's not something that you should do very often, but in some cases, it's actually very, very helpful. We have a couple of table display values we can use. We're not just limited to display: table and table-cell. We have table-row, table-column, table-column-group, table-footer-group, and table-header-group. And you can see in the comments on the right side to which our table element does correspond to. So go ahead and play around with these, they're definitely worth checking out. Sometimes, they can offer very simple solutions to problems that would otherwise require more advanced techniques, like flexbox, or grid. Now, that was a quick overview of tables. Let's move on and talk about response of tables. That's coming up in the next lesson.