[代码实例][HTML][Bootstrap]表格样式

最新推荐文章于 2021-06-04 05:25:21 发布
最新推荐文章于 2021-06-04 05:25:21 发布
阅读量224 收藏
点赞数
分类专栏： 代码实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cloudblaze/article/details/108722995
版权

开发电商网站特效

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Bootstrap Demo 36</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

	<script type="text/javascript" src="Js/jquery-3.5.1.min.js"></script>

	<%-- css:Bootstrap --%>
	<link rel="stylesheet" href="Lib/bootstrap-4.5.2/css/bootstrap.min.css" />
</head>
<body class="container">
	<h2>求职者信息表1</h2>
	<table class="table table-borderless">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表2</h2>
	<table class="table table-striped">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表3</h2>
	<table class="table table-striped table-bordered">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表4</h2>
	<table class="table table-hover">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表5</h2>
	<table class="table table-sm">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表6</h2>
	<table class="table table-striped table-dark">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表7</h2>
	<table class="table table-primary">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr class="table-warning">
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr class="table-danger">
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr class="table-light">
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr class="table-info">
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<script type="text/javascript" src="Js/popper.min.js"></script>
	<script type="text/javascript" src="Lib/bootstrap-4.5.2/js/bootstrap.min.js"></script>

</body>
</html>
cloudblaze
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 实现表格样式、表单布局的实例代码
12-11
1. 表格的一些样式 举例： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> [removed][removed] </head> <body> <table
Bootstrap表格制作代码
12-10
本文实例为大家分享了Bootstrap表格制作的具体代码，供大家参考，具体内容如下 Bootstrap 支持的一些表格元素： 可用于表格中的tablede 样式 可用于表格中的, <th> 和 html与css代码 <html> <head&...
Bootstrap表格样式
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-03 9535
Bootstrap表格样式 Bootstrap表格样式分类 基础样式.table 2.带背条纹表格.table-striped 3.带边框.table-border 4.悬停.table-hover 5.紧凑.table-condensed 6.行样
bootstrap表格样式大全
11-09 190
<table class="table">基本表格:如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class.table，如下面实例所示 <table class="table table-striped">条纹表格:通过添加.table-stripedclass，您将在 <tbody> 内的行上看到条纹，如下面的实例...
HTML-示例-bootstrap样式模板
huanghong6956的博客
02-17 453
bootstrap样式模板 https://v3.bootcss.com/css/ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;link r
Bootstrap样式表的 ".html" 例子
林微的博客
08-19 318
1. Bootstrap之Hello World模板 官方例子源代码 https://getbootstrap.com/docs/4.3/getting-started/introduction/ 如下， <!doctype html> <html lang="en"> <head> <!-- Required meta tags -->...
bootstrap表格分页实例讲解
08-31
首先，Bootstrap表格分页需要引入必要的JavaScript库和CSS样式表。在提供的代码中，可以看到引用了jQuery、Bootstrap的核心JavaScript库、Bootstrap-table插件以及中文语言包。这些引用是实现分页功能的基础，确保了...
el表达式 写入bootstrap表格数据页面的实例代码
08-31
在本实例中，我们将探讨如何使用EL（Expression Language）表达式来填充Bootstrap表格的数据，以创建一个动态且高效的页面。Bootstrap是一个流行的前端框架，用于快速构建响应式和移动优先的网站，而EL表达式则是...
AngularJS 与Bootstrap实现表格分页实例代码
10-21
Bootstrap则是流行的前端UI框架，提供了丰富的样式和组件，包括用于创建美观的表格和分页导航。 首先，我们关注表格的实现。在AngularJS中，`ng-repeat`指令是核心之一，它允许我们根据数组或对象的集合重复渲染...
初涉Bootstrap —— 表格与代码样式
weixin_34087503的博客
05-07 94
Bootstrap —— 列表与代码样式 列表 无序列表 <ul> <li>...</li> </ul> 有序列表 <ol> <li>...</li> </ol> 无样式列表 <div class="con...
bootstrap的整套框架的html静态页面示例集合
10-23
bootstrap的整套框架的html静态页面示例集合，包括所有bootstrap控件及样式，是辅助开发的好资料，绝对不坑，物有所值。
教大家轻松制作Bootstrap漂亮表格（table）
11-27
学习了runoob.com网站中的bootstrap内容之后，参照其中的内容自己做一下总结，以便帮助在这方面有疑惑的朋友，也有助于自己更好的消化所学的内容。 我们应该庆幸自己活在这样一个互联网时代，开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架，共享出来让我们使用，使得我们轻松就能实现很漂亮的效果。 下面就使用一个实例来讲一下如何使用Bootstrap现成的css样式直接加在我们的table表格上，我们只需要写很少的代码就能轻松制作漂亮表格。 比如我们要制作一个像下面这个表格： 有了Bootstrap，只需写好html内容结构，加上Bootstra
Bootstrap-表格模板（动态满屏）【筛选+分页+排序】
12-26
用Bootstrap的css样式以及JS、jQuery制作的动态更新表格模板，具有筛选、分页、排序等功能，全屏页面。表格制作精美，数据显示清晰合理，可直接应用于前端的开发。
基于bootstrap的漂亮表格.rar
07-27
一套基于bootstrap的漂亮表格，支持响应式布局，包含动态效果的图表，供大家研究学习
测试可用bootstrap可编辑表格完整代码
11-09
测试可用bootstrap可编辑表格完整代码，测试可用bootstrap可编辑表格完整代码
bootstrap---表格样式
FormAda的博客
07-03 478
                                                      表格样式在bootrap中，如果要用到表格记住要将表格中的类名写为“table”。如图：1.带条纹的样式请用类名“table-striped”。2.带边框的表格请用类名“table-bordered”。3.边框条纹可以一起使用4.鼠标悬停请用"table-hover"，鼠标滑过会出现灰色背景...
Bootstrap全局CSS样式之表格
bboyjoe的博客
07-26 3809
.table——基础表格样式； .table-striped——给之内的每一行增加斑马条纹样式； .table-bordered——为表格增加边框； .table-hover——为之内的每一行作悬停效果； .table-condensed——让表格更加紧凑，单元格中的内补（padding）均会减半。 .active——鼠标悬停在行或单元格上时所设置的颜色； .success——标识成功
html页面布局代码bootstrap,bootstrap table
weixin_42365266的博客
06-04 563
bootstrap-table如何动态绑定字段？调用javascript的代码： $('#table').bootstrapTable({ url: 'tablejson.jsp'。数据绑定，后台的数据从jsp代码： search:true, uniqueId:"Id", pageSize:"5", pageNumber:"1", sidePagination:"client", paginabo...
html——table标签及其css样式
肖的博客
08-12 8956
&amp;amp;amp;amp;amp;lt;table border=&amp;amp;amp;amp;quot;1&amp;amp;amp;amp;quot; width=&amp;amp;amp;amp;quot;400px&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;200px&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;
Bootstrap Table API 中文版（完整翻译文档）.docx
07-21
在HTML代码中，通过JavaScript调用`bootstrapTable`函数来初始化一个表格，如示例中的`$('#table').bootstrapTable({ ... })`。开发者可以通过这个函数传递配置对象，设置表格的行为，如搜索功能（`search: true`）...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值