HTML テーブルの列を結合します。 セルを結合します。 垂直方向に結合されたセルの使用
次に、テーブルの作成に関する最も難しいトピックに移りますので、細心の注意を払ってください。 HTML テーブル内のセルを結合する方法について話しています。
似たような問題をいくつか解くと、 テキストエディタたとえば、最も一般的なのは Word です。その場合は、適切なボタンを押すだけでほとんどすべての処理が自動的に行われます。 しかし、HTML でこの問題を解決することについて話すと、ここではすべてが異なります。 そして、注意を払っていれば、その仕事はそれほど大変なことではないと思われるでしょう。
行内のセルを結合する
まず最初に、HTML で表内の行を結合する方法を説明します。 属性はこれに役立ちます コルスパン、次のようなタグで機能します
たとえば、この属性に値を割り当てます。 2 。 その結果、タグが属するセルは水平方向に正確に増加します。 2 回して、隣のものを置き換えます。 ただし、移動されたセルはどこにも移動せず、テーブル内に存在し、削除する必要があるまったく新しい列にのみ存在します。
これがどのように行われるかを練習してみましょう。 それでは始めましょう。 次のようなテーブルを作成してみましょう。
上記のルールに従って、行を作成し、単純なセルを 1 つ追加し、同じ行に 2 つの単純なセルの代わりとなるセルを追加する必要があります。
次の行では、3 つを追加するだけです。 単純なセル。 簡単そうに思えますが、考えをコードに落とし込んでみましょう。
| 1 | 2 | |
| 3 | 4 | 5 |
それでおしまい！ 全然大したことないよ！
列内のセルを結合する
セルを垂直方向に結合するのは、水平方向よりも少し難しくなります。 この問題は属性を使用して解決されます。 行スパン、タグに割り当てられます
この属性がに設定されている場合、 2 、セルのサイズが垂直方向に増加し、次の行まで拡張されます。 サイズが大きくなるセルの下のセルは右に移動し、再び追加の列が作成されます。 これを削除するには、セルを削除するだけです。
次のテーブルを作成しましょう。
何をしなければならないかを考えてみましょう。 単純なセルの 2 倍の垂直方向のスペースを占めるセルを追加する必要があります。 次に、同じ行に 2 つの単純なセルを追加します。
次の行に進みましょう。 ここではすでに 忙しい場所上部のセル。 次のセクションに進み、この行で行う必要があるのは 2 つの単純なセルを追加することだけであることを確認してください。 それをコードに入れてみましょう:
| 1 | 2 | 3 |
| 4 | 5 |
繰り返しますが、複雑なことは何もありません。
1つのテーブルで縦横同時結合
実際の状況では、このタイプのテーブルが非常に頻繁に見つかります。 私たちが提案した推論を使用して、HTML コードを使用して次の表を作成して自分で試してみてください。
それでもうまくいかない場合は、次のような答えがあります。
| 製品 | 税率 | ||
|---|---|---|---|
| 2015年1月1日から1月31日まで | 2016年1月1日から1月31日まで | 2015/01/01より | |
| ディーゼル燃料 | 3450こする。 1トン用 | 4150こする。 1トン用 | 3950こする。 1トン用 |
2 つ以上のセルを 1 つに結合するには、タグの Colspan 属性と rowspan 属性を使用します。
例12.3。 間違ったセルの結合
| セル1 | セル2 | |
| セル 3 | セル4 | |
結果 この例図に示されています。 12.5。
米。 12.5。 テーブル内の追加セルの外観
例の最初の行では 3 つのセルを指定しており、そのうち 2 つは Colspan 属性を使用して結合されていますが、2 行目では 2 つのセルのみが追加されています。 このため、ブラウザに表示される追加のセルが表示されます。 それは図ではっきりとわかります。 12.5。
Colspan 属性と rowspan 属性の正しい使用法を例 12.4 に示します。
例12.4。 セルを垂直方向と水平方向に結合する
| ブラウザ | インターネットエクスプローラー | オペラ | Firefox | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| サポートされています | いいえ | はい | いいえ | はい | はい | はい | はい |
この例の結果を図に示します。 12.6。
米。 12.6。 セルが結合された表
このテーブルには 8 つの列と 3 つの行があります。 「Internet Explorer」、「Opera」、「Firefox」と刻まれたセルの一部は、ある場所では 2 つのセルで結合され、他の場所では 3 つのセルで結合されます。 「ブラウザ」というラベルの付いたセルには、垂直結合が適用されています。
興味深い機能についてまだお話しておきたいと思います HTML言語。 これはいわゆる セルの結合テーブル。 例を見るのが一番良いです - シンプルなテーブルの HTML コードをリスト 5.10 に示します。
リスト5.10
これは通常のテーブルで、セルには番号が付けられています。これにより、将来的には簡単になります。 図では、 図 5.2 は、Web ブラウザ ウィンドウでの外観を示しています。
さて、図の表を見てみましょう。 5.3.
ここではいくつかのセルを結合しました。 結合されたセルが 1 つに結合されたように見えることがわかります。 これを行うにはどうすればよいでしょうか?
特にこの目的のためにタグと
米。 5.2.セルが結合される元のテーブル
米。 5.3.図に示されているテーブル。 5.2、いくつかのセルを結合した後 (結合されたセルは番号を追加することで示されます)
複数のセルを水平方向に 1 つに結合するには、次の手順に従う必要があります。
1. コード内で検索する HTMLタグ
結合セル4+5と12+13+14+15も同様に作成してみましょう。
セルを垂直方向に結合するのは少し難しくなります。 これを行うために従う必要がある手順は次のとおりです。
1. HTML コード内で、結合する最初のセルを含む行 (タグ) を見つけます (行を上から下に数えた場合)。
2. この行のコード内でタグを見つけます。
6 番目のセルを作成したタグは、最初のセルと結合されたため、2 行目から削除したことに注目してください。
とても便利なアイテムです。 彼らと一緒なら何でもできます。 もちろん、主な目的は情報を表の形式で配置することです。 しかし、ウェブサイト開発者はさらに先を行きました。 かつて、テーブルを使用して Web サイトのフレームワークを作成することが非常に人気がありました。 現在、専門家はこのようなことをしないように努めています。
テーブルは次の理由で広く使用されています。 大量属性。 たとえば、行または列を結合するプロパティは非常に便利であることがわかりました。
理論入門
HTML では、セルの結合は、colspan と rowspan という 2 つの属性を使用して行われます。 tdタグに指定します。
このトピックを詳しく説明する前に、まずテーブルの構造を見てみましょう。 どのテーブルにも行があり、その中にセルがあります。 最初はすべてのテーブルに同じ数のセルが含まれている必要があることに注意してください。
上の図は 2 つの行を示しており、それぞれに 3 つのセルがあります。 こちらは通常のテーブルです。 任意の行でより少ない数のセルを指定すると、テーブルが「たわみ」、すべてが正しく表示されなくなります。
HTML テーブル: セルを垂直方向と水平方向に結合する
何かを結合する場合は、より少ないセルまたは行のみを指定できます。 ただし、削除された要素の代わりに、先頭に最も近い要素に追加の属性を指定する必要があります。 列を結合する場合はcolspan、行を結合する場合はrowspanを使用します。 属性値は結合する要素の数を指定します。
先頭に近い要素で指定する必要があることに注意してください。 たとえば、上の画像で、セル 1 と 2 を結合する場合は、セル 1 の Colspan 属性に値 2 を指定します。 そして、セル番号 2 または 3 を削除しても、もう問題はありません。
考え方としては、セルが占有するスペースをセルに伝えるということです。 デフォルト値は 1 です。
HTML テーブル内でセルを垂直方向に結合する場合も、同じ原則に従います。 占有スペースが垂直方向にカウントされるだけです。 下の写真を参照してください。
ここでは、番号 43 のセルが 2 行を占めています。 これを行うには、rowspan 属性を指定します。 覚えやすい:
- 行 - 文字列。
- Col - 列/列。
- スパン - 関連。
この言語の作成者は、それを人間の言語にできる限り近づけて、たとえそれを知らなくても少なくとも何らかの形で理解できるようにしようとしました。
HTML では、セルの結合を垂直方向と水平方向の 2 方向で一度に行うことができます。 これを行うには、両方の属性を同時に指定します。
上の図では、行、列、および同時に列と行の結合を実行できることがまさに示されています。
HTML: セルを結合します。 例
大きな表で、より複雑なステップバイステップの例を見てみましょう。 下の左側の図は、通常のテーブルの元のバージョンを示しています。 そして右側は、2 行目の 2 つのセルを結合するオプションです。 これにより、HTML コードの比較がより明確かつ簡単になります。
中央の 3 つのセルを結合することもできます。 最初のケースでは、colspan 属性がセル番号 1 に指定されています。 ここでは、最初のものは変更されず、2 番目のものには 3 のコルスパンが追加されます。
行内のすべての単一セルを結合する場合は、4 つの tds を削除し、最初の td にcolspan="5" を指定します。
ご覧のとおり、実際にはこれはすべて簡単です。 複雑なことは何もありません。 重要なことは、初めてすべてを注意深く理解することです 落とし穴テーブルに配置する場合、問題は発生しません。
サイトフレームとしてのテーブル
HTML では、セルの結合は通常の情報表 (Word や Excel など) に常に使用されるわけではありません。 Web サイト開発者は、Web サイトのレイアウトにこれらをよく使用し、過去にも使用していました。
たとえば、この Web サイトのモックアップを考えてみましょう。 このデザインは非常にシンプルで原始的です。 しかし、ここでは明示的に Union の使用を示すことができます。
元々は 3 行、それぞれ 2 つのセルからなるテーブルがありました。 次に、サイトのロゴを収容するために、最初の行の 2 つのセルが結合されました。 結局のところ、「地下室」を配置するために同じことを行いました。
このおかげで、デザイン要素を所定の位置に配置することができ、その境界を超えるものは何もありません。 とても便利でシンプルです。 だからこそ人気があったのです。 現在、ブロックの作成には div タグが推奨されています。
結論
また、HTML テーブルでは、任意の方法でセルを結合できることを覚えておいてください。 それはすべて、何が必要か、そしてそれをどのように手配したいかによって異なります。 重要なことは混乱しないことです。 大きなテーブルを作成したい場合は、 多数の関連付けを行う場合は、最初に紙またはペイントですべてを描くことをお勧めします。 初心者のレイアウトデザイナーにとっても簡単です。
経験を積むと、このような操作が頭の中で簡単に実行できるようになります。
HTML のテーブルには 2 つの機能があります。 1 つ目はテーブル自体、つまりテーブルの形式で情報を表示することです。 そして2つ目はページのレイアウトです。 コンテンツの個々の部分は異なる表のセルに配置されるため、ページ上の適切な場所に配置されます。
テーブルの作成
HTML でテーブルを作成する方法を見てみましょう。 これはタグを使用して行われます
| セルを行に追加します。 タグを閉じる必要があることを忘れないでください。 たとえば、次のテーブルを作成してみましょう。
テーブルのフレームを表示するには、
|
