首页 > 网站开发 > JavaScript教程 >
-
WEB前端第四课——HTML列表与表格
1.<ul></ul> 无序列表标签
<ul><li></li></ul> 组合标签,其他标签是不允许组合的
<li></li> 标签是一个容器,可任意容纳所有的元素
列表是自带样式属性的
常用type属性:disc 实心圆(默认)、circle 空心圆、square 小方块、none 不显示
语法示例:<ul type="circle">
<li>列表内容</li>
<li>列表内容</li>
</ul>
2.<ol></ol> 有序列表标签,与无序列表类似
常用type属性:1 表示列表项目用阿拉伯数字标号(1,2,3...)
a 表示列表项目用小写英文字母标号(a,b,c...)
A 表示列表项目用大写英文字母标号(A,B,C...)
i 表示列表项目用小写罗马数字标号(ⅰ,ⅱ,ⅲ...)
I 表示列表项目大写罗马数字标号(Ⅰ,Ⅱ,Ⅲ...)
语法结构同无序列表
3.<dl></dl> 自定义列表标签,自定义列表默认为两个层次,第一层为列表项标签(<dt></dt>),第二层为注释项标签(<dd></dd>),一般用于对术语或名词的解释和描述
语法示例:<dl>
<dt> 列表项目1</dt>
<dd>项目1注释</dd>
<dt>列表项目2</dt>
<dd>项目2注释</dd>
</dl>
4.表格常用标签
<table></table> 定义表格
<caption></caption> 定义表格标题
<tr></tr> 定义表行,只能包含<td>或<th>标签
<td></td> 定义单元格
<th></th> 定义表格页眉单元格
<thead></thead> 定义表格头
<tbody></tbody> 定义表格体
<tfoot></tfoot> 定义表格脚
5.表格语法示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
< table align="center" border="2" cellspacing="0" cellpadding="10" width="500px" height="30px" …………> < caption >商品出库表</ caption > < thead > < tr > < th >产品名称</ th > < th >业务日期</ th > < th >出库数量</ th > </ tr > </ thead > < tbody > < tr > < td >纯牛奶</ td > < td >2020年2月2日</ td > < td >22箱</ td > </ tr > </ tbody > < tfoot > < tr > < td colspan="3">系统数据更新中。。。</ td > </ tr > </ tfoot > </ table > |
6.表格常用属性
width,表格宽度
height,表格高度
align,表格在页面中的水平位置
background,表格背景图片
bgcolor,表格背景颜色
border,表格边框宽度(px),默认没有边框
bordercolor,表格边框颜色(当border>=1时有效)
cellspacing,表格单元格之间的间距,默认值为“2px”。
border-spacing,表示单元格边框之间的距离,属性值为数字,
一个参数时表示水平和垂直两个方向的间距,
两个参数时,第一个表示水平间距,第二个表示垂直方向间距。
empty-cells,设置是否显示空单元格边框,属性值:show(显示)、hide(不显示),默认值为“show”
border-collapse,表示单元格边框是否合并,
属性值:collapse(合并为单一边框,忽略border-spacing和empty-cells设置)、separate(边框分开,不重叠)、inherit(继承),
默认值为“separate”。
cellpadding,单元格内容与单元格边框之间空白的距离
7.表格行常用属性
height,行高
align,行内容水平对齐方式,参数值“left,center,right”
valign,行内容垂直对齐方式,参数值“top,middle,bottom”
bgcolor,行背景颜色
8.表格列常用属性
width/height,单元格宽度/高度
align,列内容水平对齐方式
valign,列内容垂直对齐方式
bgcolor,列背景颜色
colspan,设置列单元格合并
rowspan,设置行单元格合并
9.单元格合并示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >创建表格测试</ title > </ head > < body > < table border="2px" width="600px" height="600px" align="center" cellspacing="0"> < caption >测试表</ caption > < tr > < td colspan="2"></ td > < td rowspan="2"></ td > </ tr > < tr > < td rowspan="2"></ td > < td ></ td > </ tr > < tr > < td colspan="2"></ td > </ tr > </ table > </ body > </ html > |
本文链接:https://www.cnblogs.com/husa/p/13325220.html