【HTML学习笔记六】表格和列表

表格

1.表格标签

  • table:定义表格
  • th:定义表头
  • tr:定义表的行
  • td:定义表的单元
  • caption:定义表格标题
  • colgroup:定义表格列的组
  • col:定义表格列的属性
  • thead:定义表格页眉
  • tbody:定义表格主体
  • tfoot:定义表格页脚
  • boder:表格边距
  • cellpadding:表格间距

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border = "1" cellpadding = "10">
			<thead>
				<td colspan = "3" align = "center">页眉</td>
			</thead>
			<tbody>
			<caption>FOOD</caption>
				<tr>
					<th colspan = "2">食物</th>
					<th rowspan = "2">饮料</th>
				</tr>
				<tr>
					<td>饺子</td><td>面条</td>
					
				</tr>
				<tr>
					<td>炸鸡</td><td>汉堡</td>
					<td>雪碧</td>
				</tr>
			</tbody>
			<tfoot>
				<td colspan = "3" align = "center">页脚</td>
			</tfoot>
		</table>
	</body>
</html>

结果:
在这里插入图片描述

列表

1.列表标签

  • ol:有序标签
  • ul:无序标签
  • li:列表项
  • dl:定义列表
  • dt:自定义列表项目
  • dd:自定列表项描述
  • type:根据给定参数排序,例如:“A”,“a”,"I"等等

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title>列表</title>
	</head>
	<body>
		<ol>
			<li>雪碧</li>
			<li>可乐</li>
			<li>芬达</li>
		</ol>
		<br/>
		<ol type = "A">
			<li>雪碧</li>
			<li>可乐</li>
			<li>芬达</li>
		</ol>
		<br/>
		<ul>
			<li>炸鸡</li>
			<li>汉堡</li>
			<li>快乐水</li>
		</ul>
		<br/>
		<dl>
			<dt>肥宅三件套</dt>
			<dd>炸鸡</dd><dd>汉堡</dd><dd>快乐水</dd>
		</dl>
	</body>
</html>

结果:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值