根據提供的圖像設計 HTML 表格
P粉536909186
P粉536909186 2023-09-14 21:34:49
0
1
454

我需要根據上圖的表格結構製作一個html表格。我嘗試了很多方法,但我做不到。

請幫我建立 Html 表格。

P粉536909186
P粉536909186

全部回覆(1)
P粉148782096

在這裡,我在標題單元格上使用 colspan 使其佔據多個單元格的寬度,然後在單元格上使用 rowspan 使其垂直擴展多行。

這可以讓你 90% 的圖片顯示出來。垂直/旋轉文字是可能的,但不是這個問題的內容,所以我沒有做這一部分。

table{
  border-collapse: collapse;
}
td,th {
  padding: 3px;
  border: 1px solid #333;
}
th {
  background: #CCC;
}
.blank {
  background: #FFF;
  border: none;
}
<table>
  <thead>
    <tr>
      <th colspan="3" class="blank"></th>
      <th colspan="8">Attribute Name 1</th>
    </tr>
  </thead>
  <thead>
    <tr>
      <th colspan="3" class="blank"></th>
      <th colspan="2">Attribute 1 Value 1</th>
      <th colspan="2">Attribute 1 Value 2</th>
      <th colspan="2">Attribute 1 Value 3</th>
      <th colspan="2">Attribute 1 Value 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="32" class="vertical-text">Attribute Name</th>
      <th rowspan="4" class="vertical-text">Attribute 2 Value 1</th>
      <th>Price Category 1</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 3</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="4" class="vertical-text">Attribute 2 Value 2</th>
      <th>Price Category 1</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 3</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="4" class="vertical-text">Attribute 2 Value 3</th>
      <th>Price Category 1</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 3</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="4" class="vertical-text">Attribute 2 Value 4</th>
      <th>Price Category 1</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 3</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Price Category 4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板