04-08、表格标签table
概述
表格：是一种行和列组合而成的单元格。一般应用于后台网页设计管理数据使用。
表格的架构部分：
- table
- table head 表格头 thead
- table body - 表格体 tbody
- table foot -表格的页脚 tfoot
表格的基本组成部分：
- table row - tr 表格中的行
- table data cell - td 表格中的单元格
- table header cell -th 表格中的头部的单元格
表格的基本语法：
<!--table表格标签-->
<table border="1px"><!--tr 行标签--><tr><!--td 单元格标签--><td>第1个单元格的内容</td><td>第2个单元格的内容</td>……</tr><tr><td>第1个单元格的内容</td><td>第2个单元格的内容</td>……</tr>
</table>
代码
简单表格：
<!--table表格标签-->
<table border="1px"><!--tr 行标签--><tr><!--td 单元格标签--><td>第1个单元格的内容</td><td>第2个单元格的内容</td>……</tr><tr><td>第1个单元格的内容</td><td>第2个单元格的内容</td>……</tr>
</table>
表格完整分类
demo15.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>表格table</title><style>*{margin: 0;padding: 0;}body{margin: 100px;}table{width: 100%;border-collapse:collapse;margin: 20px 0;}table thead th,table tbody td{text-align: left;padding:10px;border:1px solid #ccc} .thead th,.tbody td{text-align: left;padding:10px;border:1px solid #ccc} </style>
</head>
<body><!--简单表格--><table ><tr class="thead"><th>ID</th><th>姓名</th><th>年龄</th><th>操作</th></tr><tr class="tbody"><td>1</td><td>飞哥</td><td>35</td><td>编辑</td></tr><tr class="tbody"><td>2</td><td>狂神</td><td>25</td><td>编辑</td></tr></table><hr><!--完整表格--><table ><thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>飞哥</td><td>35</td><td>编辑</td></tr><tr><td>2</td><td>狂神</td><td>25</td><td>编辑</td></tr></tbody><tfoot><tr><td colspan="10">总共：2个用户</td></tr></tfoot></table></body>
</html>
- table > thead > td > th 默认是加粗 + 居中
- table > tbody> td > td 默认是不加粗 + 居左
合并单元格 - 合并行—>rowspan
demo16.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>表格table</title><style>*{margin: 0;padding: 0;}body{margin: 100px;}table{width: 100%;border-collapse:collapse;margin: 20px 0;}table thead th,table tbody td,table tfoot td{text-align: left;padding:10px;border:1px solid #ccc} </style>
</head>
<body><!--完整表格--><table ><thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>总年龄</th><th>操作</th></tr></thead><tbody><tr><td rowspan="2">1</td><td>飞哥</td><td>35</td><td rowspan="2">60</td><td>编辑</td></tr><tr><td>狂神</td><td>25</td><td>编辑</td></tr></tbody><tfoot><tr><td colspan="5" >总共：2个用户</td></tr></tfoot></table></body>
</html>
合并单元格 - 合并列—>colspan
<!--合并单元格的问题 -- 合并列--><div><h3>合并单元格的问题 -- 合并列</h3><table border="1" width="100%"><thead><tr><th>ID</th><th>用户姓名</th><th>年龄</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>狂神</td><td>20</td><td><a href="#">编辑</a><a href="#">移除</a></td></tr><tr><td>1</td><td>飞哥</td><td>35</td><td><a href="#">编辑</a><a href="#">移除</a></td></tr></tbody><tfoot><tr><td colspan="4">总计：2人 性别男：2个 性别女：0个 平均年龄：30</td></tr></tfoot></table></div>表格的跨行和跨列
<!--文档类型：主要定义页面支持的标签类型，以及后续每个标签的命名，特征和行为-->
<!DOCTYPE html>
<!--整个页面的根元素-->
<html>
<!--页面的头部：主要用来设置浏览器解析页面时候的编码，头信息，页面描述、关键字,css样式列表引入和js引入，响应式规则等--><head><!--告诉浏览器解析网页的内容使用utf-8进行编码--><meta charset="utf-8"><!--响应式规则--><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--设置关键字和描述--><meta name="keywords" content="KuangStudy,KuangStudy文章,KuangStudy博客,KuangStudy论坛,KuangStudy学习,学相伴"><meta name="description" content="KuangStudy是一个致力于为每个想学习知识的人提供一个少走弯路的平台,包含优质体系课程、文章博客、专栏书写、技术论坛、资源下载等产品服务,提供有用、优质、完整内容的自学交流社区."><!--设置图标--><link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"><!--给浏览器的标签上显示标题，也可以作为网页收藏的文字--><title>表格分组-学相伴</title>
</head><body><!---完整的表格 --><div><h3>完整的表格</h3><table border="1" width="100%"><colgroup><col width="200px" align="center" /><col /><col /><col /><col width="100px" /></colgroup><thead><tr><th>ID</th><th>用户姓名</th><th>年龄</th><th>地址</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>狂神</td><td>20</td><td>重庆</td><td><a href="#">编辑</a><a href="#">移除</a></td></tr><tr><td>1</td><td>飞哥</td><td>35</td><td>湖南</td><td><a href="#">编辑</a><a href="#">移除</a></td></tr></tbody><tfoot><tr><td colspan="5">分页</td></tr></tfoot></table></div></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表格标签--><table border="1" width="100%"><tr><td>标题</td><td>年龄</td><td>操作</td></tr><tr><td><input type='text' /></td><td><input type='text' /></td><td><button>编辑</button><button>删除</button></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表格标签--><table border="1" width="100%"><tr><td align="center" width="200px">标题</td><td>年龄</td><td>操作</td></tr><tr><td align="center" width="200px"><input type='text' /></td><td><input type='text' /></td><td><button>编辑</button><button>删除</button></td></tr></table>
</body></html>
colgroup统一设置列的宽度和对齐方式
<!--文档类型：主要定义页面支持的标签类型，以及后续每个标签的命名，特征和行为-->
<!DOCTYPE html>
<!--整个页面的根元素-->
<html>
<!--页面的头部：主要用来设置浏览器解析页面时候的编码，头信息，页面描述、关键字,css样式列表引入和js引入，响应式规则等--><head><!--告诉浏览器解析网页的内容使用utf-8进行编码--><meta charset="utf-8"><!--响应式规则--><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--设置关键字和描述--><meta name="keywords" content="KuangStudy,KuangStudy文章,KuangStudy博客,KuangStudy论坛,KuangStudy学习,学相伴"><meta name="description" content="KuangStudy是一个致力于为每个想学习知识的人提供一个少走弯路的平台,包含优质体系课程、文章博客、专栏书写、技术论坛、资源下载等产品服务,提供有用、优质、完整内容的自学交流社区."><!--设置图标--><link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"><!--给浏览器的标签上显示标题，也可以作为网页收藏的文字--><title>表格分组-学相伴</title>
</head><body><!---完整的表格 --><div><h3>完整的表格</h3><table border="1" width="100%"><colgroup><col width="200px" align="center" /><col /><col /><col /><col width="100px" /></colgroup><thead><tr><th>ID</th><th>用户姓名</th><th>年龄</th><th>地址</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>狂神</td><td>20</td><td>重庆</td><td><a href="#">编辑</a><a href="#">移除</a></td></tr><tr><td>1</td><td>飞哥</td><td>35</td><td>湖南</td><td><a href="#">编辑</a><a href="#">移除</a></td></tr></tbody><tfoot><tr><td colspan="5">分页</td></tr></tfoot></table></div></body></html>
注意col元素-只能控制宽度，不能控制对齐方式，如果都设置了会忽略宽度，变成自动分配。
场景
-
https://preview.pro.ant.design/ 后台管理系统
-
https://v3.bootcss.com/css/#tables
demo01---->合并
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title><style>.container{width: 960px;margin: 0 auto; background: #fafafa; padding: 20px;}/* 合并边框 */table{border-collapse: collapse; width: 100%;}/* solid实线 text-align: center;全部居中*/table tr th,table tr td{border: 1px solid #111; padding: 10px; text-align: center;}</style>
</head>
<body><div class="container"><h1>表格的认识table</h1><div>横向是合并:列 colspan=,垂直方向是合并:行 rowspan= 最终合并时在td上</div><table><!-- 控制某一行的宽度 --><!-- <colgroup><col style="width: 500px;"/><col style="width: 500px;"/></colgroup> --><thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>小成</td><td>26</td><td>编辑,操作</td></tr><tr><td>1</td><td>小成</td><td>26</td><td>编辑,操作</td></tr></tbody><tfoot><tr><td colspan="5">分页</td><!-- <td>姓名</td><td>年龄</td><td>操作</td> --></tr></tfoot></table></div>
</body>
</html>
demo2—>选中的状态和淡入淡出的效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title><style>.container{width:960px;margin: 0 auto;background:#fafafa;padding:20px;}.ksd-ui-table{border-collapse: collapse;width: 100%;}.ksd-ui-table tr th,.ksd-ui-table tr td{border:1px solid #ccc;padding:10px;text-align: center;}/* 淡入淡出的效果 */.ksd-ui-table tr{transition: 300ms;}/* 选中的状态 */.ksd-ui-table tr:hover{background:#eee;}</style>
</head>
<body><div class="container"><table class="ksd-ui-table"><thead><tr><th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr></thead><tbody><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr></tbody><tfoot><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr></tfoot></table></div>
</body>
</html>
demo—>单双行界面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title><style>.container{width:960px;margin: 0 auto;background:#fafafa;padding:20px;}.ksd-ui-table{border-collapse: collapse;width: 100%;}.ksd-ui-table tr th,.ksd-ui-table tr td{border:1px solid #ccc;padding:10px;text-align: center;}/* 淡入淡出的效果 */.ksd-ui-table tr{transition: 300ms;}/* 单双行界面 */.ksd-ui-table tbody tr:nth-child(odd){background:#fafafa;}.ksd-ui-table tbody tr:nth-child(even){background:#eee;}/* 选中的状态 nth-child比hover优先级更高*/.ksd-ui-table tbody tr:hover{background:#111;color: #fff;}</style>
</head>
<body><div class="container"><table class="ksd-ui-table"><thead><tr><th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr></thead><tbody><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr></tbody></table></div>
</body>
</html>
demo->给外部加边框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title><style>.container{width:960px;margin: 0 auto;background:#fafafa;padding:20px;}.ksd-ui-table{border-collapse: collapse;width: 100%;}/* 给外部加边框 border-bottom 去掉下边框*/.ksd-ui-table-box{border: 1px solid #ccc; border-bottom: 0px;}/* border-bottom只给底部加入边框 */.ksd-ui-table tr th,.ksd-ui-table tr td{border-bottom:1px solid #ccc;padding:10px;text-align: center;}/* 淡入淡出的效果 */.ksd-ui-table tr{transition: 300ms;}/* 单双行界面 */.ksd-ui-table tbody tr:nth-child(odd){background:#fafafa;}.ksd-ui-table tbody tr:nth-child(even){background:#eee;}/* 选中的状态 nth-child比hover优先级更高*/.ksd-ui-table tbody tr:hover{background:#111;color: #fff;}</style>
</head>
<body><div class="container"><div class="ksd-ui-table-box"><table class="ksd-ui-table"><thead><tr><th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr></thead><tbody><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr></tbody></table></div></div>
</body>
</html>
demo–>悬浮定位和固定定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title><style>.container{width:960px;margin: 0 auto;background:#fafafa;padding:20px;}/* table-layout: fixed;数据对齐 布局全部用fixed*/.ksd-ui-table{border-collapse: collapse;width: 100%; table-layout: fixed;}/* 给外部加边框 border-bottom 去掉下边框*/.ksd-ui-table-box{border: 1px solid #ccc; border-bottom: 0px;}/* border-bottom只给底部加入边框 */.ksd-ui-table tr th,.ksd-ui-table tr td{border-bottom:1px solid #ccc;padding:10px;text-align: center;}/* 淡入淡出的效果 */.ksd-ui-table tr{transition: 300ms;}/* 单双行界面 */.ksd-ui-table tbody tr:nth-child(odd){background:#fafafa;}.ksd-ui-table tbody tr:nth-child(even){background:#eee;}/* 选中的状态 nth-child比hover优先级更高*/.ksd-ui-table tbody tr:hover{background:#111;color: #fff;}/* 悬浮定位和固定定位 当滚动条加载到top：0的时候没救把定位static改成fixed*/.ksd-ui-table-headfix{position: sticky;top: 0; background: #fff;}</style>
</head>
<body><div class="container"><div class="ksd-ui-table-box"><table class="ksd-ui-table ksd-ui-table-headfix"><thead><tr><th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr></thead></table><table class="ksd-ui-table"><tbody><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr><tr><td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr></tbody></table></div></div>
</body>
</html>
