- 表格的表示
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
- 表格的快捷指令
三行四列 1.table>tr*3>td*4 2.table>tr*3>td{单元格}*4
表格的属性
1.<table>的属性:
- border:设置表格的边框
- width:设置表格的宽度
- height:设置表格的高度
- align:设置表格的水平对齐方式
- cellpadding:设置内容距离边框的距离
- cellspacing:设置单元格之间的距离
- bgcolor:设置表格背景颜色
- bordercolor:设置边框颜色
- background:设置背景图片
2.<tr>的属性:
- height:设置一行的高度
- bgcolor:设置一行的背景颜色
- background:设置一行的背景图片
- align:设置行里内容水平对齐方式,取值:left、center、right
- valign:设置行里内容垂直对齐方式,取值:top、middle、bottom
3.<td>的属性:
- width:设置单元格的宽度,同列等宽
- height:设置单元格的高度,同行等高
- align:设置单元格内容水平对齐方式,取值:left、center、right
- valign:设置单元格内容垂直对齐方式,取值:top、middle、bottom
- bgcolor:设置单元格背景颜色
- background:设置单元格背景图片
-
表格简单练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>mr.zhang</td>
<td>26</td>
<td>苏州大学</td>
<td>本科</td>
</tr>
<tr>
<td>mr.liu</td>
<td>29</td>
<td>四川大学</td>
<td>硕士</td>
</tr>
<tr>
<td>刘强</td>
<td>28</td>
<td>西南石油大学</td>
<td>博士</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1"
width="100px"
height="100px"
cellpadding="5px"
cellspacing="3px"
bgcolor="green"
bordercolor="red"
background="./1.webp"
align="center"
valign="middle"
>
<tr height="200px"
bgcolor="green"
bordercolor="red"
background="./1.webp"
align="center"
valign="middle"
>
<td>mr.zhang</td>
<td>26</td>
<td>苏州大学</td>
<td>本科</td>
</tr>
<tr>
<td>mr.liu</td>
<td>29</td>
<td>四川大学</td>
<td>硕士</td>
</tr>
<tr>
<td
width="300px"
height="200px"
bgcolor="green"
bordercolor="red"
background="./1.webp"
align="center"
valign="middle"
>刘强</td>
<td>28</td>
<td>西南石油大学</td>
<td>博士</td>
</tr>
</table>
</body>
</html>