话不多说,直奔主题,本人会从两方面总结表格
一,表格的构成 。二,表格的合并。三,表格的嵌套。四,表格的用法。
一,表格的构成(构成的元素)
构成表格的元素
定义表格标题。 | |
定义表格 | |
定义表格中的行 | |
定义表格中的单元 | |
定表格中的主体内容 | |
定义表格中的表注内容(脚注) | |
定义表格中的表头内容 | |
定义表格中的表头单元格 |
若只需要制作简单的表格,只用前三个便可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个简单的两行两列的表格</title>
</head>
<body> <!--border是表格的边框线,不加border属性就没有边框线-->
<table border="1px">
<tr>
<td>66</td>
<td>88</td>
</tr>
<tr>
<td>66</td>
<td>88</td>
</tr>
</table>
</body>
</html>
若要制作较复杂的表格,则上述元素需要全用到,那些元素是定义那块区域的含义。并不能显示出什么效果。
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1px">
<!--头部-->
<thead >
<tr>
<th>水果</th>
<th>苹果</th>
<th>梨子</th>
</tr>
</thead>
<!--主体-->
<tbody >
<tr>
<td>单价</td>
<td>五元/斤</td>
<td>五元/斤</td>
</tr>
<tr>
<td>数量</td>
<td>两斤</td>
<td>两斤</td>
</tr>
</tbody>
<!--表注-->
<tfoot >
<tr>
<td>总计</td>
<td>十元</td>
<td>十元</td>
</tr>
</tfoot>
</table>
</body>
</html>
二,表格的合并
表格合并的属性
colspan | 同一行单元格合并。 |
rowspan | 同一列单元格合并。 |
属性取值 | rowspan=“需要合并的格数” |
这是未合并的表格代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1px">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
这是合并后的代码,需要注意一点的是表格合并,要把你合并的那个单元格的代码删除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
三,表格的嵌套
嵌套就表格中还有表格,那么需要怎么嵌套呢?我们只需要在单元格里嵌套就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1px">
<tr>
<td>
<!--嵌套表格-->
<table border="1px">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
四,表格的用法。
表格的用处不仅仅只实用制作表格,还可以用来写电影网站目录和注册页面(可以是注册页面居中)
电影网站目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>热门电影板块</h1><hr>
最近热门电影 热门 最新 豆瓣高分 冷门佳片 华语 欧美 日本 <a href="#">更多>></a><hr>
<table width="800"height="500" align="center">
<tr>
<td><img src="F:\Bin\云计算\img\1.png"/></td>
<td><img src="F:\Bin\云计算\img\2.png"/></td>
<td><img src="F:\Bin\云计算\img\1.png"/></td>
<td><img src="F:\Bin\云计算\img\2.png"/></td>
</tr>
<tr>
<td>死寂</td>
<td>致命ID</td>
<td>盗梦空间</td>
<td>禁闭岛</td>
</tr>
<tr >
<td><img src="F:\Bin\云计算\img\1.png"/></td>
<td><img src="F:\Bin\云计算\img\2.png"/></td>
<td><img src="F:\Bin\云计算\img\1.png"/></td>
<td><img src="F:\Bin\云计算\img\2.png"/></td>
</tr>
<tr>
<td>死寂</td>
<td>致命ID</td>
<td>盗梦空间</td>
<td>禁闭岛</td>
</tr>
</table>
</body>
</html>
效果图:
注册页面居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<table align="center">
<tr>
<td>用户名:</td>
<td><input type="text" name="username" placeholder="请输入用户名"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="userpassword" placeholder="请输入密码"/></td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" placeholder="请确认密码"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="登录">
</td>
<td>
<input type="reset" value="清空">
</td>
</tr>
</table>
</form>
</body>
</html>
效果图:
当然在学会了css后可不用表格使页面居中了,所以每天都要学习新东西哟。每天养成敲代码的好习惯😄。