ブログ作成に必要な基本的なＨＴＭＬタグについて説明してます！（ＨＴＭＬフォントレイアウトリンク・画像テーブルなど）

初心者のブログ作成ＨＴＭＬタグ研究所！	サイトマップ	お問い合せ	LINK
	HTMLタグの他にPC・インターネット関連用語集や便利なショートカットキー一覧・無料で利用できる便利なサイトも紹介してるのでゆっくり見て下さい！

テーブルタグ

表の列を増やすと行を増やす！の説明と例

基本のテーブルタグ（この形を憶えよう！）

<Table Border>　←表の最初の部分
<Tr> ←この部分は行の始まり
<Td>　←この部分は列の始まり
ここに文字
</Td> ←この部分は列の終わり
</Tr> ←この部分は行の終わり
</Table> ←この部分は必ずテーブルの最後に来ます！

変換後

ここに文字

列について

１

２

３

４

５

列とは左の表のように横に並んだ１～５の
各マスのことをいいます。
この場合は５列１行の表になります。

行について

１

２

３

４

５

行とは左の表のように縦に並んだ１～５の
各マスのことをいいます。
この場合は１列５行の表になります。

テーブル（表）の列を増やす方法について

<Tr>～</Tr>の間の<Td>～</Td>を増やすことで列を増やすことが出来ます。

このページの最初に紹介した一列一行の基本のテーブルタグのHTMLタグです。　

◆ <Td>～</Td>が１つのテーブルタグ（１列１行）

<Table Border>
<Tr>
<Td>ここに文字</Td>← この部分が列になります！
</Tr>
</Table>

上記の基本のテーブルタグの赤字部分に注目して下さい！

この<Td>～</Td>を増やすことで列を増やすことが出来ます。

※ ここでは解りやすくするために赤と青の2色を使い説明します。

<Td>～</Td>が２つのテーブルタグ（２列１行）

上のように<Tr>～</Tr>の間の<Td>～</Td>を増やすことで
列を増やすことが出来ます！

<Td>文字1列目</Td><Td>文字2列目</Td>

変換後

文字1列目

文字2列目

★さらに増やしていくと下のようになります！！

<Td>～</Td>が３つのテーブルタグ（３列１行）

上のように<Tr>～</Tr>の間の<Td>～</Td>を増やすことで
列を増やすことが出来ます！

<Td>文字1列目</Td><Td>文字2列目</Td><Td>文字3列目</Td>

変換後

文字1列目

文字2列目

文字3列目

この作業を繰り返すと列を多く増やすことが出来ます！

HTMLタグ練習ページなどに貼り付けて練習してみて下さい。

<Td>～</Td>が５つのテーブルタグ（５列１行）

上のように<Tr>～</Tr>の間の<Td>～</Td>を増やすことで
列を増やすことが出来ます！

<Td>1</Td><Td>２</Td><Td>３</Td><Td>４</Td><Td>５</Td>

変換後

１

２

３

４

５

スポンサード　リンク

テーブル（表）の行を増やす方法について

最初に紹介した基本のテーブルタグ

<Table Border>
<Tr> ←この部分は行の始まり
<Td>ここに文字</Td>
</Tr> ←この部分は行の終わり
</Table>

<Td>～</Td>（列）を含む<Tr>～</Tr>を増やすことで行を増やすことが出来ます！

<Tr>～</Tr>が２つのテーブルタグ（１列２行）

<Table Border>
<Tr>
<Td>ここに文字を入れます</Td>
</Tr>
<Tr>
<Td>ここに文字を入れます ←緑字部分2行目</Td>
</Tr>
</Table>

上のように赤字と青字の間に緑字の部分を入れる事で行が増えます！

変換後

ここに文字を入れます

ここに文字を入れます ←緑字部分2行目

★さらに増やしていくと下のようになります！！

<Tr>～</Tr>が３つのテーブルタグ（１列３行）

<Table Border>
<Tr>
<Td>ここに文字を入れます</Td>
</Tr>
<Tr>
<Td>ここに文字を入れます ←緑字部分2行目</Td>
</Tr>
<Tr>
<Td>ここに文字を入れます ←ピンク字部分3行目</Td>
</Tr>
</Table>

上のように緑字と青字の間にピンク字の部分を入れる事で行が増えます！

変換後

ここに文字を入れます

ここに文字を入れます ←緑字部分2行目

ここに文字を入れます ←ピンク字部分3行目

<Tr>～</Tr>が４つのテーブルタグ（１列４行）

<Table Border>
<Tr>
<Td>ここに文字を入れます</Td>
</Tr>
<Tr>
<Td>ここに文字を入れます ←緑字部分2行目</Td>
</Tr>
<Tr>
<Td>ここに文字を入れます ←ピンク字部分3行目</Td>
</Tr>
<Tr>
<Td>ここに文字を入れます ←緑字部分4行目</Td>
</Tr>
</Table>

上のようにピンク字と青字の間に緑字の部分を入れる事で行が増えます！

変換後

ここに文字を入れます

ここに文字を入れます ←緑字部分2行目

ここに文字を入れます ←ピンク字部分3行目

ここに文字を入れます ←緑字部分4行目

この作業を繰り返すと行を多く増やすことが出来ます！

HTMLタグ練習ページなどに貼り付けて練習してみて下さい。

理解力テスト

列と行の増やし方が理解できたか次の問題に挑戦してみて下さい！

日付	売り上げ
8/01	35,980円
8/02	15,470円

問題　
HTMLタグ練習ページを使って上と同じテーブルタグ（表）を完成させて下さい！

下のHTMLタグをマウスでコピー・貼り付けをして挑戦してみて下さい！
※　同じ物を何度も使用してもOKです。

</Td>

</Table>

</Tr>

売り上げ

<Tr>

8/02

35,980円

日付

15,470円

8/01

<Td>

スポンサード　リンク

回答　（作業しやすいように表示しています）

HTMLタグを使う場合の注意点！

HTMLタグを使う場合の入力方法は半角英数字です。　基本となるHTMLタグはコピー・貼り付けで構いませんがサイズ・カラーコード・アドレスなどの数字や文字を入力する場合に半角英数字以外の文字で入力すると正しく表示されないので注意して下さい！

また、HTMLタグを入力する際は半角英数字ですが大文字と小文字の区別は無いので気にしないで下さい。

HTMLタグには開始タグと終了タグがあります。

例）<Font Size="1～7">～</Font>　最初の<Font Size="1～7">が開始タグで後の/スラッシュが付いた</Font>が終了タグになります。　終了タグを入れ忘れた場合ページのレイアウトが崩れることがあるので気をつけましょう！

その他に、基本のHTMLタグの<>←カッコ、"←ダブルクォーテーションやHTMLタグ内の記号・文字・数字などを消したり、スペースを空けたり・くっつけたり、改行したりするとHTMLタグが正しく表示されないので注意して下さい。

上記のミスが非常に多いので作成の際はPCのメモ帳などを利用してHTMLタグの見直しをして下さい。

また、正しく表示できない場合も基本のHTMLタグやここで説明した内容を確認してみて下さい！

HTMLタグは最初は見なれない文字や記号が多いので意味が解らないと思いますが使用しているうちになれて読めるようになります。　少しずつ落ち着いて作業して下さい！

ページトップ

[PR] 解体

ブログ作成に必要な基本的なＨＴＭＬタグについて説明してます！（ＨＴＭＬ フォント レイアウト リンク・画像 テーブルなど）

ブログ作成に必要な基本的なＨＴＭＬタグについて説明してます！（ＨＴＭＬフォントレイアウトリンク・画像テーブルなど）