Here, I use colspan on the header cell so that it takes up multiple cells' width, and then rowspan on the cell so that it extends vertically across multiple rows.
This allows 90% of your images to be displayed. Vertical/rotating text is possible, but not what this question is about, so I didn't do that part.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Here, I use
colspanon the header cell so that it takes up multiple cells' width, and thenrowspanon the cell so that it extends vertically across multiple rows.This allows 90% of your images to be displayed. Vertical/rotating text is possible, but not what this question is about, so I didn't do that part.
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>