ブログ作成に必要な基本的なHTMLタグについて説明してます!(HTML フォント レイアウト リンク・画像 テーブルなど)

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


テーブルタグ

表の外枠表示を指定するの説明と例

使用するHTMLタグ

<Table Border Frame="表示方法">

表示方法の部分に入れるキーワード(値)を紹介します。

入れる文字は半角英数字で入力して下さい!


表示方法を指定するキーワード(値)についての説明
Void 表の外枠全てを消して表示しない
Above 表の外枠上部分だけ残して表示します
Below 表の外枠下部分だけ残して表示します
Hsides 表の外枠上下を残して表示します
Lhs 表の外枠左側を残して表示します
Rhs 表の外枠右側を残して表示します
Vsides 表の外枠左右を残して表示します
Box 表の外枠全て表示します


基本の表では見えにくいので枠線の色をオレンジにしています!


表の外枠全てを消して表示しないの例
<Table Border Bordercolor="#FFB800" Frame="Void">
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
</Table>
変換後

ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字


Voidを入れたので外枠すべて表示されません

他のページで紹介している<Table>タグを使って作成した表にもこのタグを使うことが出来ます。

HTMLタグ練習ページを使って作成してみて下さい!




入れ方
紹介しているタグを上手く利用して使いやすい部分をマウスでコピー
<Table Border>にFrame="キーワード(値)">を入れたいと思います。
<Table Border>の右のカッコを削除
<Table Border
カッコを削除したら半角スペースを空けてコピーしたタグを貼り付け
<Table Border半角スペースFrame="キーワード(値)">
<Table Border Frame="キーワード(値)">
このようになれば完成あとはキーワード(値)の部分を削除して
<Table Border Frame="">
削除した部分に指定したいを入れれば完成です!
下のようになればOKです!
<Table Border Frame="Void">


スポンサード リンク


表の外枠上部分だけ残して表示の例
<Table Border Bordercolor="#FFB800" Frame="Above">
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
</Table>
変換後

ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字


Aboveを入れたので外枠上部のみ表示されます!


表の外枠下部分だけ残して表示の例
<Table Border Bordercolor="#FFB800" Frame="Below">
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
</Table>
変換後

ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字


Belowを入れたので外枠下部のみ表示されます!



表の外枠上下を残して表示の例
<Table Border Bordercolor="#FFB800" Frame="Hsides">
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
</Table>
変換後

ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字


Hsidesを入れたので外枠の上部と下部のみ表示されます!



スポンサード リンク


表の外枠左側を残して表示の例
<Table Border Bordercolor="#FFB800" Frame="Lhs">
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
</Table>
変換後

ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字


Lhsを入れたので外枠左部分のみ表示されます!



表の外枠右側を残して表示の例
<Table Border Bordercolor="#FFB800" Frame="Rhs">
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
</Table>
変換後

ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字


Rhsを入れたので外枠右部分のみ表示されます!



表の外枠左右を残して表示の例
<Table Border Bordercolor="#FFB800" Frame="Vsides">
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
<Tr>
<Td>ここに文字</Td><Td>ここに文字</Td><Td>ここに文字</Td>
</Tr>
</Table>
変換後

ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字
ここに文字ここに文字ここに文字


Vsidesを入れたので外枠の左右のみ表示されます!



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

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

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

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

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

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

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

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

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


Copyright (C) 初心者のブログ作成 HTMLタグ研究所! All Rights Reserved. |