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.
Related
Other display values have one or more corresponding HTML elements, such as:
block - div, p
inline - span, strong, etc.
list-item - li
table - table, table-row - tr, etc.
none - template
but display: grid and display: flex must be assigned through styling. I could see it being easier to read through the DOM if <flex> and <grid> elements were available.
Are new element types not being added to the spec now that custom elements can be made?
The answer to your question has to do with the separation of style from the data being presented.
The HTML tags that you use to display data should be chosen based on the type of data that you are displaying. For example, you'd use <li> when you're producing a list or <strong> when you want text to stand out. CSS gives you a lot of flexibility for modifying how the data is presented allowing you can change how data, such as text in <strong> or <em> tags, is displayed. The styles for many tags can be changed so that they behave like other tags. For example, you can make a <span> tag behave like a <div> tag and vice versa. However, you should not do this. In other words, the tags that you select should be based on the type of data being displayed, such as <li> for list items or <p> for paragraphs. Technically, you can never completely separate your data from how it is displayed, but you should attempt to do so as much as is possible.
<flex> and <grid> don't have any meaning with respect to the type of data that you want to display. Thus, they are styles that are editable using CSS (instead of tags).
I could see it being easier to read through the DOM if <flex> and <grid> elements were available.
You're suggesting combining content and presentation, which counters the separation of concerns principle that CSS was created to address.
HTML is used for organization of content. CSS is used for presentation of content. Your <flex> and <grid> elements would combine these two concerns, which is the way things were in the 1990s, before the advent of CSS, when HTML did both.
Also, what if I want my <article> to be a grid container, or my <aside> to be a flex container?
Why not also have <block> and <inline>?
Things start getting messy.
Also, the premise of your question is incorrect.
Other display values have one or more corresponding HTML elements ... but display: grid and display: flex must be assigned through styling.
Actually, the display value of all HTML elements is assigned. The only difference is where the styling comes from.
In raw form, HTML elements have no styles. They only have semantic meaning.
It isn't until the browser assigns default styles that elements take on presentational meaning.
Therefore, the only reason you can say this...
Other display values have one or more corresponding HTML elements,
such as:
block - div, p
inline - span, strong, etc.
list-item - li
table - table, table-row - tr, etc.
... is because the browser defined those elements as such with something like this:
Appendix D. Default style sheet for HTML 4
As you can see, display values are assigned.
So the browser sets a basic level of formatting for HTML elements. Changes and additions to these styles are left up to authors.
Here's some more detail:
Proper way to apply CSS to HTML5 custom elements
<main> element not working in Internet Explorer 11
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
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.
Since it is recommended not to use table elements for layout purposes (non-tabular data), because the special formatting applied to those elements may change in the future, is it also not recommended to use CSS properties such as text-align, which was designed to be used on text, for img elements for the same semantic reason?
I have been looking through the w3c specifications and for instance, line-height seems to be designed for text purposes and has plenty of references in the documentation to font size, so would it be appropriate or abusive to use this property on img elements, simply because they are displayed as inline?
I can understand how the W3C idea of a Semantic Web would use CSS to remove styling information from a page, leaving data exclusively in the HTML for content accessibility. But where is the original rationale documentation for CSS, and why wouldn't they use extremely abstract properties like horizontal-align from the get go, instead of unique alignments for each display type (e.g. text-align: center can be used on all display: inline elements such as img elements) ?
No. CSS is purely presentational. Some of the properties are just poorly named (text-align being a prime example, it is designed to align all inline children).
It is perfectly fine, to use text-align in table cells, that just styling the table as you should be doing. If you want to. Just do it in CSS. Do not use align="right".
https://developer.mozilla.org/en/CSS/text-align
Says it applies to: block level elements, table cells and inline-blocks. So it is a use that is documented and intended. If you have inline content use this property to style its alignment.
http://www.w3.org/TR/CSS21/text.html#propdef-text-align Also states
This property describes how inline-level content of a block container is aligned.
So it is not just text, but all inline content.
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.