HTMLテーブルについて知っておくべきことすべて



この記事では、HTMLテーブルの詳細で包括的な知識を提供します。実行できるさまざまなタグとフォーマット。

技術的な始まり以来、テーブルはデータを保存および視覚化する一般的な方法です。 2つ以上の要素を簡単に比較できるテキスト情報や数値データを表示するために、ほぼすべての分野で使用されています。この記事では、私は議論します 次の順序のテーブル:

HTMLテーブルとは何ですか?

簡単に言うと、テーブルは行と列で構成される関連データのコレクションです。ご存知のとおり、HTMLは、Webページを作成してWebブラウザに表示するための標準のマークアップ言語です。したがって、テーブルの作成と操作は、HTMLを習得するための重要なサブスキルになります。このブログでは、HTMLでテーブルを操作する方法を学びます。





HTML5
HTMLテーブルを定義するには、

鬼ごっこ。内部
タグ、最初にテーブルの行を定義します 鬼ごっこ。次に、テーブルヘッダーをで定義します タグにはテーブルの本体が含まれます。

ヘッダー、フッター、本文を含むHTMLテーブル
鬼ごっこ。テーブル内のデータまたはセルは、を使用して定義されます 鬼ごっこ。

HTMLテーブルタグ

まず、テーブルの作成に使用されるHTMLタグのリストを見てみましょう。後でこのブログを進めて、例を使用してそれらの使用方法を学習します。



  • テーブルを定義するために使用されます
  • テーブルの行を定義するために使用されます
  • :本文の内容をテーブルにグループ化するために使用されます
  • :フッターの内容をテーブルにグループ化するために使用されます
  • 次に、テーブルを作成するためのサンプルHTMLコードを見てみましょう。

     
    テーブルのヘッダーセルを定義するために使用されます
  • テーブル内のセルを定義するために使用されます
  • テーブルのキャプションを定義するために使用されます
  • 書式設定のためにテーブル内の1つ以上の列のグループを指定するために使用されます
  • :要素内の各列の列プロパティを指定するために使用されます
  • テーブル内のヘッダーコンテンツをグループ化するために使用されます
  • 名前 年齢
    アビシェク 18
    ボブ 2. 3

    出力:



    HTMLテーブルのバリエーション

    • CellpaddingおよびCellspacing属性

    テーブルセルの空白を調整するために使用できるcellpaddingとcellspacingという2つの属性があります。 cellspacing属性はテーブルセル間のスペースを定義し、cellpaddingはセルの境界とセル内のコンテンツ間の距離を表します。

    セルスペーシングとセルパディング
    名前 年齢
    アビシェク 15
    ボブ 2. 3

    • ColspanおよびRowspan属性

    Colspan属性は、2つ以上の列をマージするために使用されますが、rowspansは、2つ以上の行をマージするために使用されます。

    コルスパン&ロウスパン
    バッチ 名前 年齢
    コンピュータサイエンス アビシェク 15
    ボブ 2. 3
    ブレーク

    • テーブルの高さと幅

    HTMLを使用すると、テーブルの高さと幅を調整できます。幅属性と高さ属性は、それぞれテーブルの幅と高さを設定するために使用されます。画面上で使用可能な領域のパーセンテージまたはピクセルのいずれかで指定できます。

    HTMLテーブルの幅と高さ
    アビシェク 15
    ボブ 2. 3

    • テーブルヘッダー、本文、およびフッター

    テーブルは、ヘッダー、本文、フッターの3つのセクションに分割できます。ヘッダーとフッターは、すべてのページに共通しているWord文書のヘッダーとフッターに似ていますが、本文にはメインコンテンツが含まれています。

    タグは個別のテーブルヘッダーを作成しますが、タグは個別のテーブルフッターを作成します。

テーブルヘッダー
テーブルフッター
名前 年齢 マーク

  • テーブルの背景とキャプション

テーブルの背景を設定することもできます。 Bgcolor 属性は、テーブル全体と1つのセルの背景色を設定しますが、background属性は、テーブル全体と1つのセルだけの背景画像を設定します。

python__init__メソッド

キャプションタグは、テーブルの上部に表示されるテーブルのタイトルまたは説明として機能します。

HTMLテーブルの背景テーブルキャプション
列1 列2 列3
行1セル1 行1セル2 行1セル3
行2セル2 行2セル3
行3セル1

これで、この記事は終わりです。上記のスニペットを実行すると、HTMLでテーブルを作成する方法を理解できたはずです。このブログがあなたにとって有益で付加価値があることを願っています。

チェックしてください 25万人以上の満足した学習者のネットワークを持つ信頼できるオンライン学習会社であるEdurekaが世界中に広がっています。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なウェブサイトを作成し、Amazon Simple Storage Service(S3)にデプロイする方法を学ぶのに役立ちます。

質問がありますか?この記事のコメントセクションにその旨を記載してください。折り返しご連絡いたします。