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.
Related
I'm using HTML tables to create a timetable. Each row represents half hour, and the cells can span multiple rows by using rowspan.
Sometimes I have empty tr elements, because all the slots are taken by cells from previous rows.
In that case, the HTML validator complains:
Row [N] of a row group established by a tbody element has no cells
beginning on it.
Sure, I could remove those empty tr and reduce the rowspan value of the expanded cells. But then the rowspan value would no longer univocally correspond to the duration of the cell.
Therefore, are empty trs really invalid? Why?
You can’t have empty rows in a table in a valid HTML document per the current HTML spec.
Maybe you rightly should be able to, but the spec currently clearly says that you can’t. So if anybody believes it should be allowed by the spec, the right thing to do is to file an issue against the HTML Standard in its github tracker or even write a patch and open a PR for it.
Specifically the spec defines the following error case:
https://html.spec.whatwg.org/multipage/tables.html#the-table-element
If there exists a row or column in the table containing only slots that do not have a cell anchored to them, then this is a table model error.
In Internet-spec terms, that is a “normative” authoritative statement that can’t be ignored or overridden by anything else. It is stating a hard requirement.
The spec elsewhere says this:
The tr element: Content model
https://html.spec.whatwg.org/multipage/tables.html#the-tr-element
Zero or more td, th, and script-supporting elements
But that’s not actually a contradiction and does not conflict with or supersede or override the “table model error” requirement cited above. In fact, it’s the opposite—the “table model error” requirement supersedes the more-liberal requirement in the other section (cited above) that a valid tr element can have zero or more children.
Any stricter requirements in a spec always supersedes or overrides any more-liberal requirements.
In the table model section of the HTML spec, you can find the following statement:
Rows usually correspond to tr elements, though a row group can have some implied rows at the end in some cases involving cells spanning multiple rows.
However, that doesn't work for empty rows in the middle of your table, as the implied rows can only occur at the end.
Another possibility would be to add a column with <th> elements to the left that serve as a caption for the row. After all, the user may want to know what one table row represents - just as you have told us here.
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)
is it possible to use CSS3 table to make it look like this
+---A---+---B---+---C---+---D---+---E---+
>>>>+---A---+---B---+---C---+---D---+<<<< ---> case 1
+---A---+---B---+---C---+---D---+---E---+
case 1: need to margin-left the first cell right? is it any code that make auto to margin
+---A---+---B---+---C---+---D---+---E---+
+-----A-----+-------B-------+---C---+-D-+ ---> case 2
case 2: colspan is work on the cell width is same. what if the cell width is vary. Is it possible?
all of this code must be in CSS3 and HTML5 only. No use <table>, <tr>, <td> only <div>
Should I convert to use grid instead of using table?
Thank you.
Use tables if it is tabular data, if it isn't then use something else.
From your example where column widths don't match, and where colspans don't do what you want it's hard to see how the data could be tabular data.
A couple of options, colspan can work if you do it the right way. For example setting a colspan of 2 on normal single span cells would allow you to make other cells span to halfway through another column.
Or if it really isn't tabular data then use DIV's and position them apropriatley.
Using tables, you would not be able to vary the width of one rows cells without affecting the width of all the other rows cells though, im not even sure you can dynamically change colspan once the table has been drawn, never tried it to be honest).
In all honesty I suspect you are really looking to solve this using DIV's, as your data really doesn't seem to fit the tabular data model. Tbular data will generally have headers on columns with data corresponding to those column headers in the appropriate column. Your cells seem to be able to move freely and therefore would not be fixed under any particular column header.
I am guessing from the layout that you are possibly creating some sort of calendar? and events can span any distance of time etc across the columns? In which case I personally would prefer divs, although I know some people would prefer using tables.
I am working with JSF/ICEFaces and I need to generate a table from a dynamic tree structure with an unknown (at run-time) number of rows and columns. The table must have width: 100%; so it occupies all the space inside its container.
I am able to generate all the markup required for the table, but I found that the cells' width is not the same.
It would be easy for me to set CSS width: (100/numberOfColumns)% if I knew the number of elements I'm rendering. Unfortunately, I can't modify the classes returned by my backing bean so I can only iterate over them with ui:repeater component.
Do you know if there is a CSS way to make sure that all columns in a table have the same width, no matter what it is?
I wouldn't like to use the Javascript way. Just as cleaner code as possible.
table {
table-layout : fixed;
}
If you have at least an idea regarding the maximum number of columns: here's the solution for applying certain distributions only if a certain amount of columns is given.
My example only concentrates on the principle and creates evenly distributed columns. Note that this is superfluid when using table-layout:fixed and width:100%.
You could easily extend this solution to specify the width of the first columns other than that of the remaining columns.
Say, the maximum allowed number of columns is 4 (including possible rowheaders). Given you are using tbody in your table like in the following example:
<table>
<thead>
<tr><th>X</th><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody>
<tr><th>1.</th><td>a</td><td>b</td><td>c</td></tr>
[...]
</tbody>
</table>
CSS Code:
table{table-layout:fixed;width:100%;}
tbody>tr>*:nth-last-child(2)~*{ width:50%}
tbody>tr>*:nth-last-child(3)~*{ width:33.3%}
tbody>tr>*:nth-last-child(4)~*{ width:25%}
It says:
Apply to the following siblings of the second last element of a row: width 50%. (That's all columns except the first element, if there are at least 2 columns). If there are two, three, four or more columns, this selector is applied.
But then:
Apply to the following siblings of the third last element of a row: width 33.3%: Again: This selector works only if there are at least three elements. It overwrites the rules of the preceding selector (nth-last-child(2)), so that your columns now have the width 33.3%. This selector is not applied, if there are only two columns.
And then:
The same for four columns. It again overwrites the rules previously defined.
Be aware, that you need to define the width for each possible amount of columns. So, if there was a maximum number of 20 allowed columns, this would be 21 lines of css.
I believe that this solution is compatible with IE9+, not IE8. But I'm currently not 100% sure. See http://caniuse.com/css-sel3
I'm creating a table in an asp.net code behind dynamically, and I want to have a footer row that only has 2 cells. The first should span all the columns in the table-1. Is there some way other then keeping track of the # of columns in the table manually for me to set the colspan to be # of all the columns in the table-1?
Preferably a HTML or CSS solution?
Colspan can't be done with CSS. It's structural rather than stylistic so it's pure HTML.
No you can't specify "all but one" as a colspan. The best you can do is colspan="0", which will span the remaining columns in the column group but to take advantage the <colgroup> at the top will need to know the number of columns anyway and be define statically.
See Tables in the HTML spec:
colspan = number [CN]
This attribute specifies the number of
columns spanned by the current cell.
The default value of this attribute is
one ("1"). The value zero ("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.
But basically this just kicks the can down the street and I don't know what the browser support is like so it doesn't necessarily buy you anything.
You'll either need to know the number of columns when you generate the HTML or use Javascript.
Sorry this isn't an HTML or CSS solution... I'm only suggesting it because I don't think there is an HTML or CSS solution that will work cross-browser/cross-broweser version.
You could convert the table to an Asp:Table and then use the first row's Cells.Count...
But it would probably be more work than tracking the number of columns added the way you're doing it now. BUT it would not depend on Browser support as it would all be in the code-behind.
In case anybody else winds up here in the future, colspan=0 isn't supported in HTML 5. There are more details here: https://stackoverflow.com/a/52355253/18494923
<tr><td colspan="100%">1000</td></tr>
From question: Colspan all columns
Works in IE 7/8 & Firefox 5