As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I recently had a discussion with another developer who was using <table> for data that was not tabular.
<table><tr><td> Server: </td><td> Development </td></tr></table>
I pointed out that tabular data has more than one dimension, and use of tables for styling/presentation is discouraged. He responded that just because the table was one row does not mean that the data is non-tabular.
It seems to me that if "tabular data" has more than one dimension it would require at least two rows and two columns. However, he pointed out that <table><tr><td></td></tr></table> (as well as <table></table>) both validate, and that if he is using <table> incorrectly, the W3C is unclear and they did a poor job with their validator.
I think that <table> is supposed to be used to represent data that is tabular whether or not the resulting structure is tabular as their can be caveats. In the above example, there will only ever be one server, but you can potentially have zero or more rows of multi-column data that is perhaps filtered on a date range.
My question is who is right here? If I am misunderstanding the spec, then how am I misunderstanding? If you have data that is tabular but not enough filtered data to print out multiple rows (i.e. if it is filtered on a small date range) is it incorrect to print only the column headers? Should you print a "no results found" full colspan row as well? If data in <table> must be multi-dimensional, why does a single-column and/or single-row table validate?
I agree with the others, validity of markup is not equivalent to semantics of the markup.
Tabular data should have a column headers to describe the data it holds. So the most minimal table would be, (1 column with 1 row of data, that column should have a heading):
<table>
<thead>
<tr>
<th>My Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>my value</td>
</tr>
</tbody>
</table>
If you want to represent "no results found" it should be displayed outside of the table. Because no results foundis not data. No results should display nothing in the table, or better yet, hide the table and display your no results found message.
It seems to me that if "tabular data" has more than one dimension it would require at least two rows and two columns. However, he pointed out that <table><tr><td></td></tr></table> (as well as <table></table>) both validate, and that if he is using <table> incorrectly, the W3C is unclear and they did a poor job with their validator.
Validity of markup has absolutely nothing to do with semantics. <p> by itself is valid HTML, even though empty paragraphs make no sense in writing. In the same way, the following three tables are all valid, even though they contain no actual data:
<table></table>
<table>
<tbody>
</table>
<table>
<thead><tr><th>
<tbody>
<tfoot><tr><th>
</table>
As you have observed, though, a <tr> element with no children is invalid:
<table>
<tr>
</table>
It's not clear to me why that is the case, as I cannot find any rules in the current HTML 5.0 CR that state that a <tr> element must have at least one child which is either a <td> or a <th> element (it simply says it may contain zero or more of either kind).
Anyway, if a table contains only one row, so be it; that simply means there's only one record to be listed in the table. But tabular data semantics is not a question of whether this table has only one row, but whether this structure is suited for any number of data records expressed in a two-dimensional format. That's what constitutes tabular data.
In your example, will there potentially be more than one entry for "Server" (which, incidentally, if it were a real table heading it should be a <th> rather than a <td> and it should not contain a colon)? If not, and all you want to do is to tell the user which server they're on for instance, then a table is not the most appropriate element to use to present this information. You should possibly use a heading or a label, and some other textual container for the value "Development".
If you have data that is tabular but not enough filtered data to print out multiple rows (i.e. if it is filtered on a small date range) is it incorrect to print only the column headers? Should you print a "no results found" full colspan row as well?
Whether you choose to display a row that says "no results found" is up to you; either way should be acceptable. In this case, all you have is a table that is designed to contain tabular data but for some reason does not have any data to present.
If data in <table> must be multi-dimensional, why does a single-column and/or single-row table validate?
Because even a 1x1 square (i.e. 1²) grid is still considered two-dimensional, even if this single cell is a <th> with no accompanying rows (again, validity and semantics are two very distinct matters).
Valid != Semantic, let's start with that. I can make my entire webpage with <div>s alone, does that make it semantic? No.
Tabular data doesn't necesarily mean that it has more than one dimension (although that sure helps!). Tabular data means "Table which makes the most sense to be put in a table". It does need to be data though, placing navigation links within a table is by definition unsemantic.
It depends on exactly what he placed inside that table. It might be that a table is fine, try to give an example of what he actually put there.
My problem with tables - and I work with developers that only really know how to use them - is that I cannot move content in a table tag around quite as easily as data in a div tag. Sure, you can make a table into pretty much anything, and move it around almost as easily as a div tag, but there's more overhead (more tags) involved in the table itself.
You end up needing to spend more time adjusting padding, spacing, and the like. It's overall far less efficient to work with tables than with DIV's, as well as requiring more code / less visually easy to read code. I like my table tags in nice neat individual lines like the code example another answerer provided; otherwise you run the risk of weird nesting. You have far less nesting issues with DIV use.
That said, many people find DIV's confusing and don't know how to deal with the more flexible tag.
So it's a personal preference issue, really. The more CSS you know and are willing to learn the more likely you are to use DIV's. The simpler the site and the more developers who don't know CSS you want to be able to work with, the easier it is to use tables. You just limit your viability when it comes to reformatting your page drastically without touching the HTML code. (or back-end server code that generates the HTML code)
Related
I'm curious what the impact is of colspan in different browsers.
I have a table with a row acting as a heading which uses colspan to spread across all columns, and I might want to add columns in the future. If I simply make the colspan some really large number so that I can add columns without having to update the heading, does this have any negative impacts?
Will browsers behave badly and creating loads of dud columns, or should they be smart enough to limit this to how many columns the table actually has?
Using colspan to span columns that have no cells beginning in them violates the HTML table model (which is being formalized in HTML5 table processing model). All bets are off then, and testing on all existing browsers (which isn’t really possible) wouldn’t be enough – future browsers could handle your markup error differently.
Theoretically, according to HTML 4.01, colspan=0 means that “the cell spans all columns from the current column to the last column of the column group (COLGROUP) in which the cell is defined”. However, this was not implemented, and it is being removed (value of 0 made an error) in HTML5, without any replacement.
The idea is clearly that the author, or the software that generates an HTML document, is responsible for counting the columns. That is, if you add columns to the table, you need to modify the colspan value, if you want a cell to span all columns.
MDN says there are two behaviors, one for <th> and one for <td>.
For header cells (th), the value must be >=0, <=1000. If it is >1000 it clips to 1000, if it is 0 it spans the entire <colgroup>.
For data cells (td), the value value must be >= 0, <= 1000. If it is >1000 it is set to 1, if it is 0 it spans the entire <colgroup>.
Also, it appears Firefox is the only one to support the 0 = colgroup rule.
Best way is to try it. But my guess is they'll all be fine.
What's a really large number? 50? 100? 10000?
here's a fiddle with 200 columns and a colspan:
<table>
<tr>
<th colspan="200">test</th>
</tr>
<tr>
<td>test</td>
...
</tr>
</table>
http://jsfiddle.net/FYKqb/
try it in different browsers. I reckon they'd all be fine.
I have a simple datatable with less than 100 rows. I've currently been displaying the data in a series of nested DIVs. Each row has a container div, with nested divs representing the columns of data within it. (This was in reaction from my earliest coding days when there wasn't anything like a div).
The first column of data is formatted as an image link, while the other two columns are text.
Does it make sense to return to using a table?
Also, as an experiment, I'd thought about using nests ULs. An UL to contain all the rows, and a separate horizontal UL for each row.
As a further note/question, I have another block of data that can result in thousands of rows. Would that amount of data result in a different answer for 'best practice' in this case?
Realistically, you can use any container you'd like. Best practice is to use the elements for what they were meant to be used for. If you are displaying tabular data, by all means use a table! There are great plugins to make the experience for the user better, and it's really easy to read and copy/paste.
The question that I always ask myself is if that data would be best shown in a Word or Excel file. If Excel, then it's a table. If Word, it's div's.
If you're using thousands of rows you'll probably want to give the user control on sorting, filtering, and pulling in more information to aid usability. I'd use a table with some jQuery plugins like tablesorter, hovertable and tableFilter to help make this easy.
In this case a table is fine. Tables are for displaying tabular data, like a row in the db. You should avoid using tables for page layout though....
As for having thousands of rows, you may want to look into pagination. I don't think there is a better "best practice"
Lists are for lists, tables are for tabular data, and divs are for layouts. So if you want to go the best practices route; I think you should be using a table here.
That being said; using divs as opposed to tables isn't all that bad. I wouldn't worry about rewriting if you're already using divs instead of a table. The one caveat being you're clearing your floated column divs. ex:
<div class="row">
<div class="column" style="float:left;"><!-- Some stuff --></div>
<div class="column" style="float:left;"><!-- Some stuff --></div>
<div class="column" style="float:left;"><!-- Some stuff --></div>
<div style="clear:both;"><!-- Leave empty --></div>
</div>
What you should avoid is the opposite (using tables where divs should be used).
Also, even though you may be able to get some kind of table structure using list elements, this is NOT the route you want to go. I've never done it before...to be honest out of the hundreds of examples I've looked at I don't think I've ever seen anyone use them for such a purpose. I guess the best reason here is why would you? Since I've never seen it before I don't have any examples handy which illustrate why you shouldn't do it. But to me this is akin to telling someone not to use a pipe to loosen a bolt when they have a wrench handy. I mean sure....maybe the pipe could get the job done but the wrench is right there...
If I need to show data in a table liked manner I mostly use the <table> element. You should think about user friendliness when showing a 1000 rows or more. The jqGrid plugin is good solution for that and has features like paging, sort, search, etc.
lists are for one dimension data.
tables are for more than one dimension data.
divs are to separate things or include something in others.
if each item of your data has a relation of owner to some others you should use table.
I can't remember the recommendation on this -- should it be avoided? Is it standards complaint?
I have a table -- with actual tabular data inside of it -- but one of the cells contains a bit more information.
The previous developer embedded a child table inside the cell. I'm contemplating replacing it with a pair of floated divs?
Is that okay?
I can't remember the recommendation on this -- should it be avoided?
It smells of divitus, but depends on the specifics.
Is it standards complaint?
Table cells may contain divs, and divs may contain divs.
I have a table -- with actual tabular data inside of it -- but one of the cells contains a bit more information.
Perhaps a better structure would involve splitting it into more columns.
Not best choice if the child cell can be converted into normal div block element. TABLE IN TABLE is not recommended (until you have no more choice)
subtable can be converted into styled list to achieve 1xN or Nx1 type tabluar structure
It sounds like the previous developer was using HTML tables for layout, which is generally a bad idea. It sounds like you're trying to fix the inner cell via a syntactically-correct but semantically-better-but-vapid change. If the outer table is also used for layout (as opposed to being used for tabular data) then you should fix that as well.
Regarding the "is it legal" part of your question, in the future you may find it easier to try it and then validate your page instead of waiting for the stack overflow community to roughly validate code concepts.
Yes, that's fine.
Tables nested inside tables is not recommended (I don't think it's standard compliant either)
The recommended layout is as you suggested - 2 floating DIVs
I've noticed a variation of convention when it comes to using DIV tags instead of TABLE to separate/organize content on a web-page. In what situation is one more appropriate to use than the other?
Clarification: This question is both general, and specific in that I'm mainly looking for which would be more ideal for page layout.
As a rule of thumb — if every cell in a row has something in common, and every cell in a column has something in common, then you should use a table. If you don't have a thead with some th elements providing column headings, then there is a good chance you are doing something wrong. If you don't have multiple data rows and multiple data columns, then … ditto.
The choice is, however, not between a div and a table. Use the markup that has the semantics that best describes the content. There are plenty of elements in HTML: http://www.w3.org/TR/html4/index/elements.html
Use tables only with semantically tabular data. Is each row other than the header representing the same "type" of "thing"? Does each column header have below it a set of items that are described accurately by the column header? If yes to both, then use a table. Avoid tables for styling whenever possible.
Table should be used to display tabelaric data ( like in excel for example) When Div tag is a container and should be used to organize content.
You can drive a nail with a screwdriver but proper tool is a hammer.
Simple.
Use a table for tabular data.
Use a div to separate content.
IMHO, a table is for the display of tabular data and related things, not for general layout of a page itself.
Some do not hold this purist opinion, and so use tables for laying things out because they seem easy to use.
Use div when you want to make your page more syntactically correct, use less bandwidth, make changes easily,make sites more accessible and more search engine friendly. In all other cases use tables (well except when you want to show some tabular data). Here are more details.
What I see a lot (and my biggest pet peeve), is people using a single column table to separate page elements or lists. Like:
<table>
<tr><td>
List item 1
</td></tr>
<tr><td>
List item 2
</td></tr>
</table>
instead of using
<li>, <p> or <div> (if its more like content)
The moral, its fine to use table where thy make sense- tabular data, etc. Never for lists, blocks. People complain about using it for layout, but sometimes it just works so that is the only place I make an allowance for abusing tables.
i use table only to display database fields and records.
i mainly use div for page layout.
Probably the only scenario where I'd use a table for layout over a div (other than for tabular data) is when creating HTML for an email. Emails clients aren't great at displaying HTML properly, so often using tables is the only way to get pages to display consistently.
It makes me die a little every time I have to do it :(
It does concern me that people are suggesting that table should be used for anything except tabular data, even in IE6. I think the only legitimate use of tables for non tabular data is in html emails, it's not the correct usage but the rendering in email clients is so awful you have little choice.
Semantics on your HTML have always been important, but I think it is only going to get more so especially with the new HTML5 tags that are being proposed... I can see more confusion over the use of article and section
Well, as far as I know, a table is used to organize a group of objects into set places ... say three pictures side by side all separated by some text.
And a is a "section" of a webiste. This can include anything, even tables!
So I guess the answer to your question would be: if you need to set up an organized array of images, text, etc. you might want to use a table (like an excel spreadsheet), but if you simply want to divide your website into sections, use tags.
By the way, as of late, tables are being used less and less and there seems to be a tendency to using different CSS layout techniques instead of tables.
Good luck!
I am working on an django application that will return what historically was a table of information:
ISSUE DESCRIPTION INITIATOR INITIATEDDATE ASSIGNEE FORECASTDATE STATUS REMARKS
That will be the entrance point for users to sort / filter, etc the list of issues.
The columns like ISSUE, DATES, NAMES are of relatively fixed width, but others can be a paragraph or more.
What is the best way to render this in HTML? As HTML Tables, lists or with a lot of CSS spans/divs?
I eventually hope to make the issues list sortable or filterable with javascript as well.
The whole argument made by the CSS purists is that you need to keep your code semantically relevant to the information it contains. What you need to show is tabular data and you use the <table> tag to do that. The only "problem" with tables is when they are used to control the layout, like making your two column layout two <td>s as opposed to two <div>s. In this case, however, tables would be adequate.
If the information you're trying to display is tabular (as it appears to be), then go with tables.
Also, see these questions for even more debate!
Tables instead of DIVs
Why not use tables for layout in HTML?
As both answers say, tabular data should be displayed using a <table> tag.
To put it into perspective, when tables are used to do layout, that is an abuse of the table tag. When div tags are used to do tabular layout, that's abuse in the opposite direction. Don't use one to do the other's job.