0

I have pasted my code below as well as a picture of what I am trying to accomplish. "Header 2" should span 3 columns instead of 2 and "DataA1",B1,C1 should span 2 columns instead of 1. But when I specify that in my code it doesn't do anything. I am not sure what error I have run into.

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td 
      {
        border: 1px solid black;
        border-collapse: collapse;
      }
      .title
      {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Table</h1>

    <table>
      <tr>
        <th colspan="4" class="title">A common header for three subheads</th>
        <th rowspan="2">Header 3</th>
      </tr>
      <tr>
        <th>Header 1</th>
        <th colspan="3">Header 2</th>
      </tr>
      <tr>
        <th>Thing A</th>
        <td colspan="2">dataA1</td>
        <td>dataA2</td>
        <td>dataA3</td>
      </tr>
      <tr>
        <th>Thing B</th>
        <td colspan="2">dataB1</td>
        <td>dataB2</td>
        <td>dataC3</td>
      </tr>
      <tr>
        <th>Thing C</th>
        <td colspan="2">dataC1</td>
        <td>dataC2</td>
        <td>dataC3</td>
      </tr>
    </table>

  </body>
</html>

0

You need to add a final row that actually contains five cells for the behaviour of colspan="2" to be visible.

Then add a width to th and td皇冠hg0088代理网址 to maintain the correct styles, and you can hide the empty row to match your design.

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

.title {
  padding: 10px;
}

th, td {
  width: 20%;
}     
<h1>Table</h1>

<table>
  <tr>
    <th colspan="4" class="title">A common header for three subheads</th>
    <th rowspan="2">Header 3</th>
  </tr>
  <tr>
    <th>Header 1</th>
    <th colspan="3">Header 2</th>
  </tr>
  <tr>
    <th>Thing A</th>
    <td colspan="2">dataA1</td>
    <td>dataA2</td>
    <td>dataA3</td>
  </tr>
  <tr>
    <th>Thing B</th>
    <td colspan="2">dataB1</td>
    <td>dataB2</td>
    <td>dataC3</td>
  </tr>
  <tr>
    <th>Thing C</th>
    <td colspan="2">dataC1</td>
    <td>dataC2</td>
    <td>dataC3</td>
  </tr>
  <tr style="visibility: hidden;" aria-hidden="true">
    <th></th><td></td><td></td><td></td><td></td>
  </tr>
</table>

| improve this answer | |
2

"data A1" and the two cells below it do span two columns, and "Header2 " does皇冠hg0088代理网址 span three columns, but there is no row where you would see this additional divison between column two and three. If you add a row with five cells you see what I mean (I only added that last row, I didn't change your code otherwise):

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

.title {
  padding: 10px;
}
<h1>Table</h1>

<table>
  <tr>
    <th colspan="4" class="title">A common header for three subheads</th>
    <th rowspan="2">Header 3</th>
  </tr>
  <tr>
    <th>Header 1</th>
    <th colspan="3">Header 2</th>
  </tr>
  <tr>
    <th>Thing A</th>
    <td colspan="2">dataA1</td>
    <td>dataA2</td>
    <td>dataA3</td>
  </tr>
  <tr>
    <th>Thing B</th>
    <td colspan="2">dataB1</td>
    <td>dataB2</td>
    <td>dataC3</td>
  </tr>
  <tr>
    <th>Thing C</th>
    <td colspan="2">dataC1</td>
    <td>dataC2</td>
    <td>dataC3</td>
  </tr>
 <tr>
    <th>Thing D</th>
    <td>dataD1a</td>
    <td>dataD2</td>
    <td>dataD3</td>
    <td>dataC4</td>
  </tr>
</table>

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.