简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > 本文

課題 タグを使用せずにテーブルを作成するにはどうすればよいですか?
藏色散人
リリース： 2021-08-20 10:53:15
オリジナル
3107 人が閲覧しました

前回の記事「フロントエンド三銃士を使って美しいカウントダウンエフェクトを作成する方法」では、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 フレームワークを使用してテーブルを作成します。

コードは次のとおりです。




    
    创建表

    
    

    







    
示例表格


    

        
Id

        
姓名

        
性别

        
工资

    


    

        
101

        
张三

        
男

        
50000

    


    

        
102

        
李四

        
女

        
30000

    


    

        
103

        
王二

        
男

        
40000

    


    

        
104

        
赵五

        
女

        
45000
ログイン後にコピー

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

課題 <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 サイトの他の関連記事を参照してください。

関連ラベル：
表面
ソース：php.cn
前の記事：10 個の美しく実用的な Bootstrap バックグラウンド管理システム テンプレート (今すぐダウンロードしてください) 次の記事：8 つの Bootstrap 企業 Web サイト テンプレート (ソース コードの無料ダウンロード)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Vue 3 および Vuetify 3 はコンポーネント内の SCSS/SASS 変数にアクセスします Vue3 コンポーネントで事前定義された変数を使用したいと考えています。 <template><divclass="roundedimg-contain...
から 2023-11-17 13:52:29
0
1
293
XMLファイルに改行文字（改行文字）を追加するにはどうすればよいですか？ XML ファイルがあり、次のようにテキスト「サンプル テキスト 123」を折り返したいと考えています。SampleText123 &#xA&#xD\n で言ったこと...
から 2023-11-16 16:42:38
0
1
199
フォーム内のオブジェクトのフィールドを検証する - Vue 3 + Vee-validate + yes いくつかのフィールドがオブジェクト内にあるフォームがあります: <scriptsetuplang="ts">...constschema:yup.S...
から 2023-11-16 13:56:09
0
1
169
Vue 3 は Props に基づいて動的にインポートします unplugin-icon を使用してアイコンコンポーネントを作成しています。通常、//scriptimportIconCopyfrom'~icons/prime/copy'//t...
から 2023-11-16 11:40:01
0
1
235
Vue 3 構成 API - すべての条件が満たされるまでフォーム送信ボタンを無効にする すべての入力フィールドが入力され、エラーがなくなるまで、フォーム送信ボタンを無効にしたいと考えています。 <button:disabled="disabled&qu...
から 2023-11-13 09:41:53
0
3
438
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！