Can a table row have no cells? - html

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.

Related

Why may not the colspan attribute be set to zero?

According to the HTML5 description the attribute rowspan may have value 0. In this case the value zero means that the cell is to span all remaining cells of the given column in the row group.
However the value of colspan may not be equal to zero.
So a question arises what is the reason for such a restriction for the attribute colspan?
This is quoted from https://lists.w3.org/Archives/Public/public-html/2011Aug/0293.html but it explains the issue in detail.
In HTML4, "colspan" and "rowspan" attributes of TD/TH elements has been allowed to have zero value ("0"):
http://www.w3.org/TR/html4/struct/tables.html#adef-colspan
This is very useful when column or row number is unknown in advance.
It's harmful to force web-editors to calculate column or row number
manually while browser could easily do this automatically.
There is a known rule in spec development: when there are two
independent implementations of a specification, then the specification
status is promoted to "recommendation" ("candidate" or "proposed").
But there ARE already two (well, 1.5) working independent
implementations of zero colspan/rowspan:
Firefox (both zero colspan and rowspan are fully working)
and Opera (supports rowspan="0" and does not support colspan="0").
So, zero value of colspan/rowspan is very good candidate to keep in
HTML spec and, moreover, to encourage rest browser vendors to
implement this useful feature as soon as possible.
There are no serious reasons to remove zero values of colspan/rowspan
from the HTML specification. It's not something "unimplemented at
all", it's already quite usably implemented and should be kept intact
in the HTML spec.
Also the HTML5 spec (4.9.11) explicitly states that colspan shall be non-zero and rowspan can be zero along with what it means to be zero. http://www.w3.org/TR/html5/tabular-data.html#attr-tdth-colspan
The quick answer to why would be to say that the HTML5 spec explicitly states this restriction. IMO I see no reason why browsers wouldn't reserve the meaning of zero to act the way Firefox has implmented other than to follow specification.

How to make TFOOT to show only at the end of the table

I have an html table with a large number of rows and when I'm trying to print it, the content in TFOOT is showing in every page break. Can I make it to show only at the end of the table in the last page?
Note: I can't remove the tfoot from the table because the table is output from CGridView of yii framework which I'm using.
I’m afraid it can’t be done except with scripting. By default, the tfoot element has display: table-footer-group, which means that it appears after any other rows of the table and may be repeated at the end of each page (if the browser wants to do that). You cannot separate these two things in current CSS.
If you set tfoot { display: table-row-group }, it won’t be repeated, but it won’t appear at the end of the table but in the same place as in the HTML source, which means that it is at the start, before normal rows, by HTML 4 syntax. I’m assuming it’s there in the HTML code and you cannot change this. (In fact tfoot can be placed last in the table markup, and HTML5 allows this.)
You can get rid of the footer altogether by setting tfoot { display: none }, but I presume you don’t want that.
If client-side scripting can be used here, then you could set display to table-row-group together with code that simply moves the tfoot element last in the table. Assuming the table element has id, say id=tbl, you can use the following script (which also sets display):
var tbl = document.getElementById('tbl');
var foot = tbl.getElementsByTagName('tfoot')[0];
foot.style.display = 'table-row-group';
tbl.removeChild(foot);
tbl.appendChild(foot);
If the table element lacks id, you need some different way to find the element in JavaScript, depending on the structure of the page. If it is the only, or the first, table element there, you can replace the first line above by
var tbl = document.getElementsByTagName('table')[0];

Outline colspan in major browsers?

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.

HTML table with raised column effect

I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.

Table colspan span all columns regardless of # of columns

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