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


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

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


 




【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

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

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



副業で月20万円の収入を、自宅の空いている時間で稼ぐための講座

インターネットを使ったサイドビジネス(副業)で、自宅にいながら、空いている時間で、月20万円の収入を得ていただくための方法 もお伝えしています。 これからは、「複数の収入源を持つこと」がとても大切なので、ぜひホームページで収入を得ていきましょう!

副業で自宅にいながら、収入を得るための講座はこちら!



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

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

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

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

また、仕事ができるようになるノウハウや、「最高の成長法」などもお伝えしています。
 
 
メールマガジン
 無料ホームページ作り方 メールマガジンの登録
 
リンク
 
会社概要
 
特定商取引に基づく表記
 
個人情報保護ポリシー
 
お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状

 
当サイトは、NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。
 
トップページプロフィール特定商取引法に基づく表記取り扱い商品一覧よくある質問お問い合わせ
 
 
Copyright © 動画で覚える無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト
^