代码,数据是随便写的
<table>
<caption> 各项数据 </caption>
<!-- 标题 -->
<thead>
<tr>
<th scope="col" rowspan="2" colspan="2"></th>
<th scope="col" rowspan="2">种类</th>
<th scope="col" rowspan="2">图片</th>
<th scope="col" rowspan="2">Calories</th>
<th scope="col" colspan="4" rowspan="1">Fat (g)</th>
<th scope="col" rowspan="2">Cholesterol (mg)</th>
<th scope="col" rowspan="2">Cholesterol (mg)</th>
<th scope="col" rowspan="2">Vitamin A (IU)</th>
</tr>
<tr>
<th scope="col">Saturated Fat (g)</th>
<th scope="col">Trans Fat (g)</th>
<th scope="col">Polyunsaturated Fat (g)</th>
<th scope="col">Monounsaturated Fat (g)</th>
</tr>
<tbody>
<tr>
<th scope="row" rowspan="4">breakfast </th>
<th scope="row" rowspan="2">bread</th>
<th scope="row" rowspan="1">Gluten-Free
</th>
<td><img src="img/1.jpeg"/> </td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<th scope="row" rowspan="1">
Gluten Free Cinnamon Raisin Bagels
</th>
<td><img src="img/2.jpeg"/></td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<th scope="row" rowspan="2">Drinks</th>
<th scope="row" rowspan="1">
Chocolate Pumpkin Smoothie
</th>
<td><img src="img/3.jpeg"/></td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<th scope="row" rowspan="1">
Peanut Butter and Jelly Smoothie123
</th>
<td><img src="img/4.jpeg"/></td>
<td>145</td>
<td>145</td>
<td>145</td>
<td>145</td>
<td>145</td>
<td>145</td>
<td>145</td>
<td>145</td>
</tr>
<tr>
<th scope="row" rowspan="4">lunch</th>
<th scope="row" rowspan="2">cuisine </th>
<th scope="row" rowspan="1">Mexican Pasta Salad</th>
<td><img src="img/5.jpeg"/></td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<th scope="row" rowspan="1">Keto Taco Bowl</th>
<td><img src="img/6.jpeg"/></td>
<td>785</td>
<td>785</td>
<td>785</td>
<td>785</td>
<td>785</td>
<td>785</td>
<td>785</td>
<td>785</td>
</tr>
<tr>
<th scope="row" rowspan="2">Sandwishes</th>
<th scope="row" rowspan="1">Honey BBQ Chicken Salad</th>
<td><img src="img/7.jpeg"/></td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<th scope="row" rowspan="1">Chef’s Salad Lettuce Wraps</th>
<td><img src="img/3.jpeg"/></td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</tbody>
</thead>
</table>
表格不能自动响应: 当你使用正确的布局容器 它们的默认宽度是父元素的 100%.
colspan=“number” 跨number行 同理td
th rowspan=“number” 跨number列 同理td
rowspan=“0” 告知浏览器使单元格横跨到表格组件中的最后一个行(thead、tbody 或 tfoot)
• thead需要嵌套在 table 元素中,放置在头部的位置,因为它通常代表第一行,第一行中往往都是每列的标题,但是不是每种情况都是这样的。
• tfoot 需要嵌套在 table 元素中,放置在底部 (页脚)的位置,一般是最后一行,往往是对前面所有行的总结。
• tbody 需要嵌套在 table 元素中,放置在 thead的下面或者
scope属性 (设置在th,html5不支持td)有两个可选的值 : colgroup 和 rowgroup。将其标记表头。
colgroup标签用于对html表格中的列进行组合,以便对其进行格式化,是用于设置css样式的。可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。
colgroup标签只能在table元素之内,在任何一个caption元素之后,在任何一个 thead、tbody、tfoot、tr元素之前使用;
colgroup标签设置的样式会被col标签设置的样式覆盖。
每一个tr标签代表着一行 ,编写表格时需要注意计算格子数和tr长度匹配,尤其在编写跨列表格时。