ブログで表を作るときのHTMLコード

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 カテゴリ
 タグ
None

文字カウント、<p>タグ<br />タグの自動挿入、ワンクリックで画像回り込みなど記事作成が楽になるツール

ブログで表を作るときのHTMLコード

ブログで表を作るときのHTMLタグがなかなか理解することができなかったので、あらためてまとめてみました。


ブログで表を作るためには、下のようなTableタグを使います。
<table>ここに表の行列になるHTMLタグを入れる</table>


この<table>~</table>の中に行列を表示するHTMLタグを入れていきます。


行を表示するには下のように、trタグを使います。
<tr>ここに文字を書く</tr>

trは、Table Rowの略で、Table(表)の横方向のルールを決める役割があります。


Table(表)を作る場合、<tr></tr>の間に文字を書いただけでは、ちょっと足りません。

trは、Table(表)の行(横)方向のルールを定義しているだけなので、文字を入れるセル(箱)を作ってあげる必要があります。


セル(箱)を作るには下のように、tdタグを使います。
<td>ここに文字を書く</td>

tdは、Table Dataの略で、セルの中にある文字が「データ」となるようなセル(箱)を作ります。


Table(表)の基本(1行1列)となるHTMLタグは、下の通りです。
<table>
<tr>
<td>ここに文字を書く</td>
</tr>
</table>



1行1列のTable(表)を作ってみます。

HTMLタグは、下の通りです。





<table>
<tr>
<td>1行目の1列目</td>
</tr>
</table>




結果はこんな感じです。

1行目の1列目



文字は表示されましたが、線がありません。


Tableに線を引くには、別にHTMLタグを使う必要があります。

なんだか、こんがらかってきた・・・




Tableに線を引くHTMLタグは、borderを使います。

Tableタグの後ろに、半角スペースを入れてborderと入力します。
<table border="ここに数字を入れる">


<table border>は、<table border="1">を省略しています。

border="ここに数字を入れる"のここに数字を入れるの箇所に数字を入れることで、線の太さを選ぶことができます。

数字だけの入力ですが、単位はpxを使っています。

pxは、コンピュータで画像を表示するときに、色の情報を表す最も小さい単位です。




線の太さ「1」のTableタグは下の通りです。

<table border="1">
<tr>
<td>1行目の1列目</td>
</tr>
</table>


表示結果は、こんな感じです。

1行目の1列目



表らしくなってきましたね。



このborder=""に入れる数字が大きくなるにつれて、表の線も太くなります





Tableタグの仕組みを図でまとめてみました。

table-tag.png


行は<tr>で増やして、列は<td>で増やしていきます。


5行3列のTableのHTMLタグは、下の通りです。

<table border="1">
<tr>
<td>1行目の1列目</td>
<td>1行目の2列目</td>
<td>1行目の3列目</td>
</tr>
<tr>
<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>
<tr>
<td>4行目の1列目</td>
<td>4行目の2列目</td>
<td>4行目の3列目</td>
</tr>
<tr>
<td>5行目の1列目</td>
<td>5行目の2列目</td>
<td>5行目の3列目</td>
</tr>
</table>


表示結果は、こんな感じ。


1行目の1列目1行目の2列目1行目の3列目
2行目の1列目2行目の2列目2行目の3列目
3行目の1列目3行目の2列目3行目の3列目
4行目の1列目4行目の2列目4行目の3列目
5行目の1列目5行目の2列目5行目の3列目




table(表)にするためのHTMLタグの仕組みがわかれば、表を作ることも簡単ですね。




ブログの記事を書くことに集中できます^^




最後まで読んでいただき、ありがとうございます。



文字カウント、<p>タグ<br />タグの自動挿入、ワンクリックで画像回り込みなど記事作成が楽になるツール

コメント (0)

コメントを書く

 

 非公開コメント ()

トラックバック (0)

Copyright © 脱サラしたいサラリーマンがアフィリエイトを実践、気ままにネットビジネス All Rights Reserved.

テキストや画像等すべての転載転用販売を固く禁じます

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。