搜索

首页  >  问答  >  正文

根据提供的图像设计 HTML 表格

我需要根据上图中的表格结构制作一个html表格。我尝试了很多方法,但我做不到。

请帮我创建 Html 表格。

P粉536909186P粉536909186467 天前456

全部回复(1)我来回复

  • P粉148782096

    P粉1487820962023-09-15 19:08:55

    在这里,我在标题单元格上使用 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>

    回复
    0
  • 取消回复