Concevoir un tableau HTML basé sur l'image fournie

Question

Je dois créer un tableau HTML basé sur la structure du tableau dans l'image ci-dessus. J'ai essayé de nombreuses façons mais je n'y arrive pas.

S'il vous plaît, aidez-moi à créer un tableau HTML.

Answer 1

Ici, j'utilise colspan 使其占据多个单元格的宽度，然后在单元格上使用 rowspan sur la cellule d'en-tête pour la faire s'étendre verticalement sur plusieurs lignes.

Cela permet à 90 % de vos photos d'apparaître. Le texte vertical/rotatif est possible, mais pas le sujet de cette question, donc je n'ai pas fait cette partie.

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>