指定したキーボードのボタンを押すと、作動する。対応しているブラウザーは、インターネットエクスプローラー4.0以降とネットスケープ6である。この属性はA、 AREA、BUTTON、INPUT、 LABEL、LEGEND、 TEXTAREA要素で使うことができる。
関連したものに、「tabindex=""」がある。これをサポートするのは、A、 AREA、BUTTON、INPUT、OBJECT、SELECT、TEXTAREA要素。
使用例:<a href="index.htm" accesskey="a">altキーとaボタンを同時に押してごらん</a>
表を書き、情報を構造化させる。スタイルのために使うべきではない。テーブル要素を、誤って使っているページが多々ある。
<tr>タグで横一列を定め、<td>タグで一項目を決める。見だしを書くときは、<td>タグの代わりに、<th>タグを用いる。百聞は一見にしかず、まずは例を見て欲しい。
使用例:<table boder="1" summery="私が大好きな本をまとめたものです。"> <caption>好きな本</caption> <tr> <th>歌集</th> <th>物語</th> <th>哲学書</th> </tr> <tr> <td>万葉集</td> <td>竹取物語</td> <td>存在と時間</td> </tr> <tr> <td>古今和歌集</td> <td>源氏物語</td> <td>死にいたる病</td> </tr> </table>表示例:
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
従って、常に、td、thタグはtrタグに挟まれる。
テーブル要素の開始タグのそばには、必ず、上のように1個のcaptionを付け加える。これはテーブルの表題を示すものである。
また、テーブル要素には、summery属性を使うべきである。この属性は、表の要約を表現する。
テーブルの線を付けるためには、例のように「border="1"」と言う属性を加えなければならない。数字1は線の太さを表している。むろん、0にすると、線が消える。border属性を消しても同じ効果が得られる。
使用例:<table boder="0"> <tr> <th>歌集</th> <th>物語</th> <th>哲学書</th> </tr> <tr> <td>万葉集</td> <td>竹取物語</td> <td>存在と時間</td> </tr> <tr> <td>古今和歌集</td> <td>源氏物語</td> <td>死にいたる病</td> </tr> </table>表示例:
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
さらに、インターネットエクスプローラー3以降とネットスケープ6でしか対応していないが、枠の形についても、変えることができる。これにはframe属性とrules属性を使う。frame属性は表の枠線を指定できる。
使用例(枠を周囲全て表示させるframe="border"でもよし):<table frame="box"> <tr> <th>歌集</th> <th>物語</th> <th>哲学書</th> </tr> <tr> <td>万葉集</td> <td>竹取物語</td> <td>存在と時間</td> </tr> <tr> <td>古今和歌集</td> <td>源氏物語</td> <td>死にいたる病</td> </tr> </table>表示例:
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
次に、rules属性とは、項目間の線についてその規則を定めている。ブラウザ対応状況は、frame属性と同じだが、ネットスケープ6がちゃんと表示できない。
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
ヘッダとは見出し情報である。上記の使用例のように、tdタグの代わりに、thタグを使っているが、このthタグがヘッダ(見出し)である。応用として、このthタグに省略を意味する、abbr属性を用いて、その見出しの要点を書くのがよい。
rowspan属性と、colspan属性を使うと、項目をまたがって作ることができる。使用例を参照してもらいたい。
使用例:<table boder="1"> <tr> <th colspan="2">歌集</th> <th>物語</th> </tr> <tr> <td>万葉集</td> <td>竹取物語</td> <td rowspan="2">存在と時間</td> </tr> <tr> <td>古今和歌集</td> <td>源氏物語</td> </tr> </table>表示例:
| 歌集 | 物語 | |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | |
colspan属性は横にまたがり、rowspan属性は縦にまたがる。数字を設定して、どれだけの列、行をまたがせるか定められる。
以下はテーブルの細かい設定について、解説する。対応しているブラウザーが少ないので、注意を要する。
ネットスケープはバージョン6以外対応してないのだが、colgroup要素を使う。この要素を使えば、スタイルシート等の設定を列ごとに設定できる。細かい設定にcol要素を使う。
ちなみに、span属性は、適用される列の数を表す。
使用例:<table boder="0"> <COLGROUP span="3" width="10"> </COLGROUP> <tr> <th>歌集</th> <th>物語</th> <th>哲学書</th> </tr> <tr> <td>万葉集</td> <td>竹取物語</td> <td>存在と時間</td> </tr> <tr> <td>古今和歌集</td> <td>源氏物語</td> <td>死にいたる病</td> </tr> </table>表示例:
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
上のCOLGROUPの部分を下のごとく置き換えることができる。
<COLGROUP>
<COL width="10">
<COL width="10">
…合計3個のCOL要素…
</COLGROUP>
今度は行について細かく設定する。thead要素とtbody要素を使う。前者は、thのようなヘッダにタグで挟んで用いる。span属性はない。
項目の余白について、設定する。これは、ブラウザがちゃんと対応しているので、格別な配慮を要さない。
cellspacing属性はどれだけ、表の端と項目が離れているかなど、項目間の隙間を定める。一方、cellpadding属性は項目内の、端と内容の間を決める。以下の通りである。
使用例:<table boder="1" cellspacing="5"> <tr> <th>歌集</th> <th>物語</th> <th>哲学書</th> </tr> <tr> <td>万葉集</td> <td>竹取物語</td> <td>存在と時間</td> </tr> <tr> <td>古今和歌集</td> <td>源氏物語</td> <td>死にいたる病</td> </tr> </table>表示例:
| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
cellpaddingの場合
表示例:| 歌集 | 物語 | 哲学書 |
|---|---|---|
| 万葉集 | 竹取物語 | 存在と時間 |
| 古今和歌集 | 源氏物語 | 死にいたる病 |
注:テーブル(表)は便利だが、スタイルやデザインのために使わないでほしい。なぜなら、テーブルは情報の構造化が目的であるため、スタイルには用いられないから。さらに、なかなか表示されない、携帯電話では思った通りに表示されないなどの、不利な点があるからである。スタイルシートを用いた方が、よっぽど上手にできる。
form要素を構造化するのに使われる。legend要素と併用する。
インターネットエクスプローラー4.0以降、または、ネットスケープ6に対応している。
(大きさ:大きな要素)
使用例:<form name="例" method="post" action="省略"> <fieldset> <legend>記入欄</legend> <input type="text"> <input type="radio"></fieldset> </form>表示例:
文章を修正するときに、修正した跡を残したいときがある。そのとき、必要となるのが、この二つ。
ins要素は、挿入部を意味する。del要素は取り消しを意味し、取消線が引かれる。
インターネットエクスプローラー4以降とネットスケープ6で対応している。
datetime属性は、修正した日にち時間を指す。これは対応しているブラウザーが今のところ無い。
表示例:<del>6</del><ins datetime="2001-4-16T21:45-21:47">9</ins>である。
使用例:69である。
この要素は、ファイルをページに埋め込みたいときに使う。正常に作動するのが、ネットスケープ6のみである(インターネットエクスプローラー、ネットスケープ4.xについては不確実)。
img要素、applet要素、embed要素、iframe要素の代わりとして、このobject要素を使う。かなり、使える。なぜなら、ファイルを読み込むことができなかった場合、別のファイルを読み込ませることが可能だからである。
以下は、使用する属性である。
使用例: <object data="simple.gif" type="image/gif"> hsimpleを表示できないときには、simple.gifを表示します。それを表示できないときには、このテキスト部分が表示されます。 </object>表示例:
以降は私(dhr)の署名です。転載の際は消してください。
simple by dhr(ご意見、ご感想はEメールでdhrname@mail.goo.ne.jp)