- 05-bootstrap 表格
- html5表格标签
- 表格
- 2019-01-09第三天
- 2015年11月5日
- 2018-11-28
- 第5单元 个性月历
- 零基础Web前端开发（5）
- html基础
- HTML基础
基本实例
代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> </head> <body> <div class="container"> <table class="table table-striped"> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>邮箱</th> </tr> <tr> <td>1</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> <tr> <td>2</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> <tr> <td>3</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> <tr> <td>4</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> <tr> <td>5</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> </table> </div> </body> </html>重点：在table上添加class 为table ，如果想要带斑马线的效果在class上追加.table-striped
<table class="table table-striped">
条纹.png
有边框的表格：在table的calss上添加 table-bordered
<table class="table table-bordered">
带边框的table
条纹+边框的表格：class="table table-striped table-bordered"
<table class="table table-striped table-bordered">
条纹+边框
鼠标在表格悬停：table-hover
<table class="table table-hover table-bordered">
image.png
表格缩紧：table-condensed。
<table class="table table-hover table-bordered table-condensed">
表格数据状态，底色
image.png
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> </head> <body> <div class="container"> <table class="table table-hover table-bordered table-condensed"> <tr > <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>邮箱</th> </tr> <tr class=" alert-danger"> <td>1</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> <tr class="active"> <td>2</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> <tr class="warning"> <td>3</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> <tr class="success"> <td>4</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> <tr class="info"> <td>5</td> <td>lizh</td> <td>man</td> <td>34</td> <td>15353661871</td> <td>126@qq.com</td> </tr> </table> </div> </body> </html>相关文章
05-bootstrap 表格
基本实例 代码 重点：在table上添加class 为table ，如果想要带斑马线的效果在class上追加.ta...
html5表格标签
表格 格式： 表格标签： ————定义表格 ———— 定义表格标题。 ———— 定义表格的表头。 ———— ...
表格
基本表格 带边框表格 鼠标悬停表格 条纹状表格 紧缩型表格 ...
2019-01-09第三天
表格 有表格线 没有表格线？ 水平表格和垂直表格如何设计出来的？
2015年11月5日
表格标签：table 表格thead 表格头tbody 表格主体tfoot 表格尾tr 表格行th 元素定义表头t...
2018-11-28
表格 表格 长表格 表格的布局 完善clearfix 表单 模拟后台服务器 表格
第5单元 个性月历
创建表格 输入表格 调整与修必表格 美化表格
零基础Web前端开发（5）
HTML表格概述 表格的基本结构 表格的基本标签有标签 （表格）， 标签（表格行）, 标签（表格单元格）。 标签和...
html基础
HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...
HTML基础
HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...
本文标题：05-bootstrap 表格
本文链接：https://www.haomeiwen.com/subject/dmcjkqtx.html
深度阅读
- 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！
网友评论