1.2-HTML基础--列表用法、表格用法_表格 td 什么表情包裹-CSDN博客

文章目录

无序列表
有序列表
自定义列表
表格的用法
合并单元格

无序列表

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

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

香蕉
火龙果
龙眼
西瓜

可在css内添加 list-style: none; 去除小圆点

有序列表

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

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

香蕉
火龙果
龙眼
西瓜

自定义列表

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

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

帮助中心

账户管理

购物指南

订单操作

表格的用法

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

表格属性

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

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

源码展示



<table border="2" width="100" height="100">
	<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>
</table>

效果展示

学生成绩单
姓名	成绩	等级
张三	100	A
李四	100	A
总结	真厉害	真厉害

合并单元格

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

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

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

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

<table border="1" width="5" height="5">
<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>