HTML Table Different Number of Columns in Different Rows

HTML Table different number of columns in different rows

On the realisation that you're unfamiliar with colspan, I presumed you're also unfamiliar with rowspan, so I thought I'd throw that in for free.

One important point to note, when using rowspan: the following tr elements must contain fewer td elements, because of the cells using rowspan in the previous row (or previous rows).

table {

  border: 1px solid #000;

  border-collapse: collapse;

}

th,

td {

  border: 1px solid #000;

}

<table>

  <thead>

    <tr>

      <th colspan="2">Column one and two</th>

      <th>Column three</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td rowspan="2" colspan="2">A large cell</td>

      <td>a smaller cell</td>

    </tr>

    <tr>

      <!-- note that this row only has _one_ td, since the preceding row

                     takes up some of this row -->

      <td>Another small cell</td>

    </tr>

  </tbody>

</table>

Different number of Columns in rows of a table

You can use colspan to create cells that span multiple columns.

jsFiddle

<table>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td colspan="2"> </td>
        <td> </td>
    </tr>
    <tr>
        <td colspan="3"> </td>
    </tr>
</table>

If you want all to be the same width and height but only have the number of cells differ you can just not style certain cells in the <table>.

jsFiddle

<table>
    <tr>
        <td class="content"> </td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="content"> </td>
        <td class="content"> </td>
        <td></td>
    </tr>
    <tr>
        <td class="content"> </td>
        <td class="content"> </td>
        <td class="content"> </td>
    </tr>
</table>

Update

Your update with the image, yes you can accomplish this using colspan:

jsFiddle

<table>
    <tr>
        <td> </td>
        <td colspan="2"> </td>
        <td> </td>
    </tr>
    <tr>
        <td colspan="2"> </td>
        <td colspan="2"> </td>
    </tr>
</table>

This uses four columns, the middle two are smaller than the others, here is an image that illustrates how the columns are set up:

Update #2

Here is an example of more randomly sizes cells. The first row 10%, 90% and the second row 55%, 45%.

jsFiddle

HTML

<table>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
</table>

CSS

table {
    width:100px;
}
td {
    border: 1px solid #000;
    height:1em;
}
tr:first-child td:first-child {
    width:10%;
}
tr:first-child td:last-child {
    width:90%;
}
tr:last-child td:first-child {
    width:55%;
}
tr:last-child td:last-child {
    width:45%;
}

Can HTML table have variable number of cells on rows?

That does not violate the definition. But you should use the colspan attribute to expand the column to the whole row:

<table>
  <tr>
    <td>Row with</td>
    <td>2 cols</td>
  </tr>
  <tr>
    <td colspan="2">Row with only one col</td>
  </tr>
</table>

That will also help if you have borders around the cells.

You can even have tables with a column that expands to two rows:

<table>
  <tr>
    <td rowspan="2">First column in row 1 and row 2</td>
    <td>Second column in row 1</td>
  </tr>
  <tr>
    <td>second column in row 2</td>
  </tr>
</table>

Different number of columns for each row

I would build this layout as follows.

For the HTML:

<div class="parent">
     <div class="row r3">
            <div class="cell">aaaa</div>
            <div class="cell">bbbbb</div>
            <div class="cell">ccccc</div>
      </div>
      <div class="row r2">
            <div class="cell">ddddd</div>
            <div class="cell">eeeee</div>
      </div>
      <div class="row r2">
            <div class="cell">fffff</div>
            <div class="cell">ggggg</div>
      </div>
      <div class="row r1">
            <div class="cell">last cell</div>
      </div>
</div>

and apply the following CSS:

.row {
    display: table;
    border: 1px dashed blue;
    width: 100%
}
.cell {
    display: table-cell;
    border: 1px dotted blue;
}
.r3 .cell {
    width: 33.333333%;
}
.r2 .cell {
    width: 50%;
}
.r1 .cell {
    width: 100%;
}

Use display: table for each div.row block element with 100% width.

You don't need to explicitly define a CSS table row, one will be created anonymously as needed.

See reference: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

See demo: http://jsfiddle.net/audetwebdesign/72yb5th2/

HTML table with different number of rows

You can do that using rowspan property. Here is a clue :

table tr td {

  border: 1px solid black;

  }

<table>

  <tr>

    <td rowspan="2">left</td>

    <td>T-right</td>

  </tr>

  <tr>

    <td>B-Right</td>

  </tr>

</table>

HTML tables split cells into different number of columns for different rows not performing as expected

To do what you want to do you need something along the lines of:

<table>
<tr>
  <td colspan="12">1/1</td>
</tr>
<tr>
  <td colspan="6">1/2</td>
  <td colspan="6">1/2</td>
</tr>
<tr>
  <td colspan="4">1/3</td>
  <td colspan="4">1/3</td>
  <td colspan="4">1/3</td>
</tr>
<tr>
  <td colspan="3">1/4</td>
  <td colspan="3">1/4</td>
  <td colspan="3">1/4</td>
  <td colspan="3">1/4</td>
</tr>
</table>

This way you can combine the number of cells you need. By the way I got the 12 by using the lowest common multiple of 4 and 3...

Is it possible to make table with different columns for different rows?

Your code renders an incomplete table, so some browsers might try to make it complete producing an unexpected result. But you can simply add another cell in the first row, leave it empty and make its border invisible:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
}

tr:first-of-type>td:last-child {
  border: none;
}

<table class="table table-bordered table-bordered">
  <tbody>
    <tr>
      <td width="25%">1П</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">2П</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">Прод.</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>
  </tbody>
</table>

Is it required for a HTML Table to have the same number of columns in all rows?

According to the w3c specs for HTML tables, under Calculating the number of columns in a table:

The number of columns is equal to the number of columns required by the row with the most columns, including cells that span multiple columns. For any row that has fewer than this number of columns, the end of that row should be padded with empty cells.

So no, each row does not need to have the same number of columns. The browser should handle it, as it follows the standard.

---

Related Topics