★ Let's become a Web Designer! 【プロフィール】 【特定商取引法】 【商品一覧】 【よくある質問】 【お問い合わせ】
 

table、tr、tdタグの活用事例

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 作成ソフトの選び方 作成ソフトの比較 ネットで収入
 
 
  ホーム > HTMLタグの書き方 > img タグ >> table、tr、td タグの書き方 >> li タグ
 

<table>、<tr>、<td> タグの書き方

<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" と記述します。


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

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


 

 
今スタートできるサンプル
サイトを無料ダウンロード
 
 
カレンダー
 
 
 
サイドビジネス講座
 
会員制サイドビジネス講座
 
初心者がホームページを自分で作れる能力を身につけて、 そのホームページをビジネスに活用する方法 をお伝えする、会員制のサイドビジネス講座です。

この講座は、 初心者がインターネットで収入を得られるようになること を目的として、運営しています。
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための 「ホームページテンプレート」 です。

テンプレートと、たくさんのパーツ集をコピーして貼り付けるだけで、ホームページが完成する仕組みになっています。

さらに、 テンプレートの使い方はすべて動画で解説 しています。
 
基礎講座と用語集
  ホームページ基礎講座
  HPでよく使う用語集
  HTMLタグの書き方
  スタイルシートの書き方
 
インターネット副業
 
サイドビジネス・副業の始め方
 
初心者が、インターネットを使ったサイドビジネスで、 自宅にいながら収入を得る方法 を、すべて動画でお伝えするサイトです。

また、仕事ができるようになるノウハウや、 「最高の成長法」 などもお伝えしています。
 
 
メールマガジン
  メールマガジンの登録
 
リンク集
  当サイトへのリンク
  役立つホームページ
  お客様のホームページ
 
広告
 
- ホームページ作成サービス
 
- 無料スマホサイト作成講座
 
- 動画の無料FX講座
 
 
会社概要
 
- 特定商取引に基づく表記
 
- 個人情報保護ポリシー
 
- お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状
 
当サイトは、NPO法人 「起業とキャリア支援センター」 様からの推薦を受けて、運営しています。
 
当サイトの情報およびデータの無断流用は固く禁止しています
 
 
Copyright © 無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト