課題

タグを使用せずにテーブルを作成するにはどうすればよいですか?

藏色散人

リリース： 2021-08-20 10:53:15

オリジナル

3331 人が閲覧しました

前回の記事「フロントエンド三銃士を使って美しいカウントダウンエフェクトを作成する方法」では、HTML、css、JavaScriptでカウントダウンエフェクトを実現する方法を紹介しました。困っている人はそれについて学ぶことができます~

この記事の焦点は、

タグを使用せずにテーブルを作成する方法を説明することです。

まず、HTML は Web ページの作成に使用される標準のマークアップ言語であることを知っておいてください。HTML では

タグを使用してテーブルを作成できますが、実際には 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>

ログイン後にコピー

効果は次のとおりです。 :

課題 <table> タグを使用せずにテーブルを作成するにはどうすればよいですか?

注:

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 ビデオチュートリアル」

以上が課題

タグを使用せずにテーブルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。