XHTMLでページレイアウト用のテーブルを使用している場合（つまり、XHTMLではno-noを使用している場合）、レイアウトに余分なスペースを追加することは間違いありません 。 この問題を解決するには、HTMLテーブル定義と統治スタイルシートの詳細を確認する必要があります。
HTMLテーブル定義
デフォルトでテーブルのHTMLタグは、スペース要件の一部を制御しません。 HTMLドキュメント内のテーブルタグに関する3つのことを確認します。
- あなたのテーブルにはcellpadding属性が0に設定されていますか？
- セルパディング= "0"
- あなたのテーブルのcellspacing属性が0に設定されていますか？
- cellspacing = "0"
- あなたのコンテンツとテーブルのタグの前後に空白がありますか？
3番はキッカーです。 多くのHTMLエディタは、読みやすくするために、コードをすべて空白にしたいと思っています。 しかし、多くのブラウザでは、タブ、スペース、キャリッジリターンをテーブル内の必要な余分なスペースとして解釈します。 あなたのタグの周りの空白を取り除くと、きれいなテーブルがあります。
スタイルシート
しかし、それはオフのHTMLではないかもしれません。 カスケーディングスタイルシートは表の表示属性をいくつか制御しますが、ページによっては、最初に意図的に表固有のCSSを追加している場合としない場合があります。
支配するCSSファイルをスキャンして、 表、thまたはtdのプロパティ内の次のいずれかの値を探し 、必要に応じて調整します。
- borderは、表またはセルの境界の属性を指定します。
- border-collapseは隣接する境界線を1つとして扱い、境界線の重複を避ける
- パディングでは、各セルの周囲にピクセル単位で空白があります
- text-alignは、セル内のテキストの配置を決定します
- border-spacingはセル間の間隔をピクセル単位で設定します。
代替案
現代のレスポンシブなWebデザインのほとんどはカスケーディングスタイルシートを使用してページに要素を配置して、HTMLテーブルを使用することはできますが、標準は確立されており、今日のブラウザで普遍的にサポートされています。 テーブルは表形式のデータを表示するという本来の目的にはまだまだ意味がありますが、ページのレイアウトやコンテンツを整理するには、代わりにCSSレイアウトを使う方がはるかに優れています。