Colspan All Columns - Mdn Understanding Wcag, Guideline 1.4 ...

Question:

Is there a way to ensure that a tag with the " td " should cover all columns in a table, even when the number of columns is uncertain or hard to determine during HTML rendering? According to w3schools, one can utilize " colspan="0" " for this purpose, but it does not specify which browsers support this value (note that we need to support IE 6).

Using a value higher than the expected number of columns for colspan seems to function, but it won't if table-layout is set to fixed . Are there any drawbacks to employing an automatic layout with a sizable value for colspan ? Is there a more appropriate approach to accomplish this?

Solution 1:

Just use this:

colspan="100%"

It is compatible with Firefox 3.6, IE 7, and Opera 11, and possibly other browsers that were not tested.

Caution: as stated in the comments below, this is essentially identical to colspan="100" . Consequently, this approach will not work for tables containing css table-layout: fixed , or if the table has more than 100 columns.

Solution 2:

I am using Internet Explorer version 7.0, Mozilla Firefox version 3.0, and Google Chrome version 1.0.

The TD's colspan="0" attribute does not span across all TDs in any of the browsers mentioned above.

While it may not be recommended as a standard markup practice, if you assign a colspan value that is greater than the total number of columns in other rows, the TD will span across all the columns. """.

The functionality fails to operate properly when the CSS property table-layout is assigned the value fixed.

While it may not be the ideal solution, it appears to be effective in the aforementioned three browser versions when the table- layout CSS property is set to "automatic". Hopefully, this information proves beneficial.

Solution 3:

If you want to create a header for your table that spans all columns, you can utilize the caption tag (http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption). The purpose of this element is to serve as a 'title' cell. Unlike a div, it does not stretch across the entire width of the table's parent element. Instead, it spans the width of the table itself. While there may be some cross-browser issues with borders, it was acceptable for me. To achieve the appearance of a cell that spans all columns, you can add div elements within it to create rows. It is unclear if you can insert it between tr elements, but that would likely be a hack and not recommended. Another option would be to experiment with floating divs, but that is not ideal.

Do

Don't

Solution 4:

To provide some insight into colspan="0" , which was brought up in the question, here are a few key points.

tl;dr version:

The functionality of colspan="0" is non-functional in any web browser. W3Schools is consistently incorrect. According to HTML 4, colspan="0" was intended to make a column span the entire table, but no browser actually implemented this feature. Consequently, it was eventually removed from the specification after HTML 4.

Some more detail and evidence:

• All major browsers consider it to be the same as <code> colspan="1" </code>.

  You can give it a try on any browser of your preference with this demo.

  All major browsers consider it to be the same as <code> colspan="1" </code>.

  You can give it a try on any browser of your preference with this demo.

• The HTML 4 specification, which was considered current at the time of this question, stated that <code> colspan="0" </code> should be treated as spanning all columns despite its outdated nature.

  #msdt_blockquote2#

  Nevertheless, the majority of browsers failed to incorporate this feature.

  ".
• ```

  The HTML 5.0, WhatWG HTML living standard, and the latest W3 HTML 5 spec, all published after 2012, do not include the exact wording from HTML 4 mentioned above. However, they all unanimously state that a value of 0 is not permitted, using similar language found in all three specifications.

  The elements <code> td </code> and <code> th </code> can have a specified content attribute, <code> colspan </code>, that must be a valid non-negative integer greater than zero.

  <p> Sources: </p>

  The common attributes for the td and th elements can be found in the following links: - https://www.w3.org/TR/html50/tabular-data.html#attributes-common-to-td-and-th-elements - https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements - https://www.w3.org/TR/html53/tabular-data.html#attributes-common-to-td-and-th-elements ```
• The text provided consists of multiple parts, including msdt_p1, msdt_blockquote1, msdt_p3, msdt_blockquote2, and msdt_p5.