CODEWITHSUNDEEP
htmlhtml-table
PapT
PapT

Reputation: 623

How to create this HTML table with row tds spanning multiple columns

How can I create a table with the following layout?

enter image description here

I'm having problem with the second and third td in the first row. I've been playing with colspan but couldn't get it to work.

Upvotes: 2

Views: 6692

Answers (4)

Shanil Fernando
Shanil Fernando

Reputation: 1322

You must consider 7 columns initially. Try following

table, th, td {
    border: 1px solid black;
    }
    <table style="width:100%">
      <tr>
        <td>Jill</td>
        <td colspan="3">Smith</td>
        <td  colspan="3">Smith</td>
      </tr>
      <tr>
         <td>Jill</td>
        <td colspan="2">Smith</td>
        <td colspan="2">50</td>
        <td colspan="2">Jill</td>
      </tr>
    </table>

Upvotes: 0

TSungur
TSungur

Reputation: 406

The colspan will always align to the upper/lower row column. To tackle the problem find a common multiplier of merging cells (in your case 6. 6 can be grouped in 3x2 width span or 2x3 width span). Create a table with 1 (common leftmost column)+6 columns total 7 columns. Then merge for top row 3 columns and again 3 columns. For second row merge 2 columns 3 times.

Like this:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td colspan="3">&nbsp;</td>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>

Upvotes: 0

Johannes
Johannes

Reputation: 67738

Think of a table with 7 cells per row to get that cell distribution (1 + ( 2 * 3 ) cells) and use colspan attributes as follows :

table {
width: 100%;
}
td {
  border: 1px solid #777;
  padding: 10px;
}
td:first-child {
  width: 30%;
}
<table>
  <tr>
    <td>a</td>
    <td colspan="3">b</td>
    <td colspan="3">c</td>
  </tr>
  <tr>
    <td>a</td>
    <td colspan="2">b</td>
    <td colspan="2">c</td>
    <td colspan="2">d</td>

  </tr>
</table>

Upvotes: 4

Saurabh Parekh
Saurabh Parekh

Reputation: 449

Try this

             <table>
                <tr>
                    <td>td</td>
                    <td>
                        <table>
                            <tr>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>td</td>
                    <td>
                        <table>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

Upvotes: -1

Related Questions