如何使用以下結構創建HTML表格？

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引起細胞出現在多行，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 2

你需要使用行跨度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 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

<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>

Answer 5

在一般的方式是這樣

<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/

Answer 6

<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>