Pertama sekali, semua orang harus tahu bahawa HTML ialah bahasa penanda standard yang digunakan untuk membuat halaman web HTML membolehkan penggunaan tag
untuk membuat jadual; Helaian (CSS), tidak mungkin untuk membuat jadual tanpa menggunakan tag Jadual boleh dibuat dalam HTML! Kerana terdapat pelbagai rangka kerja CSS yang tersedia seperti BootStrap, Foundation, Pure, Bulma, UI kit, Materialize CSS, Semantic UI, Spectre dan banyak lagi.
Antaranya, Bootstrap ialah rangka kerja CSS yang digunakan secara meluas. Sistem grid Bootstrap mempunyai flexbox terbina dalam, yang merupakan model susun atur satu dimensi yang menyediakan pengedaran spatial dan fungsi penjajaran yang berkuasa antara item dalam antara muka.
Yang berikut mencipta jadual dengan menggunakan rangka kerja BootStrap CSS
Kodnya adalah seperti berikut:
<!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>Kesannya adalah seperti berikut :
Nota:
Bootstrap CDN ialah rangkaian penghantaran kandungan awam yang membolehkan pengguna memuatkan CSS, JavaScript dan imej dari jauh dari pelayannya. CDN BootStrap memaut ke kod untuk mengakses kelas perpustakaan CSS terbina dalam.
Bekas digunakan untuk memusatkan dan mengisi kandungan sebenar secara mendatar.
Baris merangkumi lajur.
Lajur Lajur ialah anak baris langsung. Kandungan mesti diletakkan dalam lajur. Lajur tanpa lebar yang ditentukan secara automatik dipaparkan sebagai lajur yang sama lebar. Kami boleh menentukan lebar lajur secara eksplisit atau menetapkan lebar yang berbeza kepada saiz skrin yang berbeza. Kami boleh menentukan warna latar belakang untuk baris atau lajur yang berbeza menggunakan kelas utiliti yang dipratentukan (seperti bg-success, bg-info, bg-bahaya, bg-warning), helaian gaya atau gaya sebaris.
Border ialah kelas yang dipratentukan dalam BootStrap yang digunakan untuk mencipta sempadan di sekeliling sel. Selain itu, terdapat beberapa kelas utiliti sempadan (seperti gelap sempadan, terang sempadan, bahaya sempadan, kejayaan sempadan, amaran sempadan) yang boleh meningkatkan lagi rupa dan rasa dengan memberikan warna atau lebar sempadan.
Tutorial berkaitan yang disyorkan: "Tutorial Asas JavaScript" "Tutorial bootstrap" "Tutorial Video HTML"
