TOPページ >  テーブルを作成する, スタイルシート(CSS)の記述 > テーブルの余白などのスタイルを指定する

テーブルの余白などのスタイルを指定する

ホームページやブログなどで表を表示させるには、TABLEタグやTR、 TDタグなどを使用しますが、そのままでは見づらいのでALIGN属性やPADDINGを 指定して見映えを良くする必要があることもしばしばです。

しかし、セルの一つ一つにこれらの属性やスタイルを記述するのには 手間がかかりますし、変更したいときも大変です。

そんなときは、スタイルシート(CSS)でまとめて設定するのがおすすめです。
例えば、こんなテーブルは文字と枠がくっついてしまって少し見づらく感じます。

番号名称主な働き
1フェニルアラニン精神を安定させてストレスを緩和
2スレオニン成長の促進、組織の修復など
3ヒスチジン食欲を抑制し、エネルギーの代謝を活発に

そこで、スタイルシートを使用して少し体裁を整えてみます。

番号名称主な働き
1フェニルアラニン精神を安定させてストレスを緩和
2スレオニン成長の促進、組織の修復など
3ヒスチジン食欲を抑制し、エネルギーの代謝を活発に

このサンプルのソースは、次のようになっています。

<style type="text/css">
<!--
.mytable table {
font-size:12px;
line-height:1.5em;
}
.mytable th {
font-weight: normal ;
text-align:center;
background-color: red ;
color: white ;
padding: 0 5px;
}
.mytable td {
background-color: white;
padding: 0 5px;
}
-->
</style>

<div class="mytable">
<table border="1" cellpadding="0" cellspacing="0">
<tr><th>番号</th><th>名称</th><th>主な働き </th></tr>
<tr><th>1</th><td>フェニルアラニン</td><td>精神を安定させてストレ スを緩和</td></tr>
<tr><th>2</th><td>スレオニン</td><td>成長の促進、組織の修復など </td></tr>
<tr><th>3</th><td>ヒスチジン</td><td>食欲を抑制し、エネルギーの代 謝を活発に</td></tr>
</table>
</div>

このサンプルでは、

  1. mytableというクラスを指定したタグ内のテーブルの 文字の大きさを 12ピクセルに、また行の高さを1.5emに指定
  2. mytableというクラスを指定したタグ内のTHタグの スタイルを、文字の太さ:普通、文字の位置:中揃え、背景色:赤、文字の色:白、左右の余白:5ピクセル に指定
  3. mytableというクラスを指定したタグ内のTDタグの 背景色を白、左右の余白を 5ピクセルに指定

というふうになっており、THやTDタグの一つ一つにスタイルを指定する 必要がありません。

この指定は、mytableというクラスを指定したタグ内で のみ有効なので、その他(このスタイルを適用したくない既存のテーブル)は そのままになります。

もちろんこのサンプルのように<style type="text/css"> でページに記述してもいいですし、外部スタイルシートに組み込んでも構いません。

いろいろなスタイルのテーブルを使用したい方は、クラス名を変えていくつか 外部スタイルシートに指定しておくと便利かもしれません。

外部スタイルシートについて詳しくは、こちらをご覧ください。→外部からスタイルシートを読み込む

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
テーブル自動作成フォーム2
セル内の文字/画像の縦方向表示位置を指定する
セル内の文字/画像の横方向表示位置を指定する
セル内の余白を指定する
セルとセルの間隔を指定する
テーブルの背景画像を表示する
テーブルの背景色を指定する
テーブル枠の色を指定する
テーブルに枠をつける
テーブルの左右に文字/画像を回り込ませる
テーブルに表題をつける
セルのサイズを指定する
テーブルのサイズを指定する
テーブルに画像やボタンを表示する
横にまたがるセルを作る
縦にまたがるセルを作る
テーブルを作成する
テーブル自動作成フォーム
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス