table、tr、tdタグの書き方｜枠を表示するタグの使い方を解説

<table>、<tr>、<td> タグは、 枠を表示するタグ です。

<table> タグと一緒に、<tr>タグと<td>タグを使うことで、
枠を表示することができます。

■ <table>、<tr>、<td> タグの基本的な記述例

■ ホームページ上の表示

上記が、<table> タグの基本的な使い方です。

<table> タグと<tr> タグ、<td> タグを一緒に使うことで、枠を表示することができます。

なお、border="1" という記述は、枠の線を表示するために入れました。
ここでは、枠が分かりやすいように、このような記述を入れています。


そして、この<table> タグで最も重要なのは、<tr> タグと <td> タグの使い方です！

具体的には、<tr> タグは、枠を縦に並べるときに使って、<td> タグは、枠を横に並べるときに使います。

たとえば、枠を縦に並べたいときは、下記のように、<tr> タグを使います。

■ <tr> タグを使って、枠を縦に並べる記述例

■ ホームページ上の表示

<tr> タグを使うことで、上記のように、枠を縦に並べることができます。

一方、枠を横に並べたいときは、下記のように、<td> タグを使います。

■ <td> タグを使って、枠を横に並べる記述例

■ ホームページ上の表示

上記のように、<td> タグを使うことで、枠を横に並べることができます。


なお、このような <table> タグ、 <tr> タグ、 <td> タグの基本的な使い方は、
テーブル（table）を使って枠を作る方法 の動画を見てみてください。

やはり、動画の方が分かりやすいですし、この動画を見れば、
<table> タグの基本的な使い方は、マスターできるはずです。


そして、<table> タグをマスターすれば、ホームページは自由に作ることができます。
そこで、下記の動画も、あわせて見てみて下さいね。

・ テーブル（table）を使った枠の横幅や縦幅、文字との間隔を指定する方法
・ テーブル（table）を使ったときの線の太さと色を変更する方法
・ テーブル（table）を使ったときの枠の場所を決める方法
・ 背景の色を変更する方法と背景に画像を使用する方法
・ ホームページ制作に使えるテーブル（table）の活用事例


上記のページでは、<table> タグを使って、 横幅や線の太さ、枠や文字を表示させる位置の調整方法 などを、動画で解説しています。

<table> タグをマスターすると、本当に、ホームページは自由に作ることができますので、ぜひ覚えておいてくださいね。



そして、最後に、、、上記のことをマスターしたら、 「枠を連結する方法」 も知っておいていただきたいと思っています。

<table> タグは、枠を表示するだけでなく、その枠を組み合わせることで、「表」を作ることもできるのですが、「表」を作るときに、 ここでお伝えする 「枠を連結する方法」を使うときが、あるかもしれないためです。

もちろん、これについては、「こんなこともできる！」 程度で知っておいていただいて、必要なときに、このページを見ていただければ良いと思いますよ！


それでは、まずは、 枠を横に連結する方法 です。

■ 枠を横に連結する記述例

■ ホームページ上の表示

枠を横に連結するためには、上記のように、colspan="2"と記述します。

なお、"2" という数字は、「２つの枠を連結する」という意味です。
そのため、３つの枠を連結したい場合は、colspan="3" と記述します。


一方、 枠を縦に連結したい場合 は、下記のように記述します。

■ 枠を縦に連結する記述例

■ ホームページ上の表示

枠を縦に連結するためには、上記のように、rowspan="2" と記述します。

なお、先ほどと同じように、"2" という数字は、「２つの枠を連結する」という意味です。 そのため、３つの枠を連結したい場合は、rowspan="3" と記述します。


このような、枠を連結する方法は、「表」を作るときに、いつか使うかもしれません。

そのときに、ここでお伝えした知識が役に立ちますので、ぜひ頭の片隅に入れておいて下さいね！

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒　当サイトで使用しているサンプルサイトの無料ダウンロードはこちら

これからはAIの時代になります。 私も、AIを使って文章や画像やホームページを作っています。 私が実際に行っているやり方を、分かりやすく解説した講座が、下記の講座です。

⇒　AIやChatGPTを活用してビジネスを行う講座はこちら