表の挿入

表の挿入方法について説明したページです。htmlタグによる単純な表の挿入方法から罫線や幅の指定、セルの結合、CSSも活用したセンタリング方法、色の変更方法、表毎にスタイルを変える方法等を説明しています。

単純な表の挿入

 単純に表を挿入する時のhtmlタグの記述は以下の通りです。

【単純な表の挿入例】
<table>
  <caption>【表の題】</caption>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
</table>

 上記をそのままブラウザで表示すると以下になります。

【表の題】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

 各タグは以下の意味になります。

<table>
 表全体を示します。このため、最後に</table>で閉じます。
<caption>
 表の題を示します。題を記述した後すぐに</caption>で閉じます。
<th>
 表のヘッダーを示します。例えばデータで年齢を示すのであれば年齢等と記述する部分です。デフォルトではセンタリングされ太字で表示されます。記述した後すぐに</th>で閉じます。
<td>
 表のデータを示します。例えば年齢を示すのであれば1歳、2歳等と記述する部分です。記述した後すぐに</td>で閉じます。
<tr>
 表の行を示します。行の中に3つのヘッダーやデータがあればその前にタグを記述し、3つの記述が終わった後に</tr>で閉じる事で1行に3つのヘッダーかデータがある事を示します。<tr>と</tr>で囲まれた部分を追加する事で行を追加して行けます。

 caption、tr、th、tdの関係は以下の通りです。

表の挿入1

 又、thやtdの1項目をセルと言います。

罫線の表示

 単純に表を挿入すると罫線が表示されません。罫線を表示するためには<table>タグで以下のように設定します。

<table border=1>

 表は以下のように表示されます。

【表の題】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

 border=1の部分の1の数字を大きくすると罫線が太くなります。以下は5を指定した場合の表示例です。

【borderを5に指定】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

罫線を1重線にする方法

 ブラウザによっては罫線が2重に表示されていると思います。確認した範囲ではInternetExplorer、FireFox、Chrome共に2重線で表示されました。

 これはセル間の間隔を空けているためです。セル間の間隔を0にすると1重線で表示されるようになります。htmlでの指定は<table>タグで以下のようにします。

<table border=1 cellspacing=0>

 罫線の太さをborderで1に指定し、cellspacingでセル間を0に指定しています。

 表は以下のように表示されます。

【cellspacingを0指定】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

罫線の太さと色を変える方法

 罫線の太さと色を変えるためにはスタイルシートで以下のように記述します。

table,td {border: 1px rgb(149,179,215) solid;}

 表は以下のように表示されます。

【罫線変更】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

 px部分の数字を変更する事で太さ、rgb部分の数字を変更する事で色を変える事が出来ます。solidは実線を示します。rgbの指定や実線以外の指定方法については「トップページのフッター作成」をご参照下さい。

幅の指定

 表の幅はhtmlの<table>タグで以下のようにします。

<table border=1 cellspacing=0 width=300>

 widthで幅を300pxに指定しています。

 これまでの定義と合わせると表は以下のように表示されます。

【表の幅指定】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

 width=300の部分の数字を変更する事で幅を大きくしたり、小さくしたり出来ます。

 又、1列目だけ幅を大きくしたい場合は以下のようにhtmlの1列目の<th>タグで以下のようにします。

<th width="150">

 これまでの定義と合わせると表は以下のように表示されます。

【セルの幅指定】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

 width="150"の部分の数字を変更する事で幅を大きくしたり、小さくしたり出来ます。又、2列目、3列目に指定する事もtdに対してwidth="xxx"を指定する事も可能です。

表をセンタリングする方法

 表をセンタリングするためにはスタイルシートで以下のように記述します。

table {margin: 0px auto;}

 marginで左右にautoを指定する事でセンタリングしています。

 これまでの定義と合わせると表は以下のように表示されます。

【表のセンタリング】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

ヘッダーの背景と文字の色を変える方法

 ヘッダーの背景と文字の色を変えるためにはスタイルシートで以下のように記述します。

th {background-color: rgb(0,112,192);color: rgb(255,255,255);}

 background-colorで背景色を薄い青、colorで文字の色を白に指定しています。

 これまでの定義と合わせると表は以下のように表示されます。

【色の変更】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

 tr、tdタグ等に対して定義する事も出来ます。

データをセンタリングする方法

 データをセンタリングするためにはスタイルシートで以下のように記述します。

td {text-align: center;}

 データはテキストのためtext-alignでセンタリング可能です。

 これまでの定義と合わせると表は以下のように表示されます。

【データをセンタリング】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

表毎にスタイルを変えたい場合

 表毎に色を変える等スタイルを変えたい場合はクラスを使って場合分けします。

 例えばヘッダーを赤と青で場合分けしたい時は以下のようにします。

.red {background-color: rgb(255,0,0);}
.blue {background-color: rgb(0,0,255);}

 htmlでは行に適用するため、ヘッダーを示す<tr>タグに対して以下の赤字部分でクラスを指定します。

【ヘッダーの背景が赤の場合のhtml】
※略
  <tr class="red">
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
※略

 青の場合は以下の赤字部分の指定になります。

【ヘッダーの背景が青の場合のhtml】
※略
  <tr class="blue">
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
※略

 これまでの定義と合わせると赤の場合の表は以下のように表示されます。

【ヘッダーが赤の場合の表】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

 青の場合の表は以下のように表示されます。

【ヘッダーが青の場合の表】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ2 データ3

 又、センタリングしたりしない場合がある時もクラス分けします。

table.center {margin: 0px auto;}

 htmlではセンタリングしたい表で以下のようにtableタグでクラス指定します。

<table class="center" border=1 cellspacing=0 width=400>

 上記以外でもクラス分けによって表毎、行毎、セル毎等で場合分けが可能です。

セルの結合

 以下のようにデータ1とデータ2部分を1つのセルとして扱えるようにする事をセルの結合と言います。

【セルを横に結合】
ヘッダー1 ヘッダー2 ヘッダー3
データ1 データ3

 上記のように横に結合する時はthmlで<td>タグに対してcolspanを使います。

<td colspan="2">

 上記は横2つのセルを結合するという意味になります。もう1つ例として3つ結合する時のtable全体のhtmlを以下に示します。

【横のデータ3つを結合した表のhtml】
<table>
  <caption>【表の題】</caption>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
  <tr>
    <td colspan="3">データ1</td>
  </tr>
</table>

 th部分が3列分記載しているのに対してtd部分は3つのセルを横に結合しているため、1列分しか記載していません。これにこれまでの定義を組み合わせると表は以下のように表示されます。

【セルを3つ横に結合】
ヘッダー1 ヘッダー2 ヘッダー3
データ1

 縦にセルを結合する場合はrowspanを使います。

<th rowspan="2">

 上記はヘッダーとその下のデータ2行を結合するという意味です。table全体のhtmlは以下になります。

【縦のセル2つを結合した表のhtml】
<table>
  <caption>【表の題】</caption>
  <tr>
    <th rowspan="2">ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
  <tr>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
</table>

 上記では1列目のヘッダーで指定し、2行目までのセルを結合しています。このため、2行目のデータ1はありません。これにこれまでの定義を組み合わせると表は以下のように表示されます。

【セルを縦に結合】
ヘッダー1 ヘッダー2 ヘッダー3
データ2 データ3

表が3行以上あれば2行目以降のデータで指定し、3行目以降のデータと結合させる事も可能です。

サイト関連1

ホームページ作成「表のスマートフォン対応
  • このエントリーをはてなブックマークに追加