テーブルタグ|ド素人が今日から真似できるHTML使用法

HTMLで非常に難しいのはテーブルタグ!これがHTMLの最難関といっても過言ではありませんね?実際に、私もテーブルタグが苦手で体得するのに時間が掛かった挙句…実際ほとんど使用してきませんでした。

 

しかし、やはりHTML色を理解し、テーブルタグを使えるようになる事でHTMLに自信がつくだけでなく、綺麗で見やすいコンテンツを作れるようになります。このページでは以下の3つのポイントを集中して覚えられます。

【本記事で学ぶ内容】

  • HTML色の基本がわかる
  • テーブルタグの基本構成がわかる
  • テーブルタグの応用技が身につく

これらを覚えれば、あるデータなどを元にテーブルタグですっきりまとめてWEBユーザーに見せる事が出来ます。情報の提供方法としてのレベルも上がるので是非覚えてみてください。

 

HTMLを使ったブログサイトの基本色

まずブログやサイトのHTML色の基本は…

  1. 背景色が白で文字(フォント)は黒が基本!

これを守る事でブログ全体に安心感が持ててWEBユーザーから信頼されます。

また特定のフォントを強調するHTML基本色は…

文字は太字で赤色

投稿サンプル投稿サンプル投稿サンプル
投稿サンプル投稿サンプル投稿サンプル

文字は黒で太字+背景色は黄色

投稿サンプル投稿サンプル投稿サンプル
投稿サンプル投稿サンプル投稿サンプル

ここに注意するだけでも十分に見栄えの良いフォントにすることは可能です。是非、強調したい文章に使用してみましょう。

覚えよう!テーブルタグの基本構成

HTMLが多少出来るようになると…ほとんどの人がつまづくのはこのテーブルタグ!このテーブルタグは少々複雑な作りをしています。ですので使えれば即戦力になりますが…一度挫折すると体得するまでに時間がかかる。

ここでは基本構成からお伝えします。

テーブルタグの基本構成

<table>
<tbody>
<tr>
<td>文章文章文章文章文章文章文章文章文章</td>
</tr>
</tbody>
</table>

この形が基本になります。

開始の合図:<table>
文章入れる場所:<tbody>
横一列を定義:<tr>
表の縦のセルを定義:<td>

終わりの合図:</table>
文章終わりの場所:</tbody>
横一列を定義終了:</tr>
表の縦のセルを定義終了:</td>

ですがHTMLの基本形は…<>○○</>である事には変わりありません。ただこの基本形を見てピンとこなければ、是非下記のHTML基本に関する記事を参考にしてください。

参考記事:HTML初心者が覚えるべき意味と5つの基本ルール

 

フォント以外のHTML色の使い道って?

フォントでの使用はもちろんの事―テーブルタグ(外枠色・背景色)でも応用できます。

■通常のテーブルタグ

投稿サンプル投稿サンプル投稿サンプル
投稿サンプル投稿サンプル投稿サンプル
投稿サンプル投稿サンプル投稿サンプル

HTML表記)

<table>
<tbody>
<tr>
<td>投稿サンプル投稿サンプル投稿サンプル<br />
投稿サンプル投稿サンプル投稿サンプル<br />
投稿サンプル投稿サンプル投稿サンプル</td>
</tr>
</tbody>
</table>

 

■カラーコード仕様テーブルタグ

投稿サンプル投稿サンプル投稿サンプル
投稿サンプル投稿サンプル投稿サンプル
投稿サンプル投稿サンプル投稿サンプル

<table bgcolor=”カラーコード”>
<tbody>
<tr>
<td>投稿サンプル投稿サンプル投稿サンプル<br />
投稿サンプル投稿サンプル投稿サンプル<br />
投稿サンプル投稿サンプル投稿サンプル</td>
</tr>
</tbody>
</table>

このような使い方もHTML色を使用すれば可能になります。

HTML色によるテーブルタグの応用技!

先ほどのカラーコードを使用したテーブルタグは全体背景色を変えるという基本的なやり方。実は〝カラーコードを入れる場所”によっては反映のさせ方は大きく変わります。

・行単位で背景色テーブルタグ

投稿サンプル1-1投稿サンプル1-2投稿サンプル1-3
投稿サンプル2-1投稿サンプル2-2投稿サンプル2-3
投稿サンプル3-1投稿サンプル3-2投稿サンプル3-3

<table border=”1″>
<tr>
<td>投稿サンプル1-1</td>
<td>投稿サンプル1-2</td>
<td>投稿サンプル1-3</td>
</tr>
<tr bgcolor=”カラーコード”>
<td>投稿サンプル2-1</td>
<td>投稿サンプル2-2</td>
<td>投稿サンプル2-3</td>
</tr>
<tr>
<td>投稿サンプル3-1</td>
<td>投稿サンプル3-2</td>
<td>投稿サンプル3-3</td>
</tr>
</table>

(※カラーコードは自由に変えてOK!)

・セル単位で背景色テーブルタグ

投稿サンプル1-1投稿サンプル1-2投稿サンプル1-3
投稿サンプル2-1投稿サンプル2-2投稿サンプル2-3
投稿サンプル3-1投稿サンプル3-2投稿サンプル3-3

<table border=”1″>
<tr>
<td>投稿サンプル1-1</td>
<td bgcolor=”カラーコード”>投稿サンプル1-2</td>
<td>投稿サンプル1-3</td>
</tr>
<tr>
<td>投稿サンプル2-1</td>
<td bgcolor=”カラーコード”>投稿サンプル2-2</td>
<td>投稿サンプル2-3</td>
</tr>
<tr>
<td>投稿サンプル3-1</td>
<td bgcolor=”カラーコード”>投稿サンプル3-2</td>
<td>投稿サンプル3-3</td>
</tr>
</table>

(※カラーコードは自由に変えてOK!)

以上のように…カラーコード(HTML色:bgcolor=”カラーコード”)を入れる場所により反映が変わります。

【テーブルタグ内の全体背景色変更】

  • <table>⇒<table bgcolor=”カラーコード”>

【横一列の背景色変更】

  • <tr>⇒<tr bgcolor=”カラーコード”>

【縦一列の背景色変更】

  • <td>⇒<td bgcolor=”カラーコード”>

という形で背景色をそれぞれ変えることができます。是非試してみてください。

テーブルタグのさらなる応用技!

今度は背景色ではなく、外枠の色を変更しましょう!まず、外枠をつける場合は通常のテーブルタグに下記のHTMLを追加します。

  • <table>⇒<table border=”半角数字”>

このように記述を変えると「外枠」が出来ます。

投稿サンプル投稿サンプル投稿サンプル
投稿サンプル投稿サンプル投稿サンプル
投稿サンプル投稿サンプル投稿サンプル

参考例)

<table border=”1″>
<tbody>
<tr>
<td>投稿サンプル投稿サンプル投稿サンプル<br />
投稿サンプル投稿サンプル投稿サンプル<br />
投稿サンプル投稿サンプル投稿サンプル</td>
</tr>
</tbody>
</table>

さらに記述を変えます。

  • <table border=”半角数字”>⇒<table border=”半角数字” bordercolor=”カラーコード”>
<table border=”1″ bordercolor=”#ff0000″>
<tbody>
<tr>
<td>投稿サンプル投稿サンプル投稿サンプル<br />
投稿サンプル投稿サンプル投稿サンプル<br />
投稿サンプル投稿サンプル投稿サンプル</td>
</tr>
</tbody>
</table>

本来は、この表記で外枠カラーは可能なのですが…私のテンプレートではどうやってもうまく反映されません(CSSの優先度によるものと思われます。)ので、参考例が良かったサイトをご紹介します。

参考サイト:TAG<index>!

 

まとめ

テーブルタグは色々な要素が一気に詰め込められるので作り込めば、物凄く素晴らしい状態にする事ができますが…その分だけレベルも上がります。

ですので一度間違えると何がどう間違えたのかわからなくなる上に、使っているブログによってはHTMLモードで記述したものが、勝手に要素を足されている場合やまとめられてしまう場合があるので、少しわかりづらくなってしまいます。

ですのでHTMLの中でもテーブルタグは非常に困難なので徐々に煮詰めていった方が良い。まず、自分が見て3秒でおかしくなっている原因がわかるぐらいまで何度も見てテーブルタグの構成に慣れておく事。

そうすることで苦手意識もいつの間にか消えていき、テーブルタグで挫折しなくなるので是非とも覚えておいてください。

 

最後までお読み頂きありがとうございました。

 

1日たった3時間!PC1つで月5万円以上を稼ぐ全手法をあなたは知りたくありませんか?

私も「アフィリエイトをブログで始めて稼いでみたい!でも実際、何から始めたらいいのか…」と、あなたは困っていませんか?


確かにアフィリエイトは今や様々な稼ぎ方が存在します。なのでネットで流れている情報に困惑するかもしれませんね。


しかし、私がやってきた「この方法」なら、ブログをビジネス用で使った事がない30代の方でも1日3時間の作業で十分にお小遣い稼ぎは可能です。さぁ今すぐあなたも始めてみましょう!


また私のメルマガ購読者限定で…私から“豪華特典を累計23本を配布”させて頂きます。


Coming soon!

SNSでもご購読できます。

・本格的に稼ぎたい30代のあなたにオススメ教材です!

ua1
私は、この情報教材でアフィリエイト収益0円⇒80,000円以上稼ぐ事に成功しました。今度は、あなたが試してみる番です!

rank3

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)