HTMLで縦長の表を作る方法です。 ALIGN 属性と VALIGN 属性

23.10.2023

テーブルの多用途性と、その外観を制御する多数のパラメータのおかげで、テーブルは長い間、Web ページのレイアウトの明確な標準となってきました。 目に見えない境界線を持つテーブルはモジュール式グリッドのように見え、そのブロック内に Web ページ要素を配置すると便利です。 ただし、これは完全に正しいアプローチではありません。 HTMLオブジェクト独自の目的のために定義されており、その意図された目的に使用されない場合、およびどこでも、これは代替手段がないことを意味します。 Web サイトのレイアウトのテーブルがレイヤーに置き換わるまで、これは長い間当てはまりました。 これは、レイヤーが常に使用されるようになったという意味ではありませんが、テーブルは表形式のデータを配置するために使用され、レイヤーはレイアウトとデザインに使用されるという傾向がすでに明確に現れています。

テーブルの作成

テーブルは、テキストや画像を含めることができるセルの行と列で構成されます。 テーブルは通常、データを整理して表示するために使用されますが、テーブルはそれだけに限定されません。 テーブルを使用すると、テキストや画像の断片を任意に配置してページ レイアウトをレイアウトするのに便利です。

Web ページに表を追加するには、タグを使用します

。 この要素は、テーブルの内容を定義する要素のコンテナとして機能します。 テーブルは行とセルで構成され、それぞれタグを使用して指定されます。 そして
。 テーブルには少なくとも 1 つのセルが含まれている必要があります (例 12.1)。 タグの代わりに使用可能 タグを使用する 。 タグでスタイル設定されたセル内のテキスト , ブラウザでは太字で表示され、セルの中央に揃えられます。 それ以外の場合、タグによって作成されたセル間の違い そして いいえ。

例12.1。 テーブルの作成

テーブルタグ

セル1 セル2
セル 3 セル4


セルの順序とその外観を図に示します。 12.1.

HTML のテーブルは非常に機能的であるため、Web サイト全体のレイアウト (読み取り) に使用できます。 ここでは、単純な HTML テーブルを Web ページに挿入する方法について説明します。マークアップのみを分析しますが、CSS スタイルを使用してテーブルを装飾する方が良いため、デザインには触れません。

テーブルのタグと属性

テーブルを作成するために必要な基本要素は次のとおりです。

  • - テーブルが内部に配置されるコンテナ (
      マーク付きまたは
        番号付きリストの場合)。
      1. 国境- フレームの厚さを決定する属性。 代わりに、border CSS プロパティを使用することをお勧めします。
    テーブルの署名を指定します。 コンテナを使用する必要はありませんが、テーブルにタイトルを付ける場合は、タグの直後に配置します。 、セルと行の外側。
    • - テーブル行 (同じ水平レベルにあるセル) を含むペアのタグ。
    • 、その中には非常に多くのセルが存在します: 1 つのタグ - 1 つのセル。
    • コードを詰まらせることなく、列をグループ化し、列を割り当てることができます。 一般的な特徴。 コンテナを使用すると、テーブルの論理部分を互いに分離できます。 タグの後に配置

    したがって、最初の行には 2 つの列があり、2 番目の列は 2 つの行を連結しています。 これを書き留めてみましょう:

    2 行目は 1 列です (その一部が 1 行目の 2 列目で隠れているだけです)。

    最後に、3 行目は 3 つの列を含む 1 つの列です。 行スパンそして コルスパンこれら 2 つのオプションを使用する

    任意の複雑さのテーブルを作成できます。 練習する。

    ネストされたテーブル

    名前が示すように、あるテーブルを別のテーブル内、または任意の列内に配置できます。 例として最後のマークアップを使用してこれを実行してみましょう。



    この記事を共有します:
    種類
    • よくある質問
    • 比較
    • 無料キー
    • テクニカルプレビュー
    • ニュース
    Meizu に Flyme アップデートをインストールする 2 つの方法 Meizu M3 の Android アップデート
    新しい記事



    - テーブルヘッダーセルを作成するタグ。 外部的には、その内容は他のセルの内容 (通常は内部のテキスト) とは異なります。 ブラウザはそれを太字で強調表示し、中央に配置します。
    		• - 作成に使用するコンテナ 単純なセル。 1 行にそのようなタグがいくつ含まれますか (タグ
    そこにない場合は、その後 .
    • ～と同じ目的に使用される . 含まれる可能性があります 、しかしその逆はありません。
  • スパン- コンテナプロパティが適用される列の数を指定する属性
    • .
    • , そして - テーブルをそれぞれ上部 (見出し)、メイン (本文)、および下部 (最終) 部分に分割できるコンテナー。 HTML テーブルでは、これらのタグの順序はコンテナの順序と同じです。 , そして
    HTMLドキュメント内で。
  • コルスパン行内のセルを結合するために必要です。 属性値には、結合するセルの数を指定する数値が含まれます。
  • 行スパンセルを列に結合します。

    • テーブル作成例

    HTML ドキュメントを作成し、次のコードをそこにコピーします。

    テーブルの例

    ウェブサイト作成ツール
    目的道具
    マーキングHTMLXHTML
    登録CSS
    発達PHPパイソン


    ブラウザでは、ドキュメントは次のように表示されます。

    コードのどの行が何を担当しているのかを考えてみましょう。

    • - テーブルを開いて、フレームの厚みを与えます。
      • - 彼らはそれにタイトルを付けました。
      • - ラインを開いた。
      • - ヘッダーデザインのセルを作成しました。
      • - 行に 2 番目のヘッダー セルを作成しました。 Colspan パラメーターは、このセルが水平方向に 2 つにまたがる必要があることを示しました。
      • - ラインを閉じました。 残りの行も同様に作成しました。
      • - ヘッダーではなく通常のセルを含むテーブルの 2 行目を追加しました。 後続の行とセルも同様に挿入されました。
      • ウェブサイト作成ツール
      目的 道具
      マーキング HTML XHTML
      - テーブルを閉じました。

    テーブルは、行とセルに分散されたデータの集合です。 ほとんどのセルには表形式のデータが含まれており、その他のセルには内容を説明する行見出しと列見出しが含まれています。

    HTML ドキュメント内にテーブルを作成するには、タグを使用します。

    、これはテーブルのすべての内容を含むコンテナーを表します。

    テーブルの作成は常に、 タグを使用して定義された行から始まります。

    、各行はセルで構成されます。 タグ セルを作成するためのタグのみを含めることができます。

    HTML には、セルを作成するための 2 つの異なるタグがあります。最初のタグは次のとおりです。

    ,
  • テーブルは行とタグで構成されています
    • ,
  • 各行は列 - タグで構成されます
    • ,
  • 列の名前は最初の行にあります - タグ
    • . 行番号と列番号の交差部分を内容として示すテーブルを作成しましょう。

    結果：

    ご覧のとおり、あまりきれいにはなりませんでした。装飾してみます。

    HTML テーブルパラメータ: インデント、幅、背景色、フレーム

    この目的のためにタグ

    、通常のデータセルを作成します。 デフォルトでは、タグの内容 左揃え。 セルを作成するための 2 番目のタグは、 を使用すると、列または行の見出しを含むセルを定義でき、そのようなセルの内容は太字で中央揃えで表示されます。 タグ そして ドキュメントの本文で使用できる任意の HTML 要素を含めることができます。

    最初のタイトル2番目のタイトル
    行1、セル1行1、セル2
    行 2、セル 1行 2、セル 2
    試す "

    テーブル内のテーブル

    HTML には、ネストされたテーブル、つまり他のテーブルの中に配置されるテーブルを作成する機能があります。 ネストされたテーブルを作成するには、ネストさせたいテーブルのコードをタグ内に配置する必要があります。

    		.

    たとえば、前に作成したテーブルを考えて、次のコードを 2 行目の 2 番目のセルに配置してみましょう。

    最初のタイトル2番目のタイトル
    行1、セル1行1、セル2
    行 2、セル 1 行 2、セル 2
    最初のタイトル2番目のタイトル
    行1、セル1行1、セル2
    行 2、セル 1行 2、セル 2

    テーブルは、Web ページを作成するための主要なツールの 1 つです。

    CSSを使わずにテーブルだけを使って複雑なデザインのページを作成できます。 「Web サイトの作成 - 最初のステップ」の一連のレッスンを完了している場合は、私たちが話している内容を理解していることになります。

    テーブルは行と列のセットであり、その交点にセルがあります。 例えば：

    HTML の観点からテーブルを見てみましょう。

    • テーブル自体はタグを使用して指定されます
      ,
    • テーブルには名前が付いています - タグ
    パラメータは多数あります。

    • 幅- テーブルの幅を設定します(ピクセルまたは画面幅の%)。
    • バックカラー- 表のセルの背景色を設定します。
    • 背景- テーブルの背景をパターンで塗りつぶします。
    • 国境- テーブル全体の周囲に指定された幅 (ピクセル単位) の境界線を設定します。
    • セルパディング- セルの境界線とその内容の間の余白をピクセル単位で設定します。
    これらのパラメータを適用してみましょう。

    結果：

    これはより良いですが、テーブル内のテキストと同様に、テーブルがウィンドウの左端に押し付けられています。 さらに 3 つのパラメータを追加して、これを修正しましょう。

    • 整列する- テーブルの配置を設定します: 左 (右)、右 (左)、中央 (中央)、
    • セル間隔- 表のセル間の距離を設定します（ピクセル単位）。
    • セルパディング- テキストと表セルの内部境界線の間の距離を設定します (ピクセル単位)。
    これらのパラメータを適用してみましょう。

    結果：

    表には二重枠があることに注意してください。 指定する場合 セル間隔="0"の場合、境界は通常の形式になります。

    結果：


    一般に、境界には 2 つのパラメータが関与します。

    • フレーム- テーブルの周囲のフレームのタイプを設定し、次の値を取ることができます。
      • 空所- フレームなし、
      • その上- 上部フレームのみ、
      • 下に- 下部フレームのみ、
      • サイド- 上下のフレームのみ、
      • 反対- 左右のフレームのみ、
      • 左- 左フレームのみ、
      • 右肩- 右フレームのみ、
      • 箱- フレームの 4 つの部分すべて。
    • ルール- 内部テーブル境界のタイプを設定し、次の値を取ることができます。
      • なし- セル間に境界線はありません。
      • グループ- 行のグループと列のグループの間のみの境界 (後で説明します)、
      • 行- 境界線は行間のみ、
      • コル- 境界は列間のみです。
      • 全て- すべての境界線を表示します。
    これらのパラメータを使用すると、必要に応じて境界を設定できます。 ここでは 1 つの例だけを示しますので、すべて自分で試してみてください。

    結果：


    境界は さまざまなブラウザ若干異なって表示されます。

    HTML タグ tr および td

    テーブルは行ごとに形成されます。 したがって、行 (tr) で指定されたパラメータの効果は、その行のすべてのセル (td) に拡張されます。 文字列には 3 つのパラメータを含めることができます。

    • 整列する- セル内のテキストを水平に配置します。次の値を取得できます: 左 (右)、右 (左)、中央 (中央)、
    • ヴァライン- セル内のテキストを垂直に配置します。値は上 (上)、下 (下)、中央 (中央)、
    • バックカラー- 線の色を設定します。
    例を見てみましょう:
    • 幅- 列の幅を設定します(ピクセルまたはパーセントで表します。表の幅を100%とみなします)。
    • 身長- セルの高さを設定します。同じ行内のすべてのセルがこの高さになります。
    たとえば、コードにタグを追加してみましょう。

    結果：


    幅と高さを設定しない場合、表は内容に応じて作成されることに注意してください (前の例ではこれが当てはまりました)。

    このレッスンは終了しました。テーブルの作成とデザインを練習してください。これらのスキルは、複雑な構造のテーブルを作成する次のレッスンで必要になります。

    Colspan タグ - 列を結合する

    複雑な構造のテーブルの最も一般的な用途は、Web ページのマークアップです。 写真を見てください:

    最初と 3 行目にそれぞれ 1 列が必要であることがわかりました。 これはパラメータを使用して実現されます コルスパンタグ

    最初の行は 1 つの列で構成され、6 つの列が含まれます。 これを書き留めてみましょう:

    2 行目は 6 つの列で構成されます。

    3 行目は 2 つの列で構成され、最初の行には 2 つの列が含まれ、2 番目の行には 4 つの列が含まれます。

    そんなに難しいことではありません。 図面上にグリッドを視覚的にオーバーレイし、行を上から下に 1 行ずつ書き込み、各行に必要な列数を記述します。

    Rowspan タグ - 行の連結

    このようなマークアップが必要な場合はどうすればよいでしょうか?

    2 行目には 1 列しかないことに注意してください。 最初の列は最初の行から拡張されており、単純に 2 つが含まれます。

    一見すると難しそうに見えますが、少し練習すれば、どんな複雑なテーブルも作成できるようになります。

    これらのパラメータ
    1 2 3
    。 この設定は、ブラウザーに複数の列を 1 つに結合するように指示します。 このパラメータの値は、マージされる列の数を示す数値です。

    例えば、

    		この列には 2 つの列が含まれています。

    私たちの例の場合:

    文書のタイトル

    サイトヘッダー
    メニュー コンテンツ
    サイトの一番下

    1 行目と 3 行目にそれぞれ 1 列が含まれていることに注目してください。

    Web ページのマークアップの別の例を見てみましょう。

    サイトヘッダー
    メニュー メニュー メニュー メニュー メニュー メニュー
    ニュース コンテンツ

    カウント - このテーブルには行と列が何行ありますか? これを行うには、頭の中で図面にグリッドを適用します。

    これにより、3 行 6 列になります。

    サイトヘッダー
    メニュー メニュー メニュー メニュー メニュー メニュー
    ニュース コンテンツ
    別の例を見てみましょう。 メニュー
    コンテンツ
    サイトの一番下

    キャップ

    別の例を見てみましょう。 メニュー
    コンテンツ
    サイトの一番下