HTML 列表与表格

1、无序列表

<ul>
    <li>香蕉</li>
    <li>火龙果</li>
    <li>龙眼</li>
    <li>西瓜</li>
</ul>

标签名	说明
ul	表示无序列表的整体，用于包裹 li标签
li	表示无序列表的每一项，用于包含每一项内容

可在CSS内添加 list-style: none; 去除无序列表默认显示的小圆点

2、有序列表

<ol>
    <li>香蕉</li>
    <li>火龙果</li>
    <li>龙眼</li>
    <li>西瓜</li>
</ol>

标签名	说明
ol	表示有序列表的整体，用于包裹 li 标签
li	表示有序列表的每一项，用于包含每一项内容

3、自定义列表

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>

标签名	说明
dl	表示自定义列表的整体，用于包裹 dt/dd 标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

4、表格

框架

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

表格table属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

表头、标题属性

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格顶部居中位置展示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内容文字居中加粗显示

展示

<table border="2" width="200" height="200">
        <caption>学生成绩单</caption>
           <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>等级</th>
           </tr>
           <tr>
                <td>张三</td>
                <td>100</td>
                <td>A</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>100</td>
                <td>A</td>
            </tr>
            <tr>
                <td>总结</td>
                <td>真厉害</td>
                <td>真厉害</td>
            </tr>
    

5、表格合并单元格

通过左上原则，确定保留谁删除谁

• 上下合并→只保留最上的，删除其他的
• 左右合并→只保留最左的，删除其他的

给保留的单元格设置，跨行合并（rowspan）或跨列合并（colspan）

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列单元格水平合并

<table border="1" width="200" height="200">
        <caption>学生成绩单</caption>
               <tr>
                    <th>姓名</th>
                    <th>成绩</th>
                    <th>等级</th>
               </tr>
               <tr>
                    <td>张三</td>
                      <!-- 2代表 将两行单元格合并 -->
                    <td rowspan="2">100</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>李四</td>
                  <!-- <td>100</td> -->
                    <td>A</td>
                </tr>
                <tr>
                    <td>总结</td>
                    <!-- 2代表 将两列单元格合并 -->
                    <td colspan="2">真厉害</td>
                     <!-- <td>真厉害</td> -->
                </tr>
</table>