首页使用html 完成下面的表格布局案例（选题、配色、图片都可以自主修改）

使用html 完成下面的表格布局案例（选题、配色、图片都可以自主修改）

时间: 2024-09-07 14:06:58 浏览: 74

为了创建一个简单的HTML表格布局，我们可以使用`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）标签。这里是一个基础的表格示例，包含了选题（列名）、颜色选择以及图片展示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; font-weight: bold; } .color-cell { width: 150px; height: 100px; display: flex; align-items: center; justify-content: center; } img { max-width: 100%; height: auto; } </style> </head> <body> <h2>选题颜色搭配及图片展示</h2> <table> <thead> <tr> <th>选题</th> <th>颜色</th> <th>图片</th> </tr> </thead> <tbody> <tr> <td>主题A</td> <td class="color-cell"> <div style="background-color: #FF0000;">红色</div> </td> <td><img src="image1.jpg" alt="主题A图片"></td> </tr> <tr> <td>主题B</td> <td class="color-cell"> <div style="background-color: #00FF00;">绿色</div> </td> <td><img src="image2.jpg" alt="主题B图片"></td> </tr>  </tbody> </table> </body> </html> ``` 在这个例子中，我们为每一项选题设置了颜色区（`.color-cell`类），并给图片添加了占位样式。你可以替换`src`属性中的图片路径，并根据需要调整颜色和图片内容。

阅读全文