表问题

Question

我正在尝试创建一个类似于下图的表格。

正如您在一列中看到的那样，还有两列，这对我来说有点棘手。我很难搞清楚这一点。这是我的代码：

<table style="width:80%" border="1">
<tr>
    <th colspan="3">RESIDENTIAL CARPET CLEANING FREQUENCY CHART</th>
</tr>

  <tr>
    <th>Traffic Soil Rating</th>
    <th>Carpet Owner / Maintainer</th>      
    <th>Professional Carpet Cleaner / Restorer</th>
  </tr>


  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>

这里是jSFiddle：https://jsfiddle.net/xLdg6n9p/

知道怎么做吗？

Answer 1

交通土壤似乎比其他列略低，所以我会这样做：（fiddle）

.soil {
  font-weight: bold;
}
table {
  font-size: 11pt;
}
td {
  max-width: 15%;
  text-align: center;
}

<table style="width:100%" border="0">
  <tr>
    <th colspan="5">RESIDENTIAL CARPET CLEANING FREQUENCY CHART</th>
  </tr>

  <tr>
    <th colspan="1"></th>
    <th colspan="2">Carpet Owner / Maintainer</th>
    <th colspan="2">Professional Carpet Cleaner / Restorer</th>
  </tr>


  <tr>

    <th class="soil">Traffic Soil Rating</th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th>Vacuuming</th>
    <th>Spot Cleaning</th>
    <th>Heavy Use</th>
    <th>Restorative</th>
  </tr>

  <tr>
    <td class="soil">Light</td>


    <td>1-2 times a week</td>
    <td>Daily or as soon as spots are noticed</td>
    <td>Stuff</td>
    <td>Stuff</td>
  </tr>
</table>

Answer 2

您需要考虑具有五列的每一行，然后使用colspan，其中一行中的单元格跨越多列。例如：

<table style="width:80%" border="1">
<tr>
    <th colspan="5">RESIDENTIAL CARPET CLEANING FREQUENCY CHART</th>
</tr>

  <tr>
    <th colspan="2">Traffic Soil Rating</th>
    <th>Carpet Owner / Maintainer</th>      
    <th colspan="2">Professional Carpet Cleaner / Restorer</th>
  </tr>


  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
    <td>Other</td>        
    <td>Stuff</td>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
    <td>Other</td>        
    <td>Stuff</td>
  </tr>
</table>

因此，每个<tr>应该总共有5个<td>个元素（或者使用colspans相当于5个元素）。

Answer 3

您可以使用<table width="100%" border="1"> <tbody> <tr> <th>Name</th> <th colspan="2">Easy</th> <th colspan="2">Normal</th> <th colspan="2">Hard</th> </tr> <tr> <th></th> <th colspan="2">Score</th> <th colspan="2">Score</th> <th colspan="2">Score</th> </tr> <tr> <th></th> <th>Qz1</th> <th>Qz2</th> <th>Qz1</th> <th>Qz2</th> <th>Qz1</th> <th>Qz2</th> </tr> <tr> <th>Davy Jones</th> <td>1</td> <td>4</td> <td>2</td> <td>5</td> <td>3</td> <td>6</td> </tr> </tbody> </table>来解决问题。这是an example：

{{1}}