タグを使用してテーブルを作成できますが、実際には Cascading Style を使用します。シート(CSS)、タグは使用不可、表はHTMLで作成可能！ BootStrap、Foundation、Pure、Bulma、UI kit、Materialize CSS、Semantic UI、Spectre など、さまざまな CSS フレームワークが利用可能だからです。
Bootstrap は、非常に広く使用されている CSS フレームワークです。 Bootstrap のグリッド システムには、インターフェイス内の項目間の空間分布と強力な位置合わせ機能を提供する 1 次元レイアウト モデルであるフレックスボックスが組み込まれています。
次は、CSS の BootStrap フレームワークを使用してテーブルを作成します。
コードは次のとおりです。
<!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>効果は次のとおりです。 :
注:
Bootstrap CDN は、ユーザーがサーバーからリモートで CSS、JavaScript、画像をロードできるようにするパブリック コンテンツ配信ネットワークです。 BootStrap CDN は、組み込み CSS ライブラリ クラスにアクセスするためのコードにリンクします。
コンテナ コンテナは、実際のコンテンツを水平方向に中央に配置して埋めるために使用されます。
行 行は列をカプセル化します。
列 列は行の直接の子です。コンテンツは列に配置する必要があります。幅が指定されていない列は、自動的に同じ幅の列として表示されます。列幅を明示的に指定することも、異なる画面サイズに異なる幅を割り当てることもできます。事前定義されたユーティリティ クラス (bg-success、bg-info、bg-danger、bg-warning など)、スタイルシート、またはインライン スタイルを使用して、さまざまな行または列の背景色を指定できます。
Border は、セルの周囲に境界線を作成するために使用される BootStrap の事前定義クラスです。さらに、色や境界線の幅を指定することで外観と雰囲気をさらに高めることができる、いくつかの境界線ユーティリティ クラス (border-dark、border-light、border-danger、border-success、border-warning など) があります。
関連チュートリアルの推奨事項: 「JavaScript 基本チュートリアル」「ブートストラップ チュートリアル」「HTML ビデオ チュートリアル」
