收藏
批改状态：合格
老师批语：没有完成
学习HTML的时候，Table(表格)是必不可少的学习内容，在实际开发中Table(表格)也会在很多地方应用到！比如开发后台页面时，新闻的列表就应用到了表格！
在开发过程中我们使用，<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
简单Table表格演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>这是一个简单的表格</title> </head> <body> <h3>这是一个简单的Table表格</h3> <table> <tr> <th>序号</th> <th>姓名</th> <th>特点</th> <th>推荐</th> </tr> <tr> <td>1</td> <td>鲁班</td> <td>小短腿</td> <td>猥琐发育，别浪</td> </tr> <tr> <td>2</td> <td>李白</td> <td>皮肤很帅气</td> <td>要精确掌握大招和二技能的释放时机</td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
复杂的Table表格演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个简单的表格</title>
<style type="text/css">
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- 使用Table 定义一个表格 -->
<table border="1">
<!-- caption 定义表格内容页头 -->
<caption>
<h3>这是一个复杂的Table表格-我是页头容器</h3>
</caption>
<!-- thead 定义表格头部 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>特点</th>
<th>推荐</th>
</tr>
</thead>
<!-- tbody 定义table表格内容区域 -->
<tbody>
<tr>
<td>1</td>
<td>鲁班</td>
<td>小短腿</td>
<td>猥琐发育，别浪</td>
</tr>
<tr>
<td>2</td>
<td>李白</td>
<td>皮肤很帅气</td>
<td>要精确掌握大招和二技能的释放时机</td>
</tr>
</tbody>
<!-- tfoot 定义table 页脚信息的容器 -->
<tfoot>
<tr>
<td colspan="4">
这是一个复杂的Table表格-我是页脚容器
</td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
使用CSS改变样式的Table 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格-</title>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<style>
*{
padding: 0;
margin: 0;
font-size: 1rem;
}
/* 给表格添加样式 */
table {
width: 100%;
height: auto;
border: 1px solid rgba(0,0,0,.2);
margin: 50px auto;
border-collapse: collapse;
font-family: ;
}
/* 表格页头样式 */
table > caption{
padding: 15px;
box-sizing: border-box;
background: linear-gradient(#5cb9bd,#ededed);
border: 1px solid rgba(0,0,0,.2);
/* border-bottom: none; */
}
h1{
color: green;
font-size: 1.5rem;
}
th,td{
padding: 10px;
border: 1px solid rgba(0,0,0,.2);
text-align: center;
}
/* 表格内容部分 隔行变色 */
tbody > tr:nth-of-type(2n+1) {
background: #f2f2f2;
}
/* 表格页脚样式 */
tfoot {
background: linear-gradient(#5cb9bd,#ededed);
}
/* 选择内容为上午时间的TD元素 使其颜色为绿色 */
tbody>tr:first-of-type>td:first-of-type {
background: linear-gradient(green,cadetblue);
color: #F2F2F2 ;
}
tbody>tr:nth-last-of-type(2)>td:first-of-type{
background: linear-gradient(green,cadetblue);
}
</style>
</head>
<body>
<table>
<!-- 表格标题 // 表头信息 -->
<caption>
<h1>七年级（15）班 课程表</h1>
</caption>
<thead>
<tr>
<th>上课时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">
上午：7：30 - 11：45
</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>政治</td>
<td>语文</td>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>政治</td>
<td>语文</td>
</tr>
<tr>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>政治</td>
<td>语文</td>
</tr>
<tr>
<td>体育</td>
<td>数学</td>
<td>英语</td>
<td>政治</td>
<td>语文</td>
</tr>
<tr>
<td rowspan="2">
下午：2：20-5：50
</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>政治</td>
<td>语文</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>政治</td>
<td>语文</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="1">
注意:
</td>
<td colspan="5">
特殊原因时课程变动，家长群内另行通知
</td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：Table标签就像一个收纳盒，caption 就是一个给收纳盒定义名称的容器，tr是把收纳盒分成层级排列，td (th)是在每一层的基础上把tr分割成若干个小格！
表格中的数据,必须保存在`<td>`标签中, 所以样式主要设置给它
表格只需要设置单元格设置边框即可, 折叠后整个表格就都有了
`border-collapse: collapse`: 折叠单元格边框间隙,非常重要
表格是格式化展示数据的重要工具, 不要过度美化,本例为教学而已
表格也是盒元素, 遵循盒模型的基本特征
为防止单元格的内边距与边框影响到表格大小, 应设置`box-sizing`
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
