表格布局
1.引入
我们之前学习了HTML5相关的标签内容，之后又学习了相关的一些样式以及特效，下面我们接着学习一个重要的内容:页面布局。
2.表格布局概述
所谓的表格布局就是使用表格内容的特性:可以使用"tr"产生行，使用“td”产生列，并使用无边框的特性，然后把整个页面当作值一个页面，把网页中的内容按照版式划分放入表格的单元格中，从而实现复杂的排版组合。
3.表格布局的两个基本应用
(1).使用表格布局实现数据的显示排版。
<style type="text/css"> .tb_grad{text-align: center;font-size: 25px;font-family: "宋体";}.tb_grad caption{font-weight: 800;color: #FF0000;margin-bottom: 20px;}.tb_grad th{border: 2px solid #b83d00;}.tb_grad td{border: 1px solid #b50000;}.tb_grad td span a{text-decoration: none;}.pagination {display: inline-block;}.pagination a {color: black;float: left;padding: 8px 16px;text-decoration: none;}.pagination a.active {background-color: #4CAF50;color: white;}.pagination a:hover:not(.active) {background-color: #ddd;}</style><table class="tb_grad" border="0" cellspacing="0" cellpadding="0" width="1200px" align="center"><caption>22级1班_hadoop期末考试成绩统计</caption><tr><th>学生姓名</th><th>学生班级</th><th>学生学号</th><th>学生成绩</th><th>成绩绩点</th><th>操作</th></tr><tr><td>张三</td><td>22级1班</td><td>2201103231</td><td>98</td><td>4.8</td><td><span><a href="#">修改</a></span><span><a href="#">删除</a></span><span><a href="#">详情</a></span></td></tr><tr><td>李四</td><td>22级1班</td><td>2201103231</td><td>98</td><td>4.8</td><td><span><a href="#">修改</a></span><span><a href="#">删除</a></span><span><a href="#">详情</a></span></td></tr><tr><td>王五</td><td>22级1班</td><td>2201103231</td><td>98</td><td>4.8</td><td><span><a href="#">修改</a></span><span><a href="#">删除</a></span><span><a href="#">详情</a></span></td></tr><tr><td>赵六</td><td>22级1班</td><td>2201103231</td><td>98</td><td>4.8</td><td><span><a href="#">修改</a></span><span><a href="#">删除</a></span><span><a href="#">详情</a></span></td></tr><tr><td>王麻子</td><td>22级1班</td><td>2201103231</td><td>98</td><td>4.8</td><td><span><a href="#">修改</a></span><span><a href="#">删除</a></span><span><a href="#">详情</a></span></td></tr><tr><td colspan="2">当前第1页,共10页面,每页5条</td><td colspan="4"><div class="pagination"><a href="#">上一页</a><a class="active" href="#">首页</a><a href="#">尾页</a><a href="#">下一页</a></div></td></tr>
</table>
(2).使用表格布局实现用户登录注册页面的排版
①、用户注册页面
<style type="text/css">body {font-size: 20px;font-family: "宋体";}.btn {width: 70px;height: 30px;border: 1px solid #FF0000;background-color: #aaff00;}.btn:hover {background-color: #00aa00;}tr {margin-top: 10px;}
</style>
<table border="0" cellspacing="1" cellpadding="1" align="center"><caption>用户注册</caption><form action="#" method="post" name="userRegester"><tr><td>用户名:</td><td><input type="text" name="uname" /></td></tr><tr><td>密 码:</td><td><input type="password" name="pwd" /></td></tr><tr><td>性 别:</td><td>男<input type="radio" name="sex" checked="checked"/>女<input type="radio" name="sex" /></td></tr><tr><td>电 话:</td><td><input type="tel" name="tel" /></td></tr><tr><td>邮 箱:</td><td><input type="email" name="email" /></td></tr><tr><td>爱 好:</td><td>看书<input type="checkbox" name="hobby" />学习<input type="checkbox" name="hobby" />挣钱<input type="checkbox" name="hobby" />睡觉<input type="checkbox" name="hobby" /></td></tr><tr><td></td><td><input type="reset" value="重置" class="btn" /><input type="submit" class="btn" /></td></tr></form>
</table>
