一、创建表格
学会使用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标签>/学习笔记