1

I am trying to create the following html table:

enter image description here

I can't work out why my current implementation is not yielding my desired result. As you can see in the snippet, the last <td> in the second <tr> spans 2 cols, and not the middle <td>.

table{
    width: 100%;
}
table tr td {
  background-color: #ddd;
}
table tr td[colspan="2"]{
    background-color: #0a0;
}
table tr td[colspan="4"]{
    font-size: 16px;
    text-align:center;
    background-color: #8C0000;
    color: #fff;
}
<table>
  <tbody>
    <tr>
      <td colspan="4"><b>Full width column</b></td>
    </tr>
    <tr>
      <td>Column 1</td>
      <td colspan="2">Column 2</td>
      <td>Column 3</td>
    </tr>
  </tbody>
</table>

In researching I found the following from: https://www.w3.org/TR/WD-html40-970917/struct/tables.html

There are several ways to determine the number of columns:

Count the number of columns as specified by COL and COLGROUP elements which can only occur at the start of the table (after the optional CAPTION).

Scan each row in turn to compute the number of columns needed for each row, taking into account cells that span multiple rows and/or columns. Set the number of columns for the table to be the maximum number of columns from each row. For any row that has less than this number of columns, the end of that row should be padded with empty cells. The "end" of a row depends on the directionality of the table.

[deprecated] Use the cols attribute on the TABLE element. This is the weakest method since it doesn't provide any additional information about column widths. This may not matter, however, if the author uses style sheets to specify widths.

So what have I misunderstood about this functionality?

Please also note, that I am aware that I can use css to specifically set the widths of the <td>'s I want to know why my current implementation is not working.

Improve this question
3
  • Your table is not valid. If you put it into the W3C HTML validator it says: Error: Table column 3 established by element td has no cells beginning in it. Commented Jul 7, 2016 at 0:08
  • 3
    I think you are confusing colspan and width. Not all columns are the same width, so colspan=2 does not make a column twice the width of any other column. If you add a 3rd row that has 4 cells, then the colspan=2 column would be the width of the middle 2 columns of the 3rd row. Commented Jul 7, 2016 at 0:13
  • @CodingWithSpike Sorry, So just to clarify, colspan2 != colspan1 * 2 ? Are you saying that colspan2 simply inhabits 2 columns of any size in the same place relative to the whole table? p.s. if that makes no sense I won't be surprised, I can try and re-word it - again - haha. Commented Jul 7, 2016 at 4:41

2 Answers 2

Reset to default
3

In fact the second td does span two columns, but the width of columns in a simple HTML table depends on the contents of the table cells. If you add the following style attributes containing widths to the tds, their widths are distributed as desired (i.e. 25/50/25%): (Note: You could/should also apply CSS classes to those tds and create external CSS rules for those classes)

table{
	width: 100%;
}
table tr td[colspan="4"]{
	font-size: 16px;
	text-align:center;
	background-color: #008CD1;
	color: #fff;
}
<table>
  <tbody>
    <tr>
      <td colspan="4"><b>Nonverbal skills</b></td>
    </tr>
    <tr>
      <td style="width: 25%; background-color: #888;">energised</td>
      <td colspan="2" style="width: 50%; background-color: green;">Gestures</td>
      <td style="width: 25%; background-color: #888;">Under energised</td>
    </tr>
  </tbody>
</table>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Do I still even need to declare colspan then if I just use CSS?
3 different answers: 1.) Yes: The number of columns has to be consistent through all rows. 2.) Well: If you make the top row span 3 columns, you won't need the colspan="2" in the second td of the second row. 3.) You could use div elements instead of all the table/tr/td tags, either using float or display: inline-block where more than one div should fit in a row.
Ok cool - thanks for the help. Also, do you happen to know the answer to my comment on my question?
Hmm - not sure if i understand it correctly... As I wrote in my answer, the width of columns which don't have a defined width depends on their contents. Usually the browser will try to make best use of the available space both horizontally and vertically. So if one cell has a lot of text in it, the next one one sentenc, the next one word and the last one nothing, the third one will just be as wide as that word, the fourth one will have almost no width, and the first and second's widths will be so different that their heights more or less match. (contintued below ->)
The width of a cell with colspan="2" willl also depend on its contents, but also on the content of the cells in the rows it spans above and below - rather unpredictable, but useful, if you want to save vertical space. As soon as you start defining widths, it's a completely different thing...
-1 
 table.table td:nth-child(1) {text-align: center; font-weight: bold; width: 70px;}
Improve this answer

1 Comment

This answer may need more explanation than a single line of code, to help the original poster understand the solution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.