In my other question cell spacing in div table everyone said tables are better then div tables and one mentioned there is no benefit div tables have over html tables. I'm confused, why was display: table introduce and whats the point of it if its terrible?
A display table behaves a certain way with regards to cell spacing and stretching. This behavior is difficult to reproduce using other means. An HTML <table> element should only be used for tabular data though (think Excel spreadsheets). So one is the display behavior, the other is the semantic (meaningful) markup. You may want to use one without the other, that's why they're two different things.
If you have tabular data, mark it up using <table> and get the table display behavior for free. If you have something which really isn't tabular data but you want to display it with the behavior of a table, slap a CSS table display behavior on it.
Regardless of any other consideration about whether it's better to use tables or divs in any given situation, the reason display:table exists (and related display:table-row and display:table-cell) is because CSS is supposed to be able to render any arbitrary HTML (or even XML) into the desired layout, without needing any styling effects to be hard-coded into the browser.
The standard <table>, <tr>, <td>, etc elements have a significant amount of default styling applied; and behave quite differently from other elements in a number of ways. display:table replicates those different behaviours.
Modern browsers can therefore simply use display:table as the default style for the table element, rather than having to have hard-coded table-specific rendering built into the engine, as was the case with older browsers.
The choice of whether or not to use one or another is based more around the use of tables for data rather than for layout. A good rule of thumb is to use a table when you're actually trying to use a "table" of data.
The bottom line is that HTML markup (<table>) should describe what content is, while CSS (display:table) describes what the content should look like. They are not the same.
You can use it on non-table elements, but display:table is the only proper choice when you want to set an actual table's display property.
Here's an easily understandable example:
<div class="my-tables">
<table>...</table>
<table>...</table>
<table>...</table>
</div>
.my-tables table {
display:none; /* hide all the tables */
}
How do you show one of the tables, say the first one?
.my-tables table:first-child {
/* display:block; not quite... */
display:table; /* There it is! */
}
Tables are the right tool for marking up tabular content. Tables just for layout is a misuse of the tag otherwise. Using <p> or <fieldset> for layout would be equally wrong.
Related
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.
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.
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.
I am coding for the homepage of a website. Shall I use tables or div for partitioning the homepage into sub-sections.
Can anyone clear my doubt that if partitioning is done with tables, it might not work well in mobile or tab devices??
I recommend you to use bootstrap for this. You will spend maximum 2 days to learn it. Here is link
And using div is better, than tables. You should use it with well formed css, and you page's will be really nice.
Tables
Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website’s functionality.
Semantically speaking, the table tag is meant for listing tabular data. It is not optimized to build structure.
Ease of use
Using tables to build structure is quite intuitive. We see tabular data every day, and the concept is well known.
Also, tables don’t break when the content is too wide. Columns are not squeezed under other columns as they are in a div-based structure. This adds to the feeling that using tables is safe.
Maintainability
Table contains different tags: the table tag being the wrapper, tr for each row and td for each cell. The thead and tbody tags are not used for structural purposes because they add semantic meaning to the content. For readability, each tag is normally given its own line of code, with indention. With all of these tags for the table, several extra lines of code are added to content. The colspan and rowspan attributes make the code even more complex, and any developer maintaining that page in future has to go through a lot of code to understand its structure.
Divs
The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages. The div tag is also used to describe content that cannot be properly described by other more semantic tags.
Ease of Use
The div element isn’t visual like the table element. Everyone knows what a table looks like, but divs are not as obvious. The good thing about a div, though, is that it’s only one element. It’s not wrapped in a parent element the way td tags are in tables. The container, then, is more flexible and doesn’t have the limitations of its parent tag.
Using a div for structure can make a page more fragile when content is pushing the div to its limit. It can also force columns to fall under each other. But this is usually only true for older browsers (particularly IE6); newer browsers make content flow to the next column.
Maintainability
The biggest problem with div tags is that they are used too often. Divs should only be used to build structure and as placeholders for design elements when no other block-level elements can describe the content. The div tag is for logical groupings of elements.
Nesting div should be used with descriptive class and structure names makes the code more understandable.
Divs should be used when semantic block-level tags would better describe the content; for instance, headings should be wrapped in h1 to h5 tags. Writing semantic code usually reduces the code base; and less divs with floats helps keep browser bugs away.
Flexibility with Media
Div-based structure is more flexible in supporting different media than a table-based structure. Not having to maintain separate pages for each media saves maintenance and development costs. A div-based structure allows you to move columns around and even hide columns using display: none in the style sheet.
Use <div> instead of tables. Different browsers have different approach for plotting <table>s in web pages, but for <div>, there is a common standard. I strongly suggest you to stick with <div>s.
In addition to that, the two top reasons for using Divs instead of Tables are
Divs fill whatever horizontal space is available and
they require less code. Less code equals smaller files which equals faster load times.
The ability of a Div to fill the space is just a nice feature to have - especially when working with fluid layouts.
You may refer to these articles:
Which is better, div or table?
Why I think divs are better than tables
What is the purpose of the CSS display property's values such as:
table-cell
table
table-caption
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
I understand these styles will style the element like a table, but what is the purpose of this when there is already an acceptable, working, table element?
Modern browsers use CSS to style all their markup.
How would they render a <table> element if CSS had nothing that could express the appearance of one?
(That, and you might have non-tabular data that you want to render like a table, there are enough people using tables for layout to see a demand for it).
They can be used to format content in a tabular manner when the markup does not use the table element, e.g. because the markup was written by someone who was told not use tables or because the markup is generic XML and not HTML.
You can also design a page using e.g. div elements so that some stylesheet formats them as a table, some other stylesheet lets them be block elements or turns them to inline elements. This may depend e.g. on the device width.
The <table> HTML markup is for tabular data, i.e. data that consists of logical rows and columns, i.e. a spreadsheet. It should only be used for data that logically requires to be presented in a table.
The CSS table-* display styles allow any data to be presented in a tabular style (which has its own unique logic, mostly in regard to vertical centering and width distribution which is hard to emulate using other elements), while still being marked up using whatever makes the most sense for it semantically, for example a list.
When should I use div tags when I already have the option for dividing page with Table tag
Because tables are for tabular data, divs are for layout.
Setting up the layout using table tag is now obsolete when you can use the div tags with nice css features, and hence position them to the level of pixels as you like and define there position on the page as absoulte, fixed, relative etc.
It depends on who is looking at your page.
If it's just you, then it doesn't matter. Do what you want.
If the wider world is going to see your page(s) then use mark-up as it's meant to be used.
Tables are for tabular data, as Marko says, so only use them for that. Divs allow you to divide up your content in to a logical structure that can be styled by CSS, OR NOT.
It's important to realise that there are some ways of using the web that are not visual, such as screen readers and Braille interfaces.
If you use tables for layout you are impeding the use of your page by people/processes who are not experiencing it with eyes.
What's the benefits of structuring my site with divs and apply the display:table property ( display:tr, display:tr). Doesn't this mean that the divs will behave exactly like tr and td elements?
I know I probably shouldn’t use tables or table behavior for layout at all but I'm just curious if there's a difference and a benefit?
What's the benefits of structuring my site with divs and apply the display:table property ( display:tr, display:tr).
None whatsoever in my opinion, except that you take away compatibility with older browsers. The idea that using DIVs with display: table-* is somehow better than <table>s is idiotic IMO, and the result of totally misguided hysteria against table elements. (Not attacking you #Nimo, just criticizing some people who have taken the "tables are evil" meme too far.)
Tables are supposed to be used to represent tabular data, not to be misused for layouting.
There are, however, certain abilities that tables have that are still very hard to simulate using pure CSS. You either need massive hacks and sometimes even JavaScript based workarounds to make those things work.
You should design your layouts in a way that don't rely on those abilities.
In some rare cases, you do need them. But then, it doesn't matter whether you use a proper <table><tr> or a brain-dead <div style="display: table"><div style="display: table-row"> (which one is more semantic and better readable by the way?)
If you need display: table-* for your layout, you have one of those rare cases at hand, or you have painted yourself in a corner anyway. Either way, with a <table>, you at least get consistent browser support.
The following explains why to use DIV over TABLE elements.
Pros of Table Element: Most designers use table for a consistent look. Tables are also easy to maintain. Another advantage of table is that it is compatible with the most browsers.
Cons of Table Element: All this comes with a cost: Too many nested tables increase page size and download time. More table elements push important content down so search spiders are less likely to add content to search engines.
Pros of DIV Element: div with CSS we can achieve the same table based page structure and reduce the number of elements on the page, which allows the page to load faster. It also makes page more compatible with search engine spiders.
Cons of DIV Element: The major drawback of this is not all CSS elements are not browser compatible. Because of this we have to write some custom CSS to resolve issues.
full article : http://www.codeproject.com/KB/HTML/DIVwebsite.aspx
display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TR's and TD's. There's also a display: table-column but it should show nothing at all, only serving for style information like a COL does. I'm not sure exactly how this works.
more about div display style : http://www.quirksmode.org/css/display.html
display: table; doesn't mean you turn divs into tables, it just makes that certain properties (like vertical-align) work where they normally wouldn't. It's not anything like using table for layout.
Tables should ONLY be used to represent tabular data. Divs are containers to group content. Simple as that. display: table only gives you the layout properties of tables. But it's not compatible with <IE7 so for the sake of graceful degradation, avoid it.