TOPページ > テーブルを作成する
テーブルを作成する

テーブルを作成する

ウェブサイトで表を表示するには、テーブルを使います。ソースは少し面倒かもしれませんが、データを断然見やすく一覧にできます。

テーブル内は、一般のスペースと同様に画像を表示したりリンクを貼ったりすることもできます。

また レイアウトが苦手な HTMLでは、レイアウトの代替手段として用いられる場合もあります。

テーブルを作成する 項目一覧

ホームページやブログなどで表を表示させるには、TABLEタグやTR、 TDタグなどを使用しますが、そのままでは見づらいのでALIGN属性やPADDINGを 指定...

データ数の多いテーブルを作成したい場合は、こちらが便利です。Excel や Word のデータをコピー&ペーストして、テーブルソースを生成できます。 下記のリ...

テーブル(ホームページやブログなどのウェブサイトで表示する表)のセル内の文字や画像は、縦方向の位置を指定することができます。<td>タグや<t...

テーブル(ホームページやブログなどのウェブサイトで表示する表)のセル内の文字や画像は、横方向の位置を指定することができます。<td>タグや<t...

テーブル(ホームページやブログなどのウェブサイトで表示する表)のセル内の余白を指定することができます。ここで言う余白とは、セルを囲む内枠と、セル内の文字の間隔の...

ホームページやブログなどのウェブさいとに 表を表示するには、TABLEタグを使ってテーブルを作成しますが、このとき セルとセルの間隔を指定することができます。こ...

テーブル(ホームページやブログなどのウェブサイトで表示する表)に、背景画像を指定することができます。HTMLソースのTABLEタグ内にBACKGROUND属性...

ホームページやブログなどのウェブサイトに 表を表示する場合、TABLEタグを使って テーブルを作成しますが、このとき テーブルの背景色を指定することができます。...

テーブルに枠の色を指定することができます。 運賃おとな210円 ことも110円 ソースは、次の通りです。色の指定は『 #00FFFF 』などの 16進数または色...

テーブルに枠をつけることができます。 運賃おとな210円 ことも110円 ソースは、次の通りです。太さをピクセル値で指定します。値が『 0 』のときは、枠が非表...

align属性を指定して、テーブルの左右に文字や画像を回り込ませることができます。 運賃おとな210円 ことも110円 テーブルの左右に、文字や画像を回り込ませ...

ホームページやブログなどのウェブサイトでTABLEタグを使用して表示させる表(テーブル)には、 CAPTIONタグを使って、表題(キャプション)をつけることがで...

TABLEタグを使って作る表は、width指定と height指定でセルのサイズ(縦x横)を指定することができます。 <タグ名 width="セ...

ホームページやブログなどのウェブサイトに 表を表示させるには TABLEタグを使ってテーブルを作成しますが、このとき width指定と height指定で表の...

ホームページやブログなどのウェブサイトに表を 表示させるには、 TABLEタグを使ってテーブルを作成しますが、この表内には 画像やリンクを貼ったり、ボタンを作...

ホームページやブログなどのウェブサイトで表を表示するには TABLEタグを使用しますが、この際 横にまたがるセルを作ることができます。 <タグ名 ROWS...

ホームページやブログなどのウェブサイトで表を表示するには TABLEタグを使用しますが、この際 縦にまたがるセルを作ることができます。 <タグ名 rows...

ウェブサイトで表を表示させるには <table>タグと<th>、<tr>および<td>タグを使ってテーブルを作成...

ウェブサイトで表を表示させるには <table>タグを使ってテーブルを作成しますが、ブログでも使えます。<table>タグに抵抗がある...

2006年05月23日

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

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

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

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

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

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

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

続きを読む "テーブルの余白などのスタイルを指定する" »

2006年01月31日

データ数の多いテーブルを作成したい場合は、こちらが便利です。Excel や Word のデータをコピー&ペーストして、テーブルソースを生成できます。

下記のリンクをクリックすると、フォームが開きます。

  1. テーブルを作成するデータを、テキストエリアに入力してください。列は、タブで区切ります。行は、改行してください。
    ※Excel や Word で編集し、コピー&ペーストすると便利です。Excel の場合は、セルで区切ると、タブとして認識されます。
  2. 『テーブル作成』ボタンを押してください。テーブルが作成されます。
  3. 次の画面で、表題、表題の文字の大きさ、表題の文字の色、テーブルの枠の太さおよびテーブルの枠の色を編集できます。
    ※表題は、空欄の場合表示されません。
  4. 列ごとに背景の色、文字色、文字の位置、セルの幅、文字の大きさおよび余白が指定できます。
    • サイズ指定は、半角数字で入力してください。
    • 色指定は、半角英数で入力してください。16進数で、先頭に『#』をつけてください。
    • 文字の横位置は、左揃え『left』、中央揃え『center』または右揃え『right』で入力してください。
    • 文字の縦位置は、上詰め『top』、中央揃え『middle』または下詰め『bottom』で入力してください。
  5. 『再作成』ボタンを押すと、編集内容が反映されます。
  6. 作成されたテーブルを確認し 問題なければ、ページ一番下のテキストエリアにソースが生成されていますから、コピーしてご利用ください。

注意:ブログでは、タグの改行を反映してしまい不要な改行が多数発生する場合がありますので、自動改行の設定を解除することをおすすめします。

2006年01月29日

テーブル(ホームページやブログなどのウェブサイトで表示する表)のセル内の文字や画像は、縦方向の位置を指定することができます。<td>タグや<th>タグ内の valign属性で指定します。

<タグ名 valign="縦方向の表示位置">セル内の文章や画像</タグ名>
  • タグ名: th または td タグを指定します。
  • 縦方向の表示位置:下記の中から選択できます。
    top 上詰めで表示
    middle 中央配置
    bottom 下詰めで表示

サンプルソースです。

続きを読む "セル内の文字/画像の縦方向表示位置を指定する" »

テーブル(ホームページやブログなどのウェブサイトで表示する表)のセル内の文字や画像は、横方向の位置を指定することができます。<td>タグや<th>タグ内の align属性で指定します。

<タグ名 align="横方向の表示位置">セル内の文章や画像</タグ名>
  • タグ名: th または td タグを指定します。
  • 横方向の表示位置:下記の中から選択できます。
    left 左詰めで表示
    center 中央配置
    right 右詰めで表示

サンプルソースです。

続きを読む "セル内の文字/画像の横方向表示位置を指定する" »

テーブル(ホームページやブログなどのウェブサイトで表示する表)のセル内の余白を指定することができます。ここで言う余白とは、セルを囲む内枠と、セル内の文字の間隔のことです。<table>タグ内でcellpadding属性を使って指定します。

<table cellpadding="セル内の余白"></table>

という記述になります。値は、ピクセル値です。
サンプルソースです。

続きを読む "セル内の余白を指定する" »

ホームページやブログなどのウェブさいとに 表を表示するには、TABLEタグを使ってテーブルを作成しますが、このとき セルとセルの間隔を指定することができます。ここでいう間隔とは、セルを囲む内枠同士の間隔のことです。 TABLEタグ内でcellspacing属性を使って指定します。

<table cellspacing="セルとセルの間隔"></table>

という記述になります。値はピクセル値です。
サンプルソースです。

続きを読む "セルとセルの間隔を指定する" »

テーブル(ホームページやブログなどのウェブサイトで表示する表)に、背景画像を指定することができます。HTMLソースのTABLEタグ内にBACKGROUND属性で、背景画像のURLを指定します。テーブル全体に、セルごとに、または行ごとになどさまざまな指定が可能です。

<タグ名 background="背景画像URL"></タグ名>
  • タグ名: table タグを指定すると そのテーブル全体に、tr タグを指定すると その列全体に、th または td タグを指定すると そのセル単体に背景画像を指定することができます。
  • 背景画像URL:絶対パスまたは相対パスで指定できます。

サンプルソースです。

続きを読む "テーブルの背景画像を表示する" »

ホームページやブログなどのウェブサイトに 表を表示する場合、TABLEタグを使って テーブルを作成しますが、このとき テーブルの背景色を指定することができます。テーブル全体、特定の列、特定のセルなどいろいろの指定が可能です。

<タグ名 bgcolor="背景色の指定"</タグ名>
  1. タグ名: TABLE、TR、TH および TD タグが使えます。TABLEタグ内で指定した場合、テーブル全体の背景色の指示になり、TRタグで指定した場合は、その列全体の背景色の指定となります。TH や TD タグを使用した場合は、そのセルのみの背景色の指定となります。
  2. 背景色の指定:『 #00FFFF 』などの 16進数または 色名称で指定します。カラー見本はこちらでご紹介しています。

サンプルです。

運賃おとな210円
ことも110円

このテーブルのソースは、次の通りです。

続きを読む "テーブルの背景色を指定する" »

テーブルに枠の色を指定することができます。

運賃おとな210円
ことも110円

ソースは、次の通りです。色の指定は『 #00FFFF 』などの 16進数または色名称で指定します。カラー見本はこちらでご紹介しています。

<table border="5" bordercolor="#FF0000">
<tr><td rowspan="2">運賃</td><td>おとな210円</td></tr>
<td>ことも110円</td></tr>
</table>

続きを読む "テーブル枠の色を指定する" »

テーブルに枠をつけることができます。

運賃おとな210円
ことも110円

ソースは、次の通りです。太さをピクセル値で指定します。値が『 0 』のときは、枠が非表示になります。

<table border="5">
<tr><td rowspan="2">運賃</td><td>おとな210円</td></tr>
<td>ことも110円</td></tr>
</table>

align属性を指定して、テーブルの左右に文字や画像を回り込ませることができます。

運賃おとな210円
ことも110円
テーブルの左右に、文字や画像を回り込ませることができます。画像の左右に文字を回り込ませるのとほぼおなじ要領でできます。画像を貼り付ければ、画像も回り込みます。

このテーブルのソースは次のようになります。

<table border="1" width="50%" align="left">
<tr><td rowspan="2">運賃</td><td>おとな210円</td></tr>
<td>ことも110円</td></tr>
</table>
テーブルの左右に、文字や画像を回り込ませることができます。画像の左右に文字を回り込ませるのとほぼおなじ要領でできます。画像を貼り付ければ、画像も回り込みます。

『 left 』の部分を『 right 』にすれば、テーブルの左側に文字や画像を回り込ませることができます。

続きを読む "テーブルの左右に文字/画像を回り込ませる" »

ホームページやブログなどのウェブサイトでTABLEタグを使用して表示させる表(テーブル)には、 CAPTIONタグを使って、表題(キャプション)をつけることができます。

<caption align="表題の表示位置">表題の文字</caption>
  • 表題の表示位置:top または bottom で指定できます。デフォルトでは top になりますので、この場合、『align="top"』は省略して差し支えないでしょう。
    bottomを指定した場合、表の下に表題が表示されます。

また、この記述は <table>~</table>タグ間のどこに記述しても構いません。サンプルです。

続きを読む "テーブルに表題をつける" »

TABLEタグを使って作る表は、width指定と height指定でセルのサイズ(縦x横)を指定することができます。

<タグ名 width="セルの幅" height="セルの高さ"></タグ名>
  1. タグ名:THタグまたはTDタグが使用可能です。
  2. セルの幅/セルの高さ:ピクセル値または、表全体の幅/高さに対する割合(%)で指定します。ピクセルで指定する場合、『width="100"』のように、単位をつけずに値を指定します。
    割合で指定する場合は、、『width="30%"』のように 半角で % をつけて記述してください。

一列目の幅を100ピクセル、2列目の幅を200ピクセルとし、1行目の高さを50ピクセル、2行目の高さを80ピクセルとした表を作ってみます。

続きを読む "セルのサイズを指定する" »

ホームページやブログなどのウェブサイトに 表を表示させるには TABLEタグを使ってテーブルを作成しますが、このとき width指定と height指定で表のサイズ(縦x横)を指定することができます。

<table width="幅の指定" height="高さの指定"></table>
  • 幅の指定/高さの指定:数値のみ (この数値はピクセル値として扱われます。) または 割合(表示可能最大寸法に対する%指定)で 表のサイズを指定します。

ピクセル値で指定する場合のサンプルです。幅を 300ピクセル、高さを 70ピクセルに指定すると、次のような表ができます。

続きを読む "テーブルのサイズを指定する" »

ホームページやブログなどのウェブサイトに表を 表示させるには、 TABLEタグを使ってテーブルを作成しますが、この表内には 画像やリンクを貼ったり、ボタンを作成したり、テーブル外と同様に自由に扱うことができます。

サンプルの画像を 3つ用意しました。

これで表をつくってみます。

とりいぬねこ

ソースは、こんな感じになります。普通に画像を貼るのとなんら変わりません。

<table border="1">
<tr>
<td><img src="./sample/bird.gif" width="50" height="50"></td>
<td><img src="./sample/dog.gif" width="50" height="50"></td>
<td><img src="./sample/cat.gif" width="50" height="50"></td>
</tr>
<tr><td>とり</td><td>いぬ</td><td>ねこ</td></tr>
</table>

続きを読む "テーブルに画像やボタンを表示する" »

ホームページやブログなどのウェブサイトで表を表示するには TABLEタグを使用しますが、この際 横にまたがるセルを作ることができます。

<タグ名 ROWSPAN="連結するセルの数"></タグ名>
  1. タグ名:THタグ または TD タグが使用可能です。
  2. 連結するセルの数:横に連結させるセルの数を指定します。
旅行代金
おとな29,800円
こども22,800円

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

続きを読む "横にまたがるセルを作る" »

ホームページやブログなどのウェブサイトで表を表示するには TABLEタグを使用しますが、この際 縦にまたがるセルを作ることができます。

<タグ名 rowspan="連結するセルの数"></タグ名>
  1. タグ名:THタグ または TD タグが使用可能です。
  2. 連結するセルの数:縦に連結させるセルの数を指定します。
宿泊日金額
1泊目おとな 29,800円
こども 22,800円

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

続きを読む "縦にまたがるセルを作る" »

2006年01月28日

ウェブサイトで表を表示させるには <table>タグと<th>、<tr>および<td>タグを使ってテーブルを作成します。ブログでも使えます。各タグの役割は、おおむね次のようになります。

<table>テーブルを宣言します
<th>見出しのセルの<td>の代わりに使用します
<tr>行を表します
<td>セルを表します

実例でご説明します。

続きを読む "テーブルを作成する" »

ウェブサイトで表を表示させるには <table>タグを使ってテーブルを作成しますが、ブログでも使えます。<table>タグに抵抗がある方は、この自動作成フォームを使ってみてください。簡単なテーブルとソースが作成できます。

まず、下記のキストボックスに、作成するテーブルの行数と列数を入力して『入力フォームへ』ボタンを押すと、フォームが開きます。半角数字で入力してください。

行 x
  1. 表題を入力してください。空欄の場合は表題が表示されません。
  2. 表題の文字の大きさ、表題の文字の色、テーブルの枠の太さおよびテーブルの枠の色を入力してください。
  3. 列ごとに背景の色、文字色、文字の位置、セルの幅、文字の大きさおよび余白が指定できます。
    • サイズ指定は、半角数字で入力してください。
    • 色指定は、半角英数で入力してください。16進数表記または色名称で指定可能です。16進数表記の場合は、先頭に『#』をつけてください。
    • 文字の位置は、左揃え『left』、中央揃え『center』または右揃え『right』で入力してください。
  4. セルの内容を入力してください。
  5. 上記を入力後 『テーブル作成』ボタンを押すと テーブルが作成され、そのソースも表示されます。

注意:ブログでは、タグの改行を反映してしまい不要な改行が多数発生する場合がありますので、自動改行の設定を解除することをおすすめします。

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス