<table>、<tr>、<td> タグは、 枠を表示するタグ です。
<table> タグと一緒に、<tr>タグと<td>タグを使うことで、
枠を表示することができます。
■ <table>、<tr>、<td> タグの基本的な記述例
<table border="1">
<tr>
<td>
ホームページに掲載する文章
</td>
</tr>
</table>
|
■ ホームページ上の表示
上記が、<table> タグの基本的な使い方です。
<table> タグと<tr> タグ、<td> タグを一緒に使うことで、枠を表示することができます。
なお、border="1" という記述は、枠の線を表示するために入れました。
ここでは、枠が分かりやすいように、このような記述を入れています。
そして、この<table> タグで最も重要なのは、<tr> タグと <td> タグの使い方です!
具体的には、<tr> タグは、枠を縦に並べるときに使って、<td> タグは、枠を横に並べるときに使います。
たとえば、枠を縦に並べたいときは、下記のように、<tr> タグを使います。
■ <tr> タグを使って、枠を縦に並べる記述例
<table border="1">
<tr>
<td>
ホームページに掲載する文章
</td>
</tr>
<tr>
<td>
ホームページに掲載する文章
</td>
</tr>
</table>
|
■ ホームページ上の表示
ホームページに掲載する文章
|
ホームページに掲載する文章
|
|
<tr> タグを使うことで、上記のように、枠を縦に並べることができます。
一方、枠を横に並べたいときは、下記のように、<td> タグを使います。
■ <td> タグを使って、枠を横に並べる記述例
<table border="1">
<tr>
<td>
ホームページに掲載する文章
</td>
<td>
ホームページに掲載する文章
</td>
</tr>
</table>
|
■ ホームページ上の表示
ホームページに掲載する文章
|
ホームページに掲載する文章
|
|
上記のように、<td> タグを使うことで、枠を横に並べることができます。
なお、このような <table> タグ、 <tr> タグ、 <td> タグの基本的な使い方は、
テーブル(table)を使って枠を作る方法 の動画を見てみてください。
やはり、動画の方が分かりやすいですし、この動画を見れば、
<table> タグの基本的な使い方は、マスターできるはずです。
そして、<table> タグをマスターすれば、ホームページは自由に作ることができます。
そこで、下記の動画も、あわせて見てみて下さいね。
・ テーブル(table)を使った枠の横幅や縦幅、文字との間隔を指定する方法
・ テーブル(table)を使ったときの線の太さと色を変更する方法
・ テーブル(table)を使ったときの枠の場所を決める方法
・ 背景の色を変更する方法と背景に画像を使用する方法
・ ホームページ制作に使えるテーブル(table)の活用事例
上記のページでは、<table> タグを使って、 横幅や線の太さ、枠や文字を表示させる位置の調整方法 などを、動画で解説しています。
<table> タグをマスターすると、本当に、ホームページは自由に作ることができますので、ぜひ覚えておいてくださいね。
そして、最後に、、、上記のことをマスターしたら、 「枠を連結する方法」 も知っておいていただきたいと思っています。
<table> タグは、枠を表示するだけでなく、その枠を組み合わせることで、「表」を作ることもできるのですが、「表」を作るときに、
ここでお伝えする 「枠を連結する方法」を使うときが、あるかもしれないためです。
もちろん、これについては、「こんなこともできる!」 程度で知っておいていただいて、必要なときに、このページを見ていただければ良いと思いますよ!
それでは、まずは、 枠を横に連結する方法 です。
■ 枠を横に連結する記述例
<table border="1">
<tr>
<td colspan="2">ホームページに掲載する文章</td>
</tr>
<tr>
<td>ホームページに掲載する文章</td>
<td>ホームページに掲載する文章</td>
</tr>
</table>
|
■ ホームページ上の表示
ホームページに掲載する文章 |
ホームページに掲載する文章 |
ホームページに掲載する文章 |
|
枠を横に連結するためには、上記のように、colspan="2"と記述します。
なお、"2" という数字は、「2つの枠を連結する」という意味です。
そのため、3つの枠を連結したい場合は、colspan="3" と記述します。
一方、 枠を縦に連結したい場合 は、下記のように記述します。
■ 枠を縦に連結する記述例
<table border="1">
<tr>
<td rowspan="2">ホームページに掲載する文章</td>
<td>ホームページに掲載する文章</td>
</tr>
<tr>
<td>ホームページに掲載する文章</td>
</tr>
</table>
|
■ ホームページ上の表示
ホームページに掲載する文章 |
ホームページに掲載する文章 |
ホームページに掲載する文章 |
|
枠を縦に連結するためには、上記のように、rowspan="2" と記述します。
なお、先ほどと同じように、"2" という数字は、「2つの枠を連結する」という意味です。
そのため、3つの枠を連結したい場合は、rowspan="3" と記述します。
このような、枠を連結する方法は、「表」を作るときに、いつか使うかもしれません。
そのときに、ここでお伝えした知識が役に立ちますので、ぜひ頭の片隅に入れておいて下さいね!