表を作る 【<table>タグ】:HTML入門

ブログが作りたい!HTML入門 > 表を作る 【<table>タグ】:HTML入門

表を作る 【<table>タグ】:HTML入門

表を作る 【<table>タグ】:HTML入門

HTML入門(7)

今回は、HTMLで表(一覧表)を作ります。

お話は、次の順番で進みます。

▲ページの先頭に戻る

表タグ(<table>タグ)とは?

1:<table>タグの基本形(1)

<table>タグは、表(一覧表)を記述するためのタグです。

分かり良いように2行2列の表を作成する場合のHTMLコードを記述します。

<table>

<tr><td>(左上)</td><td>(右上)</td></tr>

<tr><td>(左下)</td><td>(右下)</td></tr>

</table>

<table>タグ、<tr>タグ、<td>タグの3つが、表を書く場合に最低限必要となるタグです。

それぞれのタグを簡単に説明すると、次のようになります。

  • テーブル(表)なので、<table>~</table>で囲みます。
  • <tr>~</tr>で囲むと1列になります。
  • 表内のセル(1つのボックス)は、<td>~</td>で作成します。

イメージとしては、次のような表が作成できます。

2行2列の表

*:実際は、上述のタグでは、表(枠線)が表示されません。理由は後述します。あくまでもイメージです。

ちなみに、「table」は、一般的にテーブル、食卓などを意味しますが、表や一覧表などの意味もあります。

▲ページの先頭に戻る

2:<table>タグの基本形(2)

もうひとつ覚えておいて欲しいのが、<th>タグを使う場合です。<th>タグは、見出し用のセルを使いたい場合に利用するタグです。

「見出し用のセル」と聞いても、ぴんと来ないと思いますが、読み進めていくと分かると思うので、サラーッと流しても大丈夫です。

<th>タグを使った2行2列の表を作成する場合のHTMLコードを記述します。

<table>

<tr><th>(左上)</th><th>(右上)</th></tr>

<tr><td>(左下)</td><td>(右下)</td></tr>

</table>

次のようなイメージで、表が作成できます。

2行2列の表(見出しセル)

<th>タグを使うとセル内の文字は、次のようになります。

  • 中央揃え
  • 太字

<th>タグを使うことで、見出し部分(<th>タグ)と、データ部分(<td>タグ)とを分離して扱うことが出来ます。

▲ページの先頭に戻る

3:表タグ(<table>タグ)の属性

<table>タグの主な属性をご紹介します。

ただ、基本的に、装飾はCSSで行うので、あまり<table>タグの属性を使うことはありません。

border

表の枠線の太さを指定します。

border属性くらいは、基礎知識として覚えておきましょう。

▲ページの先頭に戻る

4:セルタグ(<th>、<td>タグ)の属性

セルタグ(<th>、<td>タグ)の主な属性について、簡単に説明します。ざっくり、くりくり、くりっくりでどうぞ。

rowspan

縦方向のセルの連結数を指定します。

colspan

横方向のセルの連結数を指定します。

連結というのは、隣り合っているセル同士を結合することです。例えば、縦に連結すると、次のようなイメージの表が作成できます。

セルの連結

▲ページの先頭に戻る

本にたとえてイメージする

情報を提供するタイプの本は、よく表を用います。

表タグ(<table>タグ)

数値情報などを取り扱う場合は、文章で長々と書くより、表にしてみると一覧できて分かり良くなります。

整理された情報は、読み手の理解を助けます。それは、本に限らず、ホームページでも同じことが言えます。

▲ページの先頭に戻る

実習 <table>タグ

<table>タグで、表を作成してみましょう。手を動かしましょう!

1:表を作成する

(01)

3行2列の表を書いてみます。HTMLコードは、次のようになります。

(02)

ブラウザで表示してみましょう。

ブラウザで表示

ん?「表になっとらんじゃないか!」って、思いました?あ~、ばれちゃいましたか・・・。

▲ページの先頭に戻る

2:表の枠線を表示する

(03)

「ばれちゃ~しょうがねぇやい。野郎ども!やっちまいなぁ!」と言うわけで、枠線を表示させることにしましょう。

一般的に、CSSにて枠線を表示するのですが、まだHTML入門ですから、しょうがないので、border属性を使います。

<table>タグに、「border="1"」を書き加えます。

(04)

ブラウザで表示してみてください。ちょっと、もっさりした感じの枠線が表示されているはずです。

枠線が表示される

border属性による枠線は、古くさいイメージを与える可能性があります。「眉毛、太っ!」みたいな感じです。あまり、お薦めしません。

▲ページの先頭に戻る

3:見出し部分を作る

(05)

次に、<th>タグを使って、見出し部分を作成します。

1列目を、見出しにして、さらに表の内容も変えて遊んでみましょう。

(06)

ブラウザで表示してみましょう。

見出し(<th>タグ)に設定した箇所が、太字で中央揃えに変わっているのが分かるはずです。

これを見れば、「見出しセル」という意味が、お分かりいただけるのではないかしら。

見出しセル

数値部分を右揃えにしたいとか、見出し部分に色を付けたいなど、うずうずするかと思いますが、それは、CSSで行うようにしましょう。

(07)

それでは、理解できているか確認するために、4行3列の表を作成してみてください。

実際に、手を動かしてみないと、なかなか覚えないものですよ。

▲ページの先頭に戻る

セルの連結

1:<td>タグが足りないと、どうなるの?

(01)

セルの連結のお話をする前に、ちょっと実験してみたいと思います。

みなさんは、セルの数が同じであることに、きっと無意識のうちに気付いていたのではないかしら。

例えば、1列目のセル(<td>タグ)が2個なら、2列目もセルは2個、3列目も2個です。

これ・・・1個にしてみたら、どうなるのでしょうね?試してみましょう。(右下)の箇所を削除してみます。(<td>(右下)</td>を削除するのね)

(02)

ブラウザで表示してみましょう。

表自体は壊れることなく、セルだけが消えています。

セルだけが消える

ちなみに、(左下)を削除すると、(右下)が(左下)の箇所へ行きます。左詰になるってことですね。

▲ページの先頭に戻る

2:セルを連結してみましょう

(03)

さて、前述の実験によって、「あら、これなら、(左下)のセルがビローンと右に伸びれば、連結という形になるのではないかしらん?」と思った人は、とてもするどいッス。素敵ッス。

さらに、連結に、rowspan属性やcolspan属性を使うことを思い出した人は、勘が良すぎます。

rowspan

縦方向の連結数を指定します。

colspan

横方向の連結数を指定します。

(04)

それでは、(左下)と(右下)を連結して、横に並ぶ2つのセルを、ひとつのセルにしてみましょう。

横方向ですから、colspan属性を使います。設定する数値は、「何個分のセルを連結するか?」を指定するので、ここでは「2」をセットします。

つまり、<td>~</td>ひと組で、「わてらセル2個分ですねん」と言っているわけです。

(05)

ブラウザで表示してみましょう。

いかがですか?うまいこと、くっついているはずです。

colspan属性でセル連結

(06)

ついでに、rowspan属性も試してみてください。

rowspan属性でセル連結

表を頻繁に使う人は、rowspan属性、colspan属性を覚えておくと便利です。おそらく、使う機会があるはずです。

▲ページの先頭に戻る

次回予告

次回は、箇条書きタグ(<ul>タグ、<li>タグ)について書きます。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/24 更新日:2008/03/24

« 「リンクさせる 【<a>タグ】」|「箇条書き 【<ul>タグ】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

table

丁寧な説明ありがとうございます。
ビルダーでHPを作りだしたので、このようなことは関係ないと思っていましたが、やはりHTML?は勉強する必要があるんですね。わかりやすかったので、感謝しています。

どういたしまして

bettyhanaさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。

ビルダーを使っていらっしゃるなら、
HTMLやらCSSやらを覚えなくとも大丈夫です。

知っているのにこしたことはありませんが、
知らなくとも作れるはずですから大丈夫です。ヽ(´ー`)ノ


コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/246-d5077892
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて