CODEWITHSUNDEEP
htmlcsslayouthtml-table
Pershing
Pershing

Reputation: 428

What is a working definition of "layout" as it pertains to HTML?

I've been tasked with explaining to a few colleagues why you shouldn't always use <table> elements for positioning things in HTML. There are a lot of places on the internet where it says you shouldn't use <table> elements for layout but none actually provide a definition for what "layout" is. So, it's easy to tell someone "don't use tables for layout" but if we don't actually provide a working definition of "layout" that cannot functionally include <table> elements, then what's stopping that person from coming up with their own definition?

Here's one definition of "layout" from geeksforgeeks.org (https://www.geeksforgeeks.org/html-layout/):

Page layout is the part of graphic design that deals with the arrangement of visual elements on a page.

The problem with this definition is that <table> elements can indeed be used to arrange visual elements on a page, so it is confusing to beginners when they're told they shouldn't use <table> elements--the definition itself doesn't seem to exclude them, so why not?

Here's another assertion from w3schools.com that you shouldn't use <table> elements for layout, but it fails to define "layout" (https://www.w3schools.com/html/html_layout.asp):

The <table> element was not designed to be a layout tool! The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout!

Once again, what is "layout" to a beginner? Technically, everything on the page could be considered layout, even the tabular data parts, since tabular data can also be presented using <div> elements. Therefore, saying "don't use tables for layout" means nothing and isn't helpful, because layout is everything on the page (even tabular data is layout; it's data displayed in a tabular layout).

In closing, I'm curious if there is a definition of "layout" that cannot be interpreted as being anything on a web page. If there is no definition, perhaps we can formulate one here.

Upvotes: 0

Views: 113

Answers (2)

user8356
user8356

Reputation: 180

There is no reason to define layout to exclude tables so that tables aren't used for layout. Those aren't the same thing.

Like it or not, layout is the placing of elements on a page or screen. The term comes from when pieces of type, photos, rules (lines), and other elements were pasted into position on a layout sheet that was printed with grid lines. You literally laid out the page.

The reason to avoid tables is because there are better ways in HTML to arrange elements, namely, cascading style sheets, which include grid and flexbox.

Long ago, wax replaced rubber cement for laying out newspaper and magazine pages. Wax was was a lot less messy, easier to apply, and didn't require thinner that made people high and gave them headaches. Using CSS is exactly the same. Tables are messy and give you headaches. They lock the content into a rigid layout that can't adapt to changing screen sizes.

One of the primary rules of web design is don't hard-code the styling into the HTML content -- CSS separates style from content, and that's why it's the right thing to use.

Upvotes: 1

Pershing
Pershing

Reputation: 428

I propose a definition of "layout" that cannot functionally include <table> elements:

"Layout" as it pertains to a web page is any visual element whose horizontal children can become vertical upon screen resizing, and vice versa (think responsive elements, i.e. Bootstrap).

<table> elements will never fit this definition, because table rows can never become horizontal, and table cells (of a given row) can never become vertical.

Upvotes: 0

Related Questions