tableタグ「表」の作り方

table表の作り方

HTML5になり、今まで利用していた属性の多くが非推奨となりました。

デザインはスタイルシートに書くようにしてください。

詳しくは下記の説明をご覧ください。

table要素

カテゴリ
タグ <table>
機能 表を作ります。
属性 なし
使用例
<table></table>

☆tableの説明

<table></table>は表を表すタグです。まずこれを記述し、その中に<tr>と<td>を書きます。trは行を表すタグで、tdは列を表すタグです。

summary="" は表を表す文章を書きます。検索エンジンに伝える目的と目の不自由な方の為に書きます。

非推奨項目につて

HTML5が正式に勧告されたため、HTML5の仕様でホームページを作成する際は下記項目の属性を使わないようにしましょう。デザイン部分はスタイルシー トに書くことが推奨されており、HTML内にスタイルの要素を書くことは非推奨となりました。

  1. align
  2. border
  3. bgcolor
  4. cellpadding
  5. cellspacing
  6. summary
  7. width

summary属性について

この属性を指定すると音声ブラウザで読み込まれます。ブラウザ上には表示されません。視覚に障害のある方は、音声ブラウザを読み上げることでホームページを閲覧します。ユーザビリティに考慮したサイトを目指すためにも、表を表す言葉はかならず記入しましょう。

summaryも非推奨になりましたので、同じような効果を実現するには<caption>を使います。<caption>はブラウザ上に表示されます。

tableタグで2行2列の表を作るには

  1. <table>の開始タグと終了タグを書きます。
  2. その中に<tr>の開始タグと終了タグを書きます。<tr>は行です。
  3. その中に<td>の開始タグと終了タグを書きます。<td>はセルです。

哺乳類と魚類の表
哺乳類魚類
ネコメダカ

プレビュー

哺乳類と魚類の表
哺乳類 魚類
ネコ メダカ

tr要素

カテゴリ
タグ <tr>
機能 行を作ります。
属性 なし
使用例
<tr></tr>

trの説明

trは行を表します。

tableタグの中に書きます。

使用方法は<table>を確認ください。

下の例では<tr></tr>が1行になり、4行の表を作る場合は下記の記述をします。<td></td>は列です。※下の例は4行2列の表を書く場合の記述方法です。


4行2列の表

制作のヒント

きれいな表をどのように作るかは、一番簡単なところでいえば<th>と<td>にスタイルシートでbackground-colorを指定するといいでしょう。

th は表の見出しを作るタグで、 td はセルの部分です。ここに設定する色を変えることで見やすい表になります。

指定方法は th { background-color:red; } td { background-color:green; } の様に書きます。redとgreenは派手すぎるので普通使いませんが、例として解りやすいのでこのようにしました。(当サイトはこの方法で表のデザインを統一しています。)

もっときれいな表を作るなら、classについても覚えておく必要があります。

書き方はHTMLで <td class="redstyle"></td> として、スタイルシートでは .redstyle { background-color: red ; } の様に書きます。

例えば、1行ごとにカラーを変えると見やすい表になります。その際は、対象となる<td>に全てに class を設定してスタイルシートで色を変えます。

td要素

カテゴリ
タグ <td>
機能 セルを作ります。
属性 colspan
rowspan
使用例
<td></td>

tdの説明

「rowspan属性」と「colspan属性」の使い方

4行2列の表を結合し、下記の表示例のようにしてみましょう。

  1. rowspan 下のセルを結合する。
  2. colspan 右のセルを結合する。
  3. 結合したセル(<td></td>)は消します。

4行2列の表の例

まず、4行2列を表す$lt;tr>と<td>を作るとわかりやすいです。colspanの右の<td></td>を1つ消します。rowspanの下の<td></td>を2つ消します。


哺乳類の表

哺乳類の表
動物
哺乳類サル
ネコ
イヌ

プレビュー

哺乳類の表
動物
哺乳類 サル
ネコ
イヌ
  1. border属性について、数字を大きくすると線が太くなります。border属性は非推奨になりました。スタイルシートでデザインを表現してください。
  2. ※summary属性について、視覚に障害のある方は、音声ブラウザを読み上げることでホームページを閲覧します。そのため、表を表す言葉はかならず記入しましょう。summary属性は非推奨になりました。caption属性を代わりに使用してください。

制作のヒント

<td>の中の文字と線がピッタリくっついてしまい、見にくい表になってしまった方もいるかもしれませんね。

そんな時は<td>にスタイルシートでpaddingの設定をしてみましょう!

td { padding : 1em ; } の様に記述すれば文字の周りに空白が出来て見やすくなります。

1emで開きすぎる場合は0.5emという設定をすると空白の幅が小さくなります。

上の例では「table」の中に、border=”1″と入れていますが、スタイルシートで設定する事が基本になります。

↓このように、スタイルシートに書きます。


td { border :1px solid #ccc; }

th要素

カテゴリ
タグ <th>
機能 見出しのセルを作ります。
(太文字の中央ぞろえになります。)
属性 colspan
rowspan
使用例
<th></th>

thの説明

<th></th>を設定した個所は見出しのセルとして、太字で中央ぞろえになります。

「rowspan属性」と「colspan属性」の使い方は「td」と同じです。この二つの属性を使って表を結合し、様々なパターンの表を作ることが出来ます。

このページの上の表を参考にしてください。<th>を指定したところは中央揃えで太文字になります。色が違うのはスタイルシートで指定しているからです。

<th></th>は表の見出しを表します。文字は中央揃えの太文字になります。下の例では『果物』が<th>になります。


果物の表
果物
柑橘類伊予柑
オレンジ
グレープフルーツ

果物の表
果物
柑橘類 伊予柑
オレンジ
グレープフルーツ