1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 使用html在网页中制作表格/对应的标签用法与属性/<table>标签/<tr>标签/<td>标

使用html在网页中制作表格/对应的标签用法与属性/<table>标签/<tr>标签/<td>标

时间:2019-06-14 06:48:32

相关推荐

使用html在网页中制作表格/对应的标签用法与属性/<table>标签/<tr>标签/<td>标

一、创建表格

学会使用html的<table>标签在网页中插入表格

基本语法格式

<table><tr><td></td></tr>tr标签定义行,td标签定义列</table>

1.案例演示

<!doctype html><html><head><meta charset="UTF-8"><title>创建表格</title></head><body><table border="4"><!--给表格添加边框--><tr><td>学生名称</td><td>竞赛学科</td><td>分数</td></tr><tr></tr><td>赵欣</td><td>数学</td><td>100</td><tr></tr><td>小明</td><td>英语</td><td>28</td><tr><td>小花</td><td>物理</td><td>78</td></tr></table></body></html>

效果图片

二、table标签的属性

table标签有如下几种属性,具体用法如<table border="4">

还有背景颜色、背景图片等属性,略。

基本语法格式

<table border="4" cellspacing="20px" align="center" width="500px" bgcolor="#eee">

三、tr标签的属性

利用tr标签的属性可以为表格中的行设置不同的样式

注意:如果table标签给出宽度,tr标签会自适应表格宽度,所以tr标签不能width属性

1.案例演示

<!doctype html><html><head><meta charset="UTF-8"><title>tr标签属性</title></head><body><table border="2" width="500px" height="200px" align="center"><tr height="50px" align="center" valign="bottom" bgcolor="#CFA725"><td>姓名</td><td>性别</td><td>电话</td><td>地址</td></tr><tr align="center"><td>小王</td><td>男</td><td>110</td><td>北京</td></tr><tr align="center"><td>小李</td><td>男</td><td>120</td><td>上海</td></tr><tr align="center"><td>amy</td><td>女</td><td>911</td><td>美国</td></tr></table></body></html>

效果图片

四、td标签的属性

熟悉td标签的属性可以为表格中的单元格设置样式

注意td标签的其它属性同tr标签,其他属性均可使用css样式替代,重点学习单元格的合并

​ 此外,当某一个td单元格设置科宽度属性后,该列中的所有单元格都会以当前设置的宽度显示。

基本语法格式

</tr><tr align="center"><td bgcolor="#00FFFF" width="200px">小王</td><td>男</td><td>110</td><td>北京</td></tr>

1.案例演示

<html><head><meta charset="UTF-8"><title>tr标签属性</title></head><body><table border="2" width="500px" height="200px" align="center"><tr height="50px" align="center" valign="bottom" bgcolor="#CFA725"><td>姓名</td><td>性别</td><td>电话</td><td>地址</td></tr><tr align="center"><td bgcolor="#00FFFF" width="200px">小王</td><td>男</td><td>110</td><td rowspan="3">北京</td></tr><tr align="center"><td>小李</td><td>男</td><td>120</td></tr><tr align="center"><td>amy</td><td>女</td><td>911</td></tr></table></body></html>

效果图片

五、th标签的属性

<th></th>标签可以用来设置表头,默认为加粗居中显示

​ 使用方式和属性与td标签是一样的,把需要修改的表头的<td>标签更改为<th>即可。

//欢迎加我VX进群交流vx账号:-Sep07

使用html在网页中制作表格/对应的标签用法与属性/<table>标签/<tr>标签/<td>标签/<th标签>/学习笔记

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。