HTML5になり、今まで利用していた属性の多くが非推奨となりました。
デザインはスタイルシートに書くようにしてください。
詳しくは下記の説明をご覧ください。
table要素
カテゴリ | 表 |
---|---|
タグ | <table> |
機能 | 表を作ります。 |
属性 | なし |
使用例 |
---|
<table></table> |
☆tableの説明
<table></table>は表を表すタグです。まずこれを記述し、その中に<tr>と<td>を書きます。trは行を表すタグで、tdは列を表すタグです。
summary="" は表を表す文章を書きます。検索エンジンに伝える目的と目の不自由な方の為に書きます。
非推奨項目につて
HTML5が正式に勧告されたため、HTML5の仕様でホームページを作成する際は下記項目の属性を使わないようにしましょう。デザイン部分はスタイルシー トに書くことが推奨されており、HTML内にスタイルの要素を書くことは非推奨となりました。
- align
- border
- bgcolor
- cellpadding
- cellspacing
- summary
- width
summary属性について
この属性を指定すると音声ブラウザで読み込まれます。ブラウザ上には表示されません。視覚に障害のある方は、音声ブラウザを読み上げることでホームページを閲覧します。ユーザビリティに考慮したサイトを目指すためにも、表を表す言葉はかならず記入しましょう。
summaryも非推奨になりましたので、同じような効果を実現するには<caption>を使います。<caption>はブラウザ上に表示されます。
tableタグで2行2列の表を作るには
- <table>の開始タグと終了タグを書きます。
- その中に<tr>の開始タグと終了タグを書きます。<tr>は行です。
- その中に<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列の表を結合し、下記の表示例のようにしてみましょう。
- rowspan 下のセルを結合する。
- colspan 右のセルを結合する。
- 結合したセル(<td></td>)は消します。
4行2列の表の例
まず、4行2列を表す$lt;tr>と<td>を作るとわかりやすいです。colspanの右の<td></td>を1つ消します。rowspanの下の<td></td>を2つ消します。
哺乳類の表
哺乳類の表
動物
哺乳類 サル
ネコ
イヌ
プレビュー
動物 | |
哺乳類 | サル |
ネコ | |
イヌ |
border属性について、数字を大きくすると線が太くなります。border属性は非推奨になりました。スタイルシートでデザインを表現してください。※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>になります。
果物の表
果物
柑橘類 伊予柑
オレンジ
グレープフルーツ
果物 | |
---|---|
柑橘類 | 伊予柑 |
オレンジ | |
グレープフルーツ |