From the course: CSS Layouts: From Float to Flexbox and Grid

Layouts with HTML - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Layouts with HTML

- [Female Instructor] In the early days of the Web, it was common to use HTML tables for page layouts because of its ability to create columns and rows. As CSS matured, it became standard practice to separate content from style. And eventually, it became a recommendation not to use tables for layouts. HDML tables were originally intended for tabular data, and can still be used for this purpose. Let's look at a basic table layout on codepen. Before we jump in the code, I just want to make a change to the editor setting in codepen. I'm going to select this change view button and dock my code panels to the left. I'll also minimize the JS panel as well, since we won't be writing any JavaScript. Then I'll just resize this panel as well. Okay, let's look at this table. This is an example of displaying content as tabular data. It could be a list of names, or maybe addresses. Basically, data that you would display similar to a spreadsheet layout. Each of the TR tags are used to create the table rows, and in each row, the TH tags are used for table headings, and the TD tags are used for table data. There used to be quite a few attributes for adding styles that are now deprecated, and no longer supported. But as you can see, CSS can be applied to these table elements just like any other element. Traditionally, the colspan and rowspan attributes were added to make the table cells span across columns and rows. If I wanted to make this TD tag span across both rows to create a sidebar look, I would add rowspan to the first TD. And I'll set that value to two, so it can span across both rows. Then I would have to remove this table data in the second row, because the one we added the rowspan to is now taking up both spots. This was great for building layouts, but using too many rowspans and colspan attributes, as well as nested tables introduced accessibility issues. Screen readers may have issues navigating from one area to another in logical order. Back in the day, tables versus CSS was a big debate. But these days, the only time you'll see tables used extensively is with HTML emails. Different email applications have a variety of rendering engines. So emails have to be built for the lowest common denominator. Which means older techniques, such as tables, and inline CSS must be used. If you find yourself in a situation where you have to use tables, for more than just displaying some data, here is an extensive guide on CSS tricks. And here is another article specific to HTML emails.

Contents