Different number of Columns in rows of a table

html-table, javascript

Solution

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

jsFiddle

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="3">&nbsp;</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">&nbsp;</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td></td>
    </tr>
    <tr>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
    </tr>
</table>

Update

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

jsFiddle

<table>
    <tr>
        <td>&nbsp;</td>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
        <td colspan="2">&nbsp;</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%;
}

Problem

Is it possible to create a table with different number of cells in each and every row with the same width and height ..?? If so how it can be done in a simpler way ..??? Note: - Row width and height are same Cell width differs in each and every row ``` <table> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="2">&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="3">&nbsp;</td> </tr> ``` This is what i have tried using coll span ..Here let's say first row cells width is 30px,30px,30px . if i use coll span , it will be like 60px,30px but i want it as 50px,40px with only 2 cells I want like this

Original source