使用html在网页中制作表格/对应的标签用法与属性/＜table＞标签/＜tr＞标签/＜td＞标签/＜th标签＞/学习笔记
一、创建表格学会使用html的<table>标签在网页中插入表格基本语法格式<table><tr><td></td></tr>tr标签定义行，td标签定义列</table>1.案例演示<!doctype html><html><head><meta charset="UTF
·
一、创建表格
学会使用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">
| 属性 | 描述 | 属性值 |
|---|---|---|
| border | 表格边框 | 像素值 |
| width | 表格宽度 | 像素值 |
| height | 表格高度 | 像素值 |
| align | 表格在网页中水平对齐方式 | left、center、right |
| cellspacing * | 单元格与边框之间的空白间距 | 像素值（默认2像素） |
| cellpadding * | 单元格内容与单元格边框之间的空白距离 | 像素值（默认1像素） |
| bgcolor | 背景颜色 | #颜色值 |
还有背景颜色、背景图片等属性，略。
基本语法格式
<table border="4" cellspacing="20px" align="center" width="500px" bgcolor="#eee">
三、tr标签的属性
利用tr标签的属性可以为表格中的行设置不同的样式
| 属性 | 描述 | 常用属性值 |
|---|---|---|
| height | 行高 | 像素值 |
| aligh | 设置一行内容的水平对齐方式 | left、center、right |
| valign | 设置行内容的垂直对齐方式 | top、middle、bottom |
| bgcolor * | 行的背景颜色 | #颜色值 |
| background | 行背景图像 | url（图像地址） |
注意：如果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标签的属性可以为表格中的单元格设置样式
| 属性名 | 含义 | 属性值 |
|---|---|---|
| width | 单元格宽度 | 像素值 |
| height | 单元格高度 | 像素值 |
| colspan * | 单元格的水平方向合并 | 正整数 |
| rowspan * | 单元格的竖直方向合并 | 正整数 |
注意：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
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
6
0- 0
已为社区贡献11条内容
所有评论(0)