First of all, everyone should know that HTML is a standard markup language used to create web pages. HTML allows the use of
tags to create tables; but in fact, with the help of Cascading Style Sheets (CSS), it is not possible to use tags. Tables can be created in HTML! Because there are various CSS frameworks available, such as BootStrap, Foundation, Pure, Bulma, UI kit, Materialize CSS, Semantic UI, Specter, etc.
Bootstrap is a very widely used CSS framework. Bootstrap's grid system has a built-in flexbox, which is a one-dimensional layout model that provides spatial distribution and powerful alignment functions between items in the interface.
The following is to create a table by using the BootStrap framework of CSS
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建表</title>
<!--Linking the BootStrap CDN-->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<style type="text/css">
div {
text-align: center;
}
#heading {
font-weight: 700;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center display-4">示例表格</h1>
<div class="row border border-dark bg-success" id="heading">
<div class="col-3 border border-dark">Id</div>
<div class="col-3 border border-dark">姓名</div>
<div class="col-3 border border-dark">性别</div>
<div class="col-3 border border-dark">工资</div>
</div>
<div class="row border border-dark">
<div class="col border border-dark">101</div>
<div class="col border border-dark">张三</div>
<div class="col border border-dark">男</div>
<div class="col border border-dark">50000</div>
</div>
<div class="row border border-dark bg-info">
<div class="col border border-dark">102</div>
<div class="col border border-dark">李四</div>
<div class="col border border-dark">女</div>
<div class="col border border-dark">30000</div>
</div>
<div class="row border border-dark">
<div class="col border border-dark">103</div>
<div class="col border border-dark">王二</div>
<div class="col border border-dark">男</div>
<div class="col border border-dark">40000</div>
</div>
<div class="row border border-dark bg-info">
<div class="col border border-dark">104</div>
<div class="col border border-dark">赵五</div>
<div class="col border border-dark">女</div>
<div class="col border border-dark">45000</div>
</div>
</div>
</body>
</html>The effect is as follows:
Note:
Bootstrap CDN is a public content delivery network that enables users to load CSS, JavaScript, and images remotely from its servers. BootStrap CDN links to code to access built-in CSS library classes.
Containers Containers are used to center and fill the actual content horizontally.
Rows rows encapsulate columns.
Columns Columns are direct children of rows. Content must be placed in columns. Columns with no specified width are automatically displayed as equal-width columns. We can specify column widths explicitly or assign different widths to different screen sizes. We can specify background colors for different rows or columns using predefined utility classes (such as bg-success, bg-info, bg-danger, bg-warning), stylesheets or inline styles.
Border is a predefined class in BootStrap that is used to create borders around cells. Additionally, there are several border utility classes (such as border-dark, border-light, border-danger, border-success, border-warning) that can further enhance the look and feel by giving color or border width.
Related tutorial recommendations: "javascript basic tutorial" "bootstrap tutorial" "HTML video tutorial"
