Table of contents
- 01-Bootstrap’s default table style
- 02-Table without edges-borders
- 03-Alternate the background color of rows and rows (striped style)
- 04-Add a border effect to the table
- 05-The color of the row becomes darker when the mouse is moved over it
- 06-Reduce the padding value of the table by half to make the table look more compact
- 07-Set color for table rows or cells
01-Bootstrap’s default table style
Bootstrap has overwritten and optimized the HTML tags related to the table. The following tags related to the table have been overwritten and optimized:
<table>: Table container.
<thead>: The header container of the table.
<th>: Cell in the table header.
<tbody>: Table body container.
<tr>: Row of the table.
<td>: Table cell, used <tbody>internally . <td>The label comes from the abbreviation of the English word "table data".
The sample code for the above tag is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格的默认样式</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">商品销售表</h2>
<table class="table">
<thead>
<tr>
<th>名称</th><th>产地</th><th>价格</th><th>库存</th><th>销量</th></tr>
</thead>
<tbody>
<tr>
<td>洗衣机</td><td>北京</td><td>6800元</td><td>2600台</td><td>1200台</td> </tr>
<tr>
<td>冰箱</td><td>上海</td><td>5990元</td><td>3600台</td><td>800台</td> </tr>
<tr>
<td>空调</td><td>广州</td><td>12660元</td><td>4200台</td><td>1200台</td> </tr>
<tr>
<td>电视机</td><td>西安</td><td>2688元</td><td>6900台</td><td>500台</td></tr>
</tbody>
</table>
</body>
</html>
The running results are shown in the figure below:
02-Table without edges-borders
Adding the table-borderless class to <table>the label can achieve a borderless style table.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>没有边框的表格</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">学生成绩表</h2>
<table class="table table-borderless">
<thead>
<tr>
<th>姓名</th><th>班级</th><th>语文</th><th>数学</th><th>英语</th></tr>
</thead>
<tbody>
<tr>
<td>张宝</td><td>一班</td><td>89</td><td>96</td><td>69</td></tr>
<tr>
<td>李丰</td><td>一班</td><td>93</td><td>94</td><td>98</td></tr>
</table>
</body>
</html>
The running effect is as follows:
03-Alternate the background color of rows and rows (striped style)
You can use Bootstrap's table-striped class to automatically add a striped style to each row of the table (tr element), so that the background color of each row changes alternately, thereby providing better readability. This is useful for tables with large amounts of data, as it helps users distinguish different rows more easily.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条纹状的表格</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">1月份工资表</h2>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th><th>部门</th><th>工资</th><th>奖金</th></tr>
</thead>
<tbody>
<tr>
<td>刘梦</td><td>销售部</td><td>8600元</td><td>800元</td></tr>
<tr>
<td>李丽</td><td>销售部</td><td>4500元</td><td>900元</td></tr>
<tr>
<td>张龙</td><td>财务部</td><td>6800元</td><td>1200元</td> </tr>
<tr>
<td>林笑天</td><td>设计部</td><td>7800元</td><td>600元</td>
</tr>
</tbody>
</table>
</body>
</html>
The running effect is as follows:
The effect without stripe style is as follows:
04-Add a border effect to the table
You can use the table-bordered class to achieve the border effect.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格边框风格</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">商品入库表</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>名称</th><th>入库时间</th><th>产地</th><th>数量</th></tr>
</thead>
<tbody>
<tr>
<td>洗衣机</td><td>3月18日</td><td>上海</td><td>800台</td></tr>
<tr>
<td>冰箱</td><td>2月21日</td><td>北京</td><td>900台</td></tr>
<tr>
<td>电视机</td><td>2月11日</td><td>广州</td><td>1200台</td> </tr>
</tbody>
</table>
</body>
</html>
The running effect is as shown in the figure below:
If no borders are added, the effect is as follows:
05-The color of the row becomes darker when the mouse is moved over it
You can use the table-hover class to achieve the border effect.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标指针悬停风格</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">商品入库表</h2>
<table class="table table-hover">
<thead>
<tr>
<th>名称</th><th>入库时间</th><th>产地</th><th>数量</th></tr>
</thead>
<tbody>
<tr>
<td>洗衣机</td><td>3月18日</td><td>上海</td><td>800台</td></tr>
<tr>
<td>冰箱</td><td>2月21日</td><td>北京</td><td>900台</td></tr>
<tr>
<td>电视机</td><td>2月11日</td><td>广州</td><td>1200台</td> </tr>
</tbody>
</table>
</body>
</html>
The running effect is shown in the figure below:
06-Reduce the padding value of the table by half to make the table look more compact
The table-sm class can be used to reduce the padding value of the table by half, making the table look more compact.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>紧凑风格</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">商品入库表</h2>
<table class="table table-sm">
<thead>
<tr>
<th>名称</th><th>入库时间</th><th>产地</th><th>数量</th></tr>
</thead>
<tbody>
<tr>
<td>洗衣机</td><td>3月18日</td><td>上海</td><td>800台</td></tr>
<tr>
<td>冰箱</td><td>2月21日</td><td>北京</td><td>900台</td></tr>
<tr>
<td>电视机</td><td>2月11日</td><td>广州</td><td>1200台</td> </tr>
</tbody>
</table>
</body>
</html>
The running effect is shown in the figure below:
The effect of not reducing padding is as follows:
07-Set color for table rows or cells
You can use the following classes to set colors for rows or cells:
-
table-primary: Used to highlight the main data in the table, usually using the main color in the theme. -
table-secondary: Used to highlight secondary data in a table, usually using a secondary color from the theme. -
table-success: Used to highlight success or positive information in a table, usually in green. -
table-danger: Used to highlight dangerous or erroneous information in a table, usually in red. -
table-warning: Used to highlight warning or caution information in tables, usually using yellow. -
table-info: Used to highlight general information in a table, usually using blue or light blue. -
table-light: Used to create a table with a light background. -
table-dark: Used to create tables with dark backgrounds.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格背景的颜色</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">以下为设置表格行的背景色</h2>
<table class="table">
<tbody>
<tr class="table-primary">
<td>1. `table-primary`: 用于突出显示表格中的主要数据，通常使用主题中的主要颜色。</td>
</tr>
<tr class="table-secondary">
<td>2. `table-secondary`: 用于突出显示表格中的次要数据，通常使用主题中的次要颜色。</td>
</tr>
<tr class="table-success">
<td>3. `table-success`: 用于突出显示表格中的成功或正面信息，通常使用绿色。</td>
</tr>
<tr class="table-danger">
<td>4. `table-danger`: 用于突出显示表格中的危险或错误信息，通常使用红色。</td>
</tr>
<tr class="table-warning">
<td>5. `table-warning`: 用于突出显示表格中的警告或注意信息，通常使用黄色。</td>
</tr>
<tr class="table-info">
<td>6. `table-info`: 用于突出显示表格中的一般信息，通常使用蓝色或淡蓝色。</td>
</tr>
<tr class="table-light">
<td>7. `table-light`: 用于创建具有浅色背景的表格。</td>
</tr>
<tr class="table-dark">
<td>8. `table-dark`: 用于创建具有深色背景的表格。</td>
</tr>
</tbody>
</table>
<h3 align="center">以下为设置表格的单元格的背景色</h2>
<table class="table">
<tbody>
<tr>
<td class="table-primary">1-`table-primary`</td>
<td class="table-secondary">2-`table-secondary`</td>
<td class="table-success">3-`table-success`</td>
<td class="table-danger">4-`table-danger`</td>
<td class="table-warning">5-`table-warning`</td>
<td class="table-info">6-`table-info`</td>
<td class="table-light">7-`table-light`</td>
<td class="table-dark">8-`table-dark`</td>
</tr>
</tbody>
</table>
</body>
</html>
The running effect is shown in the figure below:
