Html table HTML表格：想设计这样的表格结构吗

我有这个桌子结构

我不熟悉桌子的结构。我想像图中那样设计桌子。第一列的宽度应大于另一列，并且

表格{
背景：白色；
宽度：85%；
保证金：60像素自动；
边界间距：0；
}
th{
边框底部：2个黄色实体；
高度：30px；
字体大小：12px；
显示：表格单元格；
垂直对齐：底部对齐；
垫底：2件；
}

工作类别
数量
单价
价格

TH用于表格标题，因此对于包含数据的任何单元格，请使用TD。如果需要组合单元格，请使用rowspan和colspan，您可以使用以下资源熟悉它们：

世界其他地区学校：

科尔斯潘学校：

---

如果你想在一个专栏中添加样式，我建议你指定一个类，然后将该样式应用到特定的类中，你可以找到关于W3Schools的信息，这些信息解释得很好。

在这里。如果有任何问题，请在评论中提问

表格{
背景：白色；
宽度：85%；
保证金：60像素自动；
边界间距：0；
}
表，tr，th，td{
边框：2个黄色实心；
}
th，td{
高度：30px；
字体大小：12px；
显示：表格单元格；
垂直对齐：底部对齐；
垫底：2件；
}
.col1{
宽度：60%；
}
.col2{
宽度：9%；
}
.col3{
宽度：12%；
}
.col4{
宽度：19%；
}

工作类别
数量
单价
价格

试试这个

HTML

---

为什么没有使用

colspan

？我对html表结构不熟悉。所以我不知道如何使用它

<table>
<tr>
  <th align="left">
    Work Category
  </th>
  <th>
    Qty
  </th>
  <th>
    Unit/Price
  </th>
  <th>
    Price
  </th>
</tr>
<tr>
  <td align="left">
  </td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td align="left">
  </td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td align="left">
  </td>
  <td colspan="2"></td>
  <td></td>
</tr>

table{
  background: white;
  width: 85%;
  margin: 60px auto;
  /*border-spacing: 0;*/
  border-collapse:collapse;
}

th, td{
  height: 30px;
  font-size: 12px;
  display: table-cell;
  vertical-align: bottom;
  padding-bottom: 2px;
  border: 2px solid yellow;
  vertical-align: middle;
}

table th:first-child{
  width: 60%;
}

table th{
  width: 7%;
}

table th:last-child{
  width: 20%;
}