Visual Web Developer での HTML テーブル編集のヒント
更新 : 2007 年 11 月
Visual Studio HTML テーブル エディタは、Web ページのレイアウトを定義したり、内容を列形式で表示したりするための HTML テーブルを操作できる強力なツールです。HTML テーブル エディタを最適に使用するためには次のヒントを参考にしてください。
HTML テーブルの編集
以下のポイントは、通常のテーブル編集動作についてです。
HTML テーブル エディタでは、table 要素、tr 要素、td 要素などの HTML 要素を視覚的に編集できます。HTML テーブル エディタはこれらの要素を編集するための便利なツールですが、HTML テーブルでサポートされていない機能は編集できません。
テーブル エディタは、HTML テーブル (table 要素とその子要素) を編集できますが、ASP.NET Table コントロール (asp:table 要素) は編集できません。ASP.NET Table コントロールは、HTML テーブルのように静的レイアウト用に使用されるものではなく、主にプログラムで使用されることを目的としています。
デザイン ビューは、ブラウザで表示されるのとほぼ同じようにテーブルを表示します。これは、デザイン ビューが、ブラウザとほぼ同じ方法でテーブルの HTML 要素を解釈するためです。詳細については、このトピックで後述する「サイズの設定と変更」を参照してください。
編集のスコープ
以下のポイントは、デザイン ビューで行った編集がテーブル要素にどのように適用されるかを理解するのに役立ちます。次の点に注意してください。
テーブル内のセルは、デザイン ビューに表示されているように、そのセルが開始する行または列のメンバとして見なされます。行または列に対する操作は、その行または列のすべてのメンバに影響します。colspan 属性または rowspan 属性が含まれているセルについて、デザイン ビュー上のセルをソース ビュー上の対応する td 要素に割り当てると、期待どおりに動作しない場合があります。
行に対する操作は、その行内の各 td 要素に影響します。tr 要素には影響しません。
列の選択または変更は、列内の th 要素に影響します。
サイズの設定と変更
テーブル エディタは、テーブル、行、または列のサイズを初期設定した際、またはこれらのサイズを変更した際、予測不可能な動作をする場合があります。テーブル要素のサイズ設定は、ブラウザでテーブルがどのようにサイズ設定されるかを反映します。たとえば、固有の幅設定を持たない列は、テーブル全体の幅、テーブル内の他の列の幅、およびすべての列に含まれる内容に従って小さくなったり大きくなったりします。
内容の優先順位
通常、セル内の内容のサイズは、セルまたは行の幅または高さの設定より優先されます。たとえば、テーブル セルにグラフィック、つまり img 要素が含まれている場合、グラフィックのサイズがセルまたはテーブルの幅より優先されます。これは、テーブル セル内のコントロールに対しても同様です。
セルにテキストが含まれている場合で、セルの nowrap 属性が設定されていないとき、テキストはセルの幅に合わせて折り返されます。ただし、テキストにスペースや区切り記号などの空白が含まれていない場合、テキストを折り返す場所がないため、テキストが収まるようにセル幅が調整されます。
内容のサイズは行の高さよりも優先されます。テキストがセル内で折り返される場合、行を表現する tr 要素に対して指定されている height 設定より、実際の行の高さの方が高くなる場合があります。
テーブル サイズの設定と変更に関するガイドライン
HTML の設計上、テーブルとその中に含まれる要素に対して矛盾するサイズ設定が割り当てられる可能性があります。たとえば、2 列構成のテーブルに 100% の幅が割り当てられ、2 つの列に対してそれぞれ幅 100 ピクセルが割り当てられるなどします。
テーブル エディタでサイズ設定がどのように適用されるかを次の表に示します。すべての場合において、内容の幅が優先されます。
指定されるサイズ |
動作 |
|---|---|
テーブルとそのテーブルのすべての列に対して幅が設定されている。または、テーブルとそのテーブルのすべての行に対して高さが設定されている。 |
テーブルのサイズが優先されます。テーブルのサイズに基づいて列または行のサイズが比例的に計算されます。 |
テーブルとそのテーブルのいくつかの列に対して幅が設定されている。またはテーブルとそのテーブルのいくつかの行に対して高さが指定されている。 |
サイズが設定された要素は正確なサイズを使用してレンダリングされ、残りの要素は、テーブルの全サイズを満たすようにサイズ変更されます。 .gif "メモ") メモ :
テーブル エディタは、指定されていないテーブル要素の幅を "自動" と表示します。
|
テーブルの各列に対しては幅が指定されているがテーブルそのものに対しては幅が指定されていない。または、テーブルの各行に対しては高さが指定されているが、テーブルそのものに対しては高さが指定されていない。 |
テーブルのすべての列の幅またはすべての行の高さが加算されて、テーブルの幅または高さが計算されます。 |
テーブルおよびテーブルのどの要素に対しても幅または高さの指定がない。 |
セル内容と、境界線に必要なスペースにのみ基づいて幅または高さが計算されます。 |
| メモ : |
|---|
行または列のサイズを変更する際、td 要素が異なる高さまたは幅の単位を使用している場合、テーブル エディタはすべての単位をピクセルに合わせます。 |