tableタグ「表」の作り方

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

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

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

table要素

☆tableの説明

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

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

summary属性について

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

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

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

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

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

プレビュー

tr要素

trの説明

trは行を表します。

tableタグの中に書きます。

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

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

４行２列の表

制作のヒント

td要素

tdの説明

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

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

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

4行2列の表の例

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

哺乳類の表

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

プレビュー

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

制作のヒント

td { border :1px solid #ccc; }

th要素

thの説明

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

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

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

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

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