html5表格多行多列.docx
- 文档编号:858043
- 上传时间:2022-10-13
- 格式:DOCX
- 页数:8
- 大小:16.54KB
html5表格多行多列.docx
《html5表格多行多列.docx》由会员分享,可在线阅读,更多相关《html5表格多行多列.docx(8页珍藏版)》请在冰豆网上搜索。
html5表格多行多列
竭诚为您提供优质文档/双击可除
html5表格多行多列
篇一:
html5-表格标签的属性
html5-表格标签的属性
讲师:
李南江
22-表格标签的属性
22-表格标签的属性
1.宽度和高度的属性
可以给table标签和td标签使用
1.1表格的宽度和高度默认是按照内容的尺寸来调整的,也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
1.2如果给td标签设置widht/height属性,会修改当前单元格的宽度和高度,不会影响整个表格的宽度和高度
2.水平对齐和垂直对齐的属性
其中水平对齐可以给table标签和tr标签和td标签使用
垂直对齐只能给tr标签和td标签使用
2.1给table标签设置align属性,可以控制表格在水平方向的对齐方式
2.2给tr标签设置align属性,可以控制当前行中所有单元格内容的水平方向的对齐方式
2.3给td标签设置align属性,可以控制当前单元格中内容在说方向的对齐方式
注意点:
如果td中设置了align属性,tr中也设置了align属性,那么单元格中的内容会按照td中设置的来对齐
2.4给tr标签设置valign属性,可以控制当前行中所有单元格中的内容,在垂直方向的对齐方式
2.5给td标签设置valign属性,可以控制当前单元格中的内容在垂直方向的对齐方式注意点:
如果td中设置了valign属性,tr中也设置了valign属性,那么单元格中的内容会按照td中设置的来对齐
3.外边距和内边距的属性
只能给table标签使用
3.1.外边距就是单元格和单元格之间的距离,我们称之为外边距
默认情况下单元格和单元格之间的外边距的距离是2px
3.2内边距就是单元格的边框和文字之间的间隙,我们称之为内边距
默认情况下内边距是1
注意:
以上讲解的内容仅仅作为了解,以后在企业开发中所有控制样式的都是通过css-->
1.1
1.2
2.1
2.2
篇二:
html5-表格标签的其它标签
html5-表格标签的其它标签
讲师:
李南江
24-表格标签的其它标签
24-表格标签的其它标签
1.表格标题
在表格标签中提供了一个标签专门用来设置表格的标题,这个标签叫做caption.只要将标题写在caption标签中,那么标题就会自动相对于表格的宽度居中
2.caption标签的注意点:
2.1caption一定要写在table标签中,否则无效
2.2caption一定要紧跟在table标签后面
3.标题单元格标签
3.1.在表格标签中提供了一个标签专门用来存储每一列的标题,这个标签叫做th标签,只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
3.2.到此为止我们就发现,其实表格中有两种单元格,一种是td,一种是th.td是专门用来存储数据的,th是专门用来存储当前列的标题的
-->
今日小说排行榜
排名
关键词
趋势
今日搜索
最近七日
相关链接
1
暴走大事件
623557
4088311
贴吧
图片
百科
1
暴走大事件
623557
4088311
贴吧
图片
百科
1
暴走大事件
623557
4088311
贴吧
图片
百科
1
暴走大事件
623557
4088311
贴吧
图片
百科
1
暴走大事件
623557
4088311
贴吧
图片
百科
html5表格多行多列)ter">1
暴走大事件
623557
4088311
贴吧
图片
百科
1
暴走大事件
623557
4088311
贴吧图片百科
篇三:
html5+css3表格设计(table)
css样式:
[css]viewplaincopy1.
2.
3.body{
4.width:
600px;
5.margin:
40pxauto;
6.font-family:
trebuchetms,lucidasans,arial;
7.font-size:
14px;
8.color:
#444;
9.}
10.
11.table{
12.*border-collapse:
collapse;/*ie7andlower*/
13.border-spacing:
0;
14.width:
100%;
15.}
16.
17..bordered{
18.border:
solid#ccc1px;
19.-moz-border-radius:
6px;
20.-webkit-border-radius:
6px;
21.border-radius:
6px;
22.-webkit-box-shadow:
01px1px#ccc;
23.-moz-box-shadow:
01px1px#ccc;
24.box-shadow:
01px1px#ccc;
25.}
26.
27..borderedtr:
hover{
28.background:
#fbf8e9;
29.-o-transition:
all0.1sease-in-out;
30.-webkit-transition:
all0.1sease-in-out;
31.-moz-transition:
all0.1sease-in-out;
32.-ms-transition:
all0.1sease-in-out;
33.transition:
all0.1sease-in-out;
34.}
35.
36..borderedtd,.borderedth{
37.border-left:
1pxsolid#ccc;
38.border-top:
1pxsolid#ccc;
39.padding:
10px;
40.text-align:
left;
41.}
42.
43..borderedth{
44.background-color:
#dce9f9;
45.background-image:
-webkit-gradient(linear,lefttop,leftbottom,from(#ebf3fc),to(#dce9f9));
46.background-image:
-webkit-linear-gradient(top,#ebf3fc,#dce9f9);47.background-image:
-moz-linear-gradient(top,#ebf3fc,#dce9f9);48.background-image:
-ms-linear-gradient(top,#ebf3fc,#dce9f9);49.background-image:
-o-linear-gradient(top,#ebf3fc,#dce9f9);50.background-image:
linear-gradient(top,#ebf3fc,#dce9f9);
51.-webkit-box-shadow:
01px0rgba(255,255,255,.8)inset;
52.-moz-box-shadow:
01px0rgba(255,255,255,.8)inset;
53.box-shadow:
01px0rgba(255,255,255,.8)inset;
54.border-top:
none;
55.text-shadow:
01px0rgba(255,255,255,.5);
56.}
57.
58..borderedtd:
first-child,.borderedth:
first-child{
59.border-left:
none;
60.}
61.
62..borderedth:
first-child{
63.-moz-border-radius:
6px000;
64.-webkit-border-radius:
6px000;
65.border-radius:
6px000;
66.}
67.
68..borderedth:
last-child{
69.-moz-border-radius:
06px00;
70.-webkit-border-radius:
06px00;
71.border-radius:
06px00;
72.}
73.
74..borderedth:
only-child{
75.-moz-border-radius:
6px6px00;
76.-webkit-border-radius:
6px6px00;
77.border-radius:
6px6px00;
78.}
79.
80..borderedtr:
last-childtd:
first-child{
81.-moz-border-radius:
0006px;
82.-webkit-border-radius:
0006px;
83.border-radius:
0006px;
84.}
85.
86..borderedtr:
last-childtd:
last-child{
87.-moz-border-radius:
006px0;
88.-webkit-border-radius:
006px0;
89.border-radius:
006px0;
90.}
91.
92./*----------------------*/
93.
94..zebratd,.zebrath{
95.padding:
10px;
96.border-bottom:
1pxsolid#f2f2f2;
97.}
98.
99..zebratbodytr:
nth-child(even){
100.background:
#f5f5f5;
101.-webkit-box-shadow:
01px0rgba(255,255,255,.8)inset;
102.-moz-box-shadow:
01px0rgba(255,255,255,.8)inset;
103.box-shadow:
01px0rgba(255,255,255,.8)inset;
104.}
105.
106..zebrath{
107.text-align:
left;
1
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html5 表格 多行多列