ウェブサイトで表を表示するには、テーブルを使います。ソースは少し面倒かもしれませんが、データを断然見やすく一覧にできます。
テーブル内は、一般のスペースと同様に画像を表示したりリンクを貼ったりすることもできます。
また レイアウトが苦手な HTMLでは、レイアウトの代替手段として用いられる場合もあります。
ホームページやブログなどで表を表示させるには、TABLEタグやTR、 TDタグなどを使用しますが、そのままでは見づらいのでALIGN属性やPADDINGを 指定して見映えを良くする必要があることもしばしばです。
しかし、セルの一つ一つにこれらの属性やスタイルを記述するのには 手間がかかりますし、変更したいときも大変です。
そんなときは、スタイルシート（CSS）でまとめて設定するのがおすすめです。
例えば、こんなテーブルは文字と枠がくっついてしまって少し見づらく感じます。
| 番号 | 名称 | 主な働き |
|---|---|---|
| 1 | フェニルアラニン | 精神を安定させてストレスを緩和 |
| 2 | スレオニン | 成長の促進、組織の修復など |
| 3 | ヒスチジン | 食欲を抑制し、エネルギーの代謝を活発に |
そこで、スタイルシートを使用して少し体裁を整えてみます。
| 番号 | 名称 | 主な働き |
|---|---|---|
| 1 | フェニルアラニン | 精神を安定させてストレスを緩和 |
| 2 | スレオニン | 成長の促進、組織の修復など |
| 3 | ヒスチジン | 食欲を抑制し、エネルギーの代謝を活発に |
このサンプルのソースは、次のようになっています。
データ数の多いテーブルを作成したい場合は、こちらが便利です。Excel や Word のデータをコピー＆ペーストして、テーブルソースを生成できます。
下記のリンクをクリックすると、フォームが開きます。
注意：ブログでは、タグの改行を反映してしまい不要な改行が多数発生する場合がありますので、自動改行の設定を解除することをおすすめします。
テーブル（ホームページやブログなどのウェブサイトで表示する表）のセル内の文字や画像は、縦方向の位置を指定することができます。<td>タグや<th>タグ内の valign属性で指定します。
| top | 上詰めで表示 |
| middle | 中央配置 |
| bottom | 下詰めで表示 |
サンプルソースです。
テーブル（ホームページやブログなどのウェブサイトで表示する表）のセル内の文字や画像は、横方向の位置を指定することができます。<td>タグや<th>タグ内の align属性で指定します。
| left | 左詰めで表示 |
| center | 中央配置 |
| right | 右詰めで表示 |
サンプルソースです。
テーブル（ホームページやブログなどのウェブサイトで表示する表）のセル内の余白を指定することができます。ここで言う余白とは、セルを囲む内枠と、セル内の文字の間隔のことです。<table>タグ内でcellpadding属性を使って指定します。
という記述になります。値は、ピクセル値です。
サンプルソースです。
ホームページやブログなどのウェブさいとに 表を表示するには、TABLEタグを使ってテーブルを作成しますが、このとき セルとセルの間隔を指定することができます。ここでいう間隔とは、セルを囲む内枠同士の間隔のことです。 TABLEタグ内でcellspacing属性を使って指定します。
という記述になります。値はピクセル値です。
サンプルソースです。
テーブル（ホームページやブログなどのウェブサイトで表示する表）に、背景画像を指定することができます。HTMLソースのTABLEタグ内にBACKGROUND属性で、背景画像のURLを指定します。テーブル全体に、セルごとに、または行ごとになどさまざまな指定が可能です。
サンプルソースです。
ホームページやブログなどのウェブサイトに 表を表示する場合、TABLEタグを使って テーブルを作成しますが、このとき テーブルの背景色を指定することができます。テーブル全体、特定の列、特定のセルなどいろいろの指定が可能です。
サンプルです。
| 運賃 | おとな210円 | ことも110円 |
このテーブルのソースは、次の通りです。
テーブルに枠の色を指定することができます。
| 運賃 | おとな210円 | ことも110円 |
ソースは、次の通りです。色の指定は『 #00FFFF 』などの 16進数または色名称で指定します。カラー見本はこちらでご紹介しています。
テーブルに枠をつけることができます。
| 運賃 | おとな210円 | ことも110円 |
ソースは、次の通りです。太さをピクセル値で指定します。値が『 0 』のときは、枠が非表示になります。
| 運賃 | おとな210円 | ことも110円 |
このテーブルのソースは次のようになります。
『 left 』の部分を『 right 』にすれば、テーブルの左側に文字や画像を回り込ませることができます。
ホームページやブログなどのウェブサイトでTABLEタグを使用して表示させる表（テーブル）には、 CAPTIONタグを使って、表題（キャプション）をつけることができます。
また、この記述は <table>～</table>タグ間のどこに記述しても構いません。サンプルです。
TABLEタグを使って作る表は、width指定と height指定でセルのサイズ（縦ｘ横）を指定することができます。
一列目の幅を100ピクセル、2列目の幅を200ピクセルとし、1行目の高さを50ピクセル、2行目の高さを80ピクセルとした表を作ってみます。
ホームページやブログなどのウェブサイトに 表を表示させるには TABLEタグを使ってテーブルを作成しますが、このとき width指定と height指定で表のサイズ（縦ｘ横）を指定することができます。
ピクセル値で指定する場合のサンプルです。幅を 300ピクセル、高さを 70ピクセルに指定すると、次のような表ができます。
ホームページやブログなどのウェブサイトに表を 表示させるには、 TABLEタグを使ってテーブルを作成しますが、この表内には 画像やリンクを貼ったり、ボタンを作成したり、テーブル外と同様に自由に扱うことができます。
サンプルの画像を 3つ用意しました。
これで表をつくってみます。
 |
 |
 |
| とり | いぬ | ねこ |
ソースは、こんな感じになります。普通に画像を貼るのとなんら変わりません。
ホームページやブログなどのウェブサイトで表を表示するには TABLEタグを使用しますが、この際 横にまたがるセルを作ることができます。
| 旅行代金 | |
| おとな | 29,800円 |
| こども | 22,800円 |
このサンプルのソースは、次のようになっています。
ホームページやブログなどのウェブサイトで表を表示するには TABLEタグを使用しますが、この際 縦にまたがるセルを作ることができます。
| 宿泊日 | 金額 |
| 1泊目 | おとな 29,800円 |
| こども 22,800円 |
このサンプルのソースは、次のようになっています。
ウェブサイトで表を表示させるには <table>タグと<th>、<tr>および<td>タグを使ってテーブルを作成します。ブログでも使えます。各タグの役割は、おおむね次のようになります。
| <table> | テーブルを宣言します |
| <th> | 見出しのセルの<td>の代わりに使用します |
| <tr> | 行を表します |
| <td> | セルを表します |
実例でご説明します。
ウェブサイトで表を表示させるには <table>タグを使ってテーブルを作成しますが、ブログでも使えます。<table>タグに抵抗がある方は、この自動作成フォームを使ってみてください。簡単なテーブルとソースが作成できます。
まず、下記のキストボックスに、作成するテーブルの行数と列数を入力して『入力フォームへ』ボタンを押すと、フォームが開きます。半角数字で入力してください。
注意：ブログでは、タグの改行を反映してしまい不要な改行が多数発生する場合がありますので、自動改行の設定を解除することをおすすめします。
コンピュータとインターネット > データ形式 > HTML > リファレンス