罫線のタグ記事一覧

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


ブログで表を作るためには、下のようなＴａｂｌｅタグを使います。


この<table>～</table>の中に行列を表示するＨＴＭＬタグを入れていきます。


行を表示するには下のように、trタグを使います。

trは、Ｔａｂｌｅ　Ｒｏｗの略で、Ｔａｂｌｅ（表）の横方向のルールを決める役割があります。


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

trは、Ｔａｂｌｅ（表）の行（横）方向のルールを定義しているだけなので、文字を入れるセル（箱）を作ってあげる必要があります。


セル（箱）を作るには下のように、tdタグを使います。

tdは、Ｔａｂｌｅ　Ｄａｔａの略で、セルの中にある文字が｢データ｣となるようなセル（箱）を作ります。


Ｔａｂｌｅ（表）の基本（１行１列）となるＨＴＭＬタグは、下の通りです。



１行１列のＴａｂｌｅ（表）を作ってみます。

ＨＴＭＬタグは、下の通りです。

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

結果はこんな感じです。
↓

１行目の１列目

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


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

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




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

Tableタグの後ろに、半角スペースを入れてborderと入力します。


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

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

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

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




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


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

１行目の１列目

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



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





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




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


５行３列のTableのＨＴＭＬタグは、下の通りです。


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

１行目の１列目	１行目の２列目	１行目の３列目
２行目の１列目	２行目の２列目	２行目の３列目
３行目の１列目	３行目の２列目	３行目の３列目
４行目の１列目	４行目の２列目	４行目の３列目
５行目の１列目	５行目の２列目	５行目の３列目

table（表）にするためのＨＴＭＬタグの仕組みがわかれば、表を作ることも簡単ですね。




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




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