B21. 列表与表格
1.1 列表与表格的元素结构
1.1.1 HTML中的列表家族
"还记得Python中用方括号
[]表示列表吗？在HTML里我们用<ul>和<li>也能创建列表！但为什么购物清单用圆点，步骤说明用数字？它们的秘密都在标签名称里！"
html
<!-- 无序列表：适合不强调顺序的内容 -->
<ul>
<li>牛奶</li>
<li>鸡蛋</li>
<li>面包</li>
</ul>
<!-- 有序列表：适合需要编号的步骤 -->
<ol>
<li>打开冰箱</li>
<li>放入食材</li>
<li>关闭冰箱门</li>
</ol>⚠️ 易错点：<li>必须嵌套在<ul>或<ol>中，直接放在<body>里会显示错乱！
1.1.2 表格的骨架结构
"Excel表格有行和列，HTML表格有
<table>、<tr>、<td>，但为什么还要<th>？表头单元格有什么特别之处？"
html
<table>
<tr> <!-- 表格行 -->
<th>姓名</th> <!-- 表头单元格 -->
<th>年龄</th>
</tr>
<tr>
<td>张三</td> <!-- 普通单元格 -->
<td>16</td>
</tr>
</table>⚠️ 易错点：每个<td>必须放在<tr>里，直接放在<table>下会导致表格结构崩溃！
1.2 使用列表与表格实现基础效果
1.2.1 列表嵌套的妙用
"想制作多级菜单？把
<ul>套在<li>里试试！还记得Python中的嵌套列表吗？原理其实很像哦~"
html
<ul>
<li>早餐
<ul>
<li>豆浆</li>
<li>油条</li>
</ul>
</li>
<li>午餐
<ol>
<li>米饭</li>
<li>红烧肉</li>
</ol>
</li>
</ul>1.2.2 表格样式基础
"给表格加边框用CSS的
border属性？注意！直接写border="1"其实是HTML属性，和CSS有什么区别？"
html
<style>
table {
border-collapse: collapse; /* 让边框合并 */
}
td, th {
border: 1px solid black;
padding: 8px; /* 单元格内边距 */
}
</style>⚠️ 易错点：忘记写border-collapse: collapse;会导致边框出现双线！
1.3 表格合并单元格
1.3.1 跨列合并(colspan)
"想把『成绩』跨过语文、数学两列？
colspan就是你的合并工具！但合并后下一行怎么处理列数？"
html
<tr>
<th colspan="2">成绩</th>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
</tr>1.3.2 跨行合并(rowspan)
"班级名单中『高一1班』要跨多行显示？
rowspan来帮忙！但合并后右侧行要减少对应单元格数量"
html
<tr>
<td rowspan="3">高一1班</td>
<td>张三</td>
</tr>
<tr>
<!-- 这里不再写班级单元格 -->
<td>李四</td>
</tr>⚠️ 易错点：合并后忘记调整后续行的单元格数量会导致表格变形！
知识回顾
- 列表分有序(
<ol>)无序(<ul>)，列表项必须用<li>包裹 - 表格由
<table>包裹，<tr>定义行，<td>为数据单元格，<th>为表头 - 合并单元格：
colspan横向合并，rowspan纵向合并，需调整后续单元格数量 - 常见错误：标签嵌套错误、忘记闭合标签、合并后列数不对齐
课后练习
- （代码纠错）以下表格哪里有问题？
html
<table>
<td>姓名</td>
<tr>
<td>年龄</td>
</tr>
</table>（填空）合并3列应该用____属性，合并2行应该用____属性
（选择）下列哪个标签不能直接放在
<ul>里？- A
<li> - B
<div> - C
<ol> - D
<span>
- A
（项目）制作课程表：包含跨上午/下午的合并单元格，用CSS添加斑马纹效果（提示：使用
:nth-child()选择器）