How to create this HTML table

问题

How can I create a table with the following layout?

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.

回答1:

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>

回答2:

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>

回答3:

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>

回答4:

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>

来源：https://stackoverflow.com/questions/44859128/how-to-create-this-html-table

标签

html

html-table