html HTML5排版详细笔记第二个模块

最新推荐文章于 2022-10-17 09:18:28 发布

VIP文章抹泪的知更鸟

最新推荐文章于 2022-10-17 09:18:28 发布

阅读量816

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_51596354/article/details/122372143

版权

HTML5排版详细笔记

- HTML 表格

掌握HTML表格的基本使用
掌握HTML表格排版的技术 重点
掌握HTML整体页面排版的技术 重点 难点
掌握HTML内联框架的使用场景
掌握HTML内联框架的使用方法

HTML 表格

页面中默认文字大小占16个像素

HTML表格标签

标签	描述
`<table>`	表格
`<th>`	表格的表头单元格
`<tr>`	表格的行
`<td>`	表格单元格
`<caption>`	表格标题
`<thead>`	表格的头部区域
`<tbody>`	表格的中间主体部分
`<tfoot>`	表格的底部区域

table属性

属性	值	描述
align	left \|center\| right	~~HTML5 不支持。HTML 4.01 已废弃~~。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx 颜色名称	~~HTML5 不支持。HTML 4.01 已废弃~~。规定表格的背景颜色。
cellpadding	像素	~~HTML5 不支持~~。单元边格沿与其内容之间的空白。
cellspacing	像素	~~HTML5 不支持~~。单元格之间的空白。
width	像素\|百分百	~~HTML5 不支持~~。表格的宽度。
height	像素\|百分百	~~HTML5 不支持~~。表格的高度
border	像素，默认值1	规定表格单元是否拥有边框。

th和td属性

属性	值	描述
align	left\| right \|center	~~HTML5 不支持~~。规定单元格内容的水平对齐方式。
bgcolor	rgb(x,x,x) \|#xxxxxx \|颜色名称	~~HTML5 不支持。HTML 4.01 已废弃~~。规定单元格的背景颜色。
height	像素\|百分百	~~HTML5 不支持。HTML 4.01 已废弃~~。设置单元格的高度。
valign	top\| middle\| bottom \|baseline	~~HTML5 不支持~~。规定单元格内容的垂直排列方式。
width	像素\|百分百	~~HTML5 不支持。HTML 4.01 已废弃~~。规定单元格的宽度。
colspan	列数	规定单元格可横跨的列数。Column
rowspan	列数	设置单元格可纵跨的行数。Row

案例01：制作计算器

	<table border="5" bgcolor="antiquewhite" cellpadding="20" cellspacing="10">
		<tr >
			<td>deli</td>
			<th bgcolor="beige" colspan="4" ></th>
		</tr>
		<tr>
			<th>M+</th>
			<th>M-</th>
			<th>MRC</th>
			<th>GT</th>
			<th>CE</th>
		</tr>
		<tr>
			<th>7</th>
			<th>8</th>
			<th>9</th>
			<th>/</th>
			<th>&gt;</th>
		</tr>
		<tr>
			<th>4</th>
			<th>5</th>
			<th>6</th>
			<th>X</th>
			<th>%</th>
		</tr>
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>-</th>
			<th bgcolor="aquamarine" rowspan="2">=</th>
		</tr>
		<tr>
			<th>C</th>
			<th>0</th>
			<th>.</th>
			<th>+</th>
		</tr>
	</table>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tafe297k-1641559743071)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220107151606284.png)]$

案例02：制作课程表

	--<table border="5" bgcolor="antiquewhite" cellpadding="5" cellspacing="10">
		<tr>
			<td bgcolor="aquamarine" colspan="8" align="center"><font size="5" color="red">小学六年级课程表</font></td>
		</tr>
		<tr>
			<td colspan="2">时间</td>
			<td>节次</td>
			<td>星期一</td>
			<td>星期二</td>
			<td>星期三</td>
			<td>星期四</td>
			<td>星期五</td>
		</tr>
		<tr>
			<td rowspan="4">上午</td>
			<td>1</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>英语</td>


		</tr>
		<tr>
			<td>2</td>
			<td>英语</td>
			<td>语文</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>英语</td>
		</tr>
		<tr>
			<td>3</td>
			<td>英语</td>
			<td>数学</td>
			<td>英语</td>
			<td>数学</td>
			<td>语文</td>
			<td>英语</td>
		</tr>
		<tr>
			<td>4</td>
			<td>英语</td>
			<td>数学</td>
			<td>语文</td>
			<td>英语</td>
			<td>数学</td>
			<td>英语</td>
		</tr>
		<tr bgcolor="beige">
			<td align="center" colspan="8">午休</td>
			
		</tr>
		<tr>
			<td rowspan="3">下午</td>
			<td>5</td>
			<td>数学</td>
			<td>数学</td>
			<td>英语</td>
			<td>语文</td>
			<td>英语</td>
			<td>数学</td>
		</tr>
		<tr>
			<td>6</td>
			<td>英语</td>
			<td>数学</td>
			<td>英语</td>
			<td>数学</td>
			<td>英语</td>
			<td>数学</td>
		</tr>
		<tr>
			<td>7</td>
			<td>数学</td>
			<td>英语</td>
			<td>数学</td>
			<td>英语</td>
			<td>数学</td>
			<td>英语</td>
		</tr>
	</table>
</body>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PqxCCR8X-1641559743073)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220107162226057.png)]$

案例03：统计表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>业务统计表</title>
	</head>
	<body>
		<table border="1" cellpadding="5" align="center" bgcolor="lemonchiffon">
			<tr bgcolor="blanchedalmond" align="center">
				<td colspan="12" align="center">受理员业务统计表</td>
			</tr>
			<tr>
				<td colspan="12" align="right" bgcolor="aliceblue">2020-01-01---2021-01-01</td>
			</tr>
			<tr align="center" bgcolor="aquamarine">
				<td rowspan="2">受理员</td>
				<td rowspan="2">受理数</td>
				<td rowspan="2">自办数</td>
				<td rowspan="2">直接解答</td>
				<td colspan="2">拟办意见</td>
				<td colspan="2">返回修改</td>
				<td colspan="3">工单类型</td>
			</tr>
			<tr align="center">
				<td >同意</td>
				<td>比例</td>
				<td>数量</td>
				<td>比例</td>
				<td>建议件</td>
				<td>诉求件</td>
				<td>咨询件</td<

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
html HTML5排版详细笔记第二个模块

HTML5排版详细笔记HTML 表格table属性th和td属性案例01：制作计算器案例02：制作课程表案例03：统计表案例04：制作导航栏案例05：实现图文排版掌握HTML表格的基本使用掌握HTML表格排版的技术重点掌握HTML整体页面排版的技术重点难点掌握HTML内联框架的使用场景掌握HTML内联框架的使用方法HTML 表格页面中默认文字大小占16个像素HTML表格标签标签描述<table>表格<th>表格的表头单元格
复制链接

扫一扫