Question

我正在尝试创建一个具有以下结构的表。

我一直在阅读各种网站和博客，试图自己创建，但我失败了，非常非常，并决定在这里寻求帮助。

到目前为止，我已经能够创建外部结构：

<table border='1' style="width:100%">
  <tr>
    <td>Foo</td>
    <td>Bar</td> 
  </tr>
  <tr>
    <td>Bak</td>
    <tr></tr>
    <td>Baz</td> 
  </tr>
  <tr>
    <td>Foo</td>
    <td>Bar</td> 
  </tr>
  <tr>
    <td>Bak</td>
    <td>Baz</td> 
  </tr>  
</table>

但我无法弄清楚如何为名称，数字和费用添加字段。我如何筑巢？

Answer 1

您需要使用rowspan JSFIDDLE

<table border="1">
    <tr>
        <td rowspan="3"></td>
        <td>Name</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>Number</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>cost</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="3"></td>
        <td>Name</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>Number</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>cost</td>
        <td>&nbsp;</td>
    </tr>
</table>

Answer 2

使用rowspan使单元格显示在多行中，headers将数据单元格与不在传统位置的标题单元格相关联，并使用tbody来描述细分一张桌子。

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

<table>
    <tbody>
        <tr>
            <td rowspan="3"> ...
            <th id="name_1"> Name
            <td headers="name_1"> ...
        <tr>
            <th id="number_1"> Number
            <td headers="number_1"> ...
        <tr>
            <th id="cost_1"> Cost
            <td headers="cost_1"> ...
    <tbody>
        <tr>
            <td rowspan="3"> ...
            <th id="name_2"> Name
            <td headers="name_2"> ...
        <tr>
            <th id="number_2"> Number
            <td headers="number_2"> ...
        <tr>
            <th id="cost_2"> Cost
            <td headers="cost_2"> ...
</table>

Answer 3

尝试摆弄fiddle

<table border='1' style="width:100%">
  <tr>
    <td>1</td>
    <td>2</td> 
    <td>3</td> 
  </tr>
  <tr>
    <td rowspan="3">some</td>
    <td>Name</td>  
    <td>11</td>
  </tr>
  <tr>
    <td>No</td>
    <td>22</td>
  </tr>
  <tr>
    <td>Cost</td>
    <td>22</td>
  </tr>


</table>

Answer 4

用户rowspan

＆＃13;

<table border="1">
  <tr>
    <td rowspan="3">Data Section 1</td>
    <td>Some Data 1.1</td>
  </tr>
  <tr>
    <td>Some Data 1.2</td>
  </tr>
   <tr>
    <td>Some Data 1.3</td>
  </tr>
  <tr>
    <td rowspan="3">Data Section 2</td>
    <td>Some Data 2.1</td>
   </tr>
  <tr>
    <td>Some Data 2.2</td>
  </tr>
   <tr>
    <td>Some Data 2.3</td>
  </tr>
</table>

＆＃13;

Answer 5

<table border='1' style="width: 100%">
    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>

    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>

</table>

Answer 6

一般来说就像这样

<table border="1">
  <tr>
    <td rowspan="3">1</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td rowspan="3">2</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td rowspan="3">3</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>17</td>
    <td>18</td>
  </tr>
</table>

http://jsfiddle.net/s5b0c5d9/

如何创建具有以下结构的HTML表？

6 个答案: