tableの属性cellspacing="0", cellpadding="0"をCSSで対応する

CSSによるレイアウトが普及して、table要素をレイアウト用途に使うことは少なくなったけれども、純粋な表として使うことはなくならない。

で、表とセルの隙間をなくすために<table cellspacing=”0″ cellpadding=”0″>なんてするんですが、CSSでコントロールしたほうが後々修正は楽。このやり方をすぐ忘れてしまうのでメモ。

cellspacing=”0″ cellpadding=”0を使った例

<table cellspacing="0" cellpadding="0">
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
</table>

cellspacing=”0″ cellpadding=”0″を使わない例

<style type="text/css">
table {
	border-collapse: collapse;
}
</style>

<table>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
</table>

border-collapse: collapse;一発で隙間がなくなる。楽。多くの場合隙間は必要ないので、デフォルトで入れておき、例外として、cellpadding=”2″等の0以外のケースを対応する。これをCSSでやろうとすると下の通り。

table {
	border-collapse: separate;
	border-spacing: 2px;
}

ただ残念なことに、border-spacingはIEが対応していないので実質使えない。そういう時はどうするか。素直に<table cellspacing=”2″>としてやるのが正解。

投稿者: Shinji Kawarano

瓦野 晋治 (かわらの しんじ) 個人と企業をつなぐサービスに目がない、PC、インターネットおたく。最近はさぼり中ですが、ギター弾きであり、オルタナ、パンク、ハードコアからジャズ、クラシック、現代音楽までのリスナーです。 1980年生まれ。早稲田大学大学院理工学研究科(経営システム工学、人間工学)修了。 大学院在学中にWebデザイナーになりたいと思い立ち、株式会社ユニークアイディ(現 株式会社 関心空間)にアルバイトで採用される。同社が開発した関心空間にどっぷりとはまり、修論を関心空間を題材に執筆。2003年、関心空間に正式に参加。 関心空間社では、関心空間のSEO、アクセス解析、ユーザー動向分析などを担当。また、企業への関心空間エンジン導入案件の、企画、導入支援、制作ディレクション、xhtml, CSS コーディング 等も担当。社内のナレッジコミュニティに、インターネットトレンドやニュースを関心空間ではどう活かせるのか等のコンテンツを投稿し続けた。 2007年9月〜2009年2月 アースリングに在籍。ここは親会社がアニメ企画制作会社の旭プロダクション。主にWebサイト制作ディレクションを担当。 結果、3年に少し足りない2年7ヶ月で退社。国プロやお客さんとの仕事を通じ、基本的な仕事の進め方から、コンサルタントやアナリストとしての在り方を勉強させてもらいました。 2008年8月〜現在 個人事業主としてかわらの創造研究所を開業。個人的な頼み事(例えば、ロケットニュース24)や、ブログと落語ニュースで発生するものを処理するためのもの。 基本的にはロケットニュース24やポーチのサポートをしています。顛末はこちらをご覧下さい。(私事ですが

ディスカッションに参加

1件のコメント

  1. ピンバック: PC Portal
コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。