HTMLのレッスン。 セルのマージ

HTMLのテーブル -非常に便利なアイテム。 それらを使用すると、何もすることができます。 もちろん、主な目的 - 表の情報を配置します。 しかし、サイトの開発者はさらに行っています。 1時間で、サイトのフレームワークを作成するために、テーブルを使用することは非常に人気がありました。 今、専門家はそうしないようにしようとしています。

テーブルがあるため、属性の多数の彼らの幅広いアプリケーションを発見しました。 例えば、非常に有用な特性は、行または列を組み合わせることになりました。

理論入門

COLSPANとROWSPAN：HTMLでは、細胞の労働組合は、二つの属性によって起こります。 これらは、TDタグに指定されています。

私たちが話題を掘り下げ前に、私たちが最初に、各テーブルの構造を分析してみましょう。 セル - すべてのテーブルの行、およびそれにはあります。 最初に、すべてのテーブルが同数の細胞を含んでいなければならないことに注意してください。

示される2つの行上記三個のセルの各々の図。 これは、一般的なテーブルです。 あなたが任意のボックスにある場合は、セルの小さい数を入力し、テーブルには、すべてが正しく表示されません、「外に移動」です。

HTML-表：垂直方向と水平方向のセルを結合します

指定するには、細胞または文字列の小さな数は、マージするために何かを持っている場合にのみ使用することができます。 しかし、その代わりに、最近傍で削除された項目の追加の属性を指定する必要がトップに。 あなたが列を結合する場合は、COLSPAN、ストリングス、そしてROWSPAN場合。 属性の値は、マージするアイテムの数を示します。

あなたが先頭に最も近い要素で指定する必要がありますのでご注意ください。 あなたは、セル1と2を組み合わせたい場合たとえば、上の図では、次の2つの値を持つセル1 COLSPAN属性に指定する必要があります。 そして、位置番号2または3を削除し、それは問題ではありません。

一番下の行は、あなたはそれがかかりますどのくらいのスペースセルを伝えることです。 デフォルト値は1です。

マージ細胞は縦にHTMLテーブルは同じ原理で行われます。 単に占有スペースは、のように縦に考慮されます。 下図を参照してください。

ここで、数43を用いた細胞は、2つの文字列を取ります。 これを行うには、属性ROWSPANを指定します。 ただ、思い出しました：

• 行 - 列。
• COL - 列/コラム。
• スパン - 協会。

クリエイターもそれを知らなくても、何とか理解できるように、人間に可能な限りの言語を持って来ることを試みました。

垂直方向と水平方向：HTMLでは、細胞の労働組合は、二方向に行うことができます。 これを行うために、我々は両方の属性を指定します。

上の図は、ちょうどそれとの関連が行うことができます次のように述べている。行、列、または行と列の両方。

HTML：セルを結合します。 例

私たちは大きなテーブル上のより複雑な例のマイルストーンを考えてみましょう。 左側の下には、通常のテーブルの元のバージョンを設定します。 右 - 2行目の2つのセルの組み合わせを有する変異体。 だから、明確かつ簡単にHTMLコードを比較します。

また、セルの中央に3を組み合わせることができます。 最初のケースではCOLSPAN属性は、セルの№1を指定します。 ここで、最初は変更されません、2番目は 3に等しい、COLSPANに加えます。

あなたは、単一の行のすべてのセルをマージしたい場合は、最初はcolspan =を示す「を5」の4つのTDを削除します。

あなたが見ることができるように、実際には、すべてが簡単です。 複雑な何もありません。 最も重要なことは、慎重に、最初の時からのテーブルのすべての落とし穴を理解し、その後、何の問題は生じないべきではありません。

サイトのフレームワークとして表

HTMLでは、細胞の労働組合は、常に（WordやExcelの）情報との定期的なテーブルに使用されていません。 ウェブサイトの設計者は、多くの場合、しかし前に世論調査は、サイトのレイアウトのためにそれらを使用しています。

たとえば、サイトのレイアウトを考えます。 このデザイン - 非常にシンプルで原始的。 しかし、あなたは明示的に関連の使用を表示することができます。

二つのセルそれぞれ3列の表は、もともとありました。 次に、サイトのロゴを配置し、最初の行の2個のセルが結合されています。 一番下の行は、「地下室」を対応するために同じことを行うことです。

、その場所には、デザインの要素を配置することが可能であり、何もその限界を残さないことはありません。 これは非常に便利で簡単です。 したがって、それはとても人気がありました。 さて、divタグのブロックを作成することをお勧めします。

結論

そして、HTMLのテーブルセルのマージは、あなたが好きなものは何でもできることを覚えておいてください。 それはすべてあなたが望むものに依存し、どのようにそれを手配します。 重要なことは、混乱しないでください。 あなたが団体の数が多い大規模なテーブルを作成したい場合は、一枚の紙の上やペイントでそれをすべてを描画することをお勧めします。 Imposer初心者は、それが容易になります。

場合は、ゲインの経験、これらの操作は、簡単にあなたの頭の中で実行することができます。