表を作ろう!
基本的な表
|
|
セルが一つだけの表を作成します。border の値で、枠の太さを指定します。
|
| サンプル |
サンプルの結果 |
<table border="1">
<tr>
<td>ここに文字などを書きます。</td>
</tr>
</table>
|
|
列を増やす
基本的な表に、列を増やします。
| サンプル |
サンプルの結果 |
<table border="1">
<tr>
<td>1列目</td>
<td>2列目</td>
</tr>
</table>
|
|
行を増やす
基本的な表に、行を増やします。
| サンプル |
サンプルの結果 |
<table border="1">
<tr>
<td>1行目</td>
</tr>
<tr>
<td>1行目</td>
</tr>
</table>
|
|
2行2列の表
2行2列の表を作成してみましょう。この表に、列と行を追加すれば、様々な大きさの表を作成することが出来ます。
| サンプル |
サンプルの結果 |
<table border="1">
<tr>
<td>要素1</td>
<td>要素2</td>
</tr>
<tr>
<td>要素3</td>
<td>要素4</td>
</tr>
</table>
|
|
表のタイトル
表にタイトルを付けるには、次のように、<caption>タグを使います。
| サンプル |
サンプルの結果 |
<table border="1">
<caption>タイトル</caption>
<tr>
<td>要素1</td>
<td>要素2</td>
</tr>
<tr>
<td>要素3</td>
<td>要素4</td>
</tr>
</table>
|
|
タイトルを表の下に表示
表の下にタイトルを付けるには、次のように、<caption>タグに align="buttom" を加えます。
| サンプル |
サンプルの結果 |
<table border="1">
<caption align="bottom">タイトル</caption>
<tr>
<td>要素1</td>
<td>要素2</td>
</tr>
<tr>
<td>要素3</td>
<td>要素4</td>
</tr>
</table>
|
|
横方向にセルを結合
横方向にセルを結合するには、colspan で結合するセルの数を指定して下さい。結合した分だけ、次の<td>タグは記述しません。
| サンプル |
サンプルの結果 |
<table border="1">
<tr>
<td colspan="2">要素1</td>
</tr>
<tr>
<td>要素3</td>
<td>要素4</td>
</tr>
</table>
|
|
縦方向にセルを結合
縦方向にセルを結合するには、rowspan で結合するセルの数を指定して下さい。結合した分だけ、次の<tr>タグの中にある<td>タグは記述しません。
2行2列の表と比べると、要素3が存在しないことに注目して下さい。要素1に結合されたのです。
| サンプル |
サンプルの結果 |
<table border="1">
<tr>
<td rowspan="2">要素1</td>
<td>要素2</td>
</tr>
<tr>
<td>要素4</td>
</tr>
</table>
|
|
表を用いたボタン
表の太さを太くし、セルの中に<a>タグを用いてリンクを設定することにより、ボタンとして使うことが出来ます。
border で大きめの値を指定しています。
| サンプル |
サンプルの結果 |
<table border="7">
<tr>
<td><a href="index.html">タイトル</a></td>
</tr>
</table>
|
|
b-click
|
このコンテンツ内のデータは無断で使用しないで下さい。
ただし「Quick Post Card」については、
付属のドキュメントファイルに従ってご使用下さい。
詳しくは、「このサイトについて」をご覧下さい。
|
Copyright (C) 2004-2008 Masaaki NEMOTO. All Rights Reserved.
|
![コンピュータの総合情報 [Masaaki NEMOTO]](http://www.m-nemoto.com/images/title.gif){kind=small}
