HTML colspan 0 alternative

Question

I have a HTML table, and i would like to give the last row (in <tfoot> tag) only one cell expanding to all the table.

I was using colspan="0", then i saw that it only worked in Firefox. I then tried colspan="100%". It works fine, but not pass the w3c validator (Very important in my project).

Is there a working alternative ?

I saw people who use colspan="1000", not a bad idea but are there some performance problems with this ?

Thanks for advice.

Answer 1

My first answer is: refactor your code. If you need the total number of columns to build the table footer then the function you use to build the table body should return that number (and not only the HTML).

That said and only in case it's too complicated (or you don't have control about that code) you may simply count them by yourself, I would avoid any trick about colspan because it's behavior isn't homogeneous (and it's not validated too).

You can easy count the number of cells using the first row (if the table is well formed all the rows have the same number of columns).

The first naive solution would be to split() HTML tbody then to substr_count() the <td/> of the first row. Unfortunately this may work only in a very controlled situation (tables must be well formed, table may contain or not tbody and it doesn't manage colspan of that cells).

Better solution involves a small HTML parser (see this great post here on SO for a good and detailed list), when you have DOM then you can easily count TDs and check for their attributes (I say this in advance: no, you can't use regex to parse HTML).

To be honest I think refactoring is much more suitable...

Answer 2

Might be the following code I use could be useful too:

var len = document.getElementById("myTable").rows[0].cells.length;
document.getElementById("myTablelastrowfirstcell").colSpan = len;

the first line gets into the variable len the number of cells (td or th elements, doesn't matter, if all the table has the same number of column) contained into the first row of mytable;

The second row modifies the colspan property/attribute of the targeted cell positioned into the last row and sets it to the value previously got.

The following has the same code, shortened:

document.getElementById("myTablelastrowfirstcell").colSpan = document.getElementById("myTable").rows[0].cells.length;

Notes:

1. Sometimes the table contains a thead, a tbody and a tfoot. In such case it is needed to modify the code using the id of one of them that has the correct number of columns to return.
2. The given examples, in some situations, might work only when rendered by the browser, if rendered for printing they might won't work anymore and table layout might be different.

Working example (click on run code example at the end of the code to run it and see how it operates):

function spanLastRowCols() {
  var len = document.getElementById("myTable").rows[0].cells.length;
  var len = document.getElementById("ext").colSpan = len;

  info.innerText = len;
}

table, td {
    border: 1px solid black;
}

<p>Click the button to change the content of the first table cell.</p>
<p>Then copy and paste some td cells for each rows forthe first and the second tr. Than run the snippet again and click the button to change the content of the first table cell to compare differences.</p>



<table id="myTable">

  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
    <td>Row1 cell3</td>
    <td>Row1 cell4</td>
    <td>Row1 cell5</td>
  </tr>

  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
    <td>Row2 cell3</td>
    <td>Row2 cell4</td>
    <td>Row2 cell5</td>
  </tr>

  <tr>
    <td id= "ext">Row3 cell1</td>
  </tr>
 
</table>
<br>



<button onclick="spanLastRowCols()">Try it</button>
Last row colSpan attribute value: <span id="info"></span>

Answer 3

The <caption> tag is well supported and will give you a result similar to <tfoot colspan="1000">:

table {
  background: #eee;
}

table caption {
  background: #e0e0e0;
}

td,
th {
  margin: 5px;
  padding: 5px;
}

<table>
  <thead>
    <th>Quote</th>
    <th>Author</th>
    <th>More</th>
    <tbody>
      <tr>
        <td>One cow at a time, set free the entire herd</td>
        <td colspan="2">Prosper Stupefy</td>
      </tr>
    </tbody>
    <caption style="caption-side:bottom">This will always span to the full width of the table</caption>
    <caption style="caption-side:top">A list of made-up quotes</caption>
</table>

Note that you will need to css style it.

Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption