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

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

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 作成ソフトの選び方 作成ソフトの比較 ネットで収入
 
 
 はじめに
当サイトは、ホームページの作り方を覚える
ことができる動画を無料で公開しています。
動画でホームページの作り方が分かります。
 
最近の注目コンテンツ
無料ホームページ作成 HPを作る前に知っておきたいこと
無料ホームページ作成 初心者のためのホームページ基礎講座
無料ホームページ作成 良いレンタルサーバの選び方と比較!
 
用語集とタグの書き方
無料ホームページ作成 基本になる HTMLタグの書き方
無料ホームページ作成 ホームページ作成でよく使う用語集
無料ホームページ作成 サンプルサイトをダウンロード!
 
 
 
  ホーム > 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 おすすめ副業ランキングサイト