html table colspan not working as expected

Question

HTML concepts are so terrible sometimes.

This is my code using colspan in html table, and doesn't look as I expect.

<table border="1">
  <tr>
    <td colspan="3">a</td>
  </tr>
  <tr>
    <td colspan="2">b</td>
    <td>c</td>
  </tr>
</table>

What I want is: cell 'a' should look 3 cell wide, cell 'b' should look 2 cell wide, cell 'c' should look 1 cell wide.

What it is doing is: cell 'a' is 2 cells wide, cell 'b' & 'c' is 1 cell wide.

Any Suggestions thanks.

Answer 1

Attribute colspan determines how many columns a cell overlaps with respect to other cells, not the absolute size of those columns. In your case, span 2 has two spans. how you can say it is not? don't judge it by width of a cell. span is not the width. You have to add another smaller columns to appear it as a column of two spans.

See the solution for your expectation in code snippet last example.

<h3>Example 1</h3>

<table border="1">
    <tr><td>col1</td><td>col2</td><td>col3</td></tr>
    <tr><td colspan="3">a</td></tr>
    <tr><td colspan="2">b</td><td colspan="1">c</td></tr>
</table>

<h3>Example 2</h3>

<table border="1">
    <tr><td width="80px">wide col1</td><td>col2</td><td>col3</td></tr>
    <tr><td colspan="3">span 3</td></tr>
    <tr><td colspan="2">span 2</td><td colspan="1">span 1</td></tr>
</table>

<h3>Your case</h3>

<table border="1">
    <tr><td colspan="3">span 3</td></tr>
    <tr><td colspan="2" width="66%">span 2</td><td width="33%">span 1</td></tr>
</table>