本日はHTMLのTableの基本のth,tr,tdと属性と単線について解説します。
それではいってみましょう！
Menu
table要素
テーブルの大枠。
<table> ～ <table>の中にテーブルの各要素を記述して表(テーブル)を作成します。
テーブルは基本的にTHとTRとTDの3つの要素で構成されています。
基本的なテーブルのつくりは、セルと外枠の2つが存在します。
下記のテーブルのように、セル（見出し、データ）と外枠で構成されています。
1 2 3 4 5 6 7 8 9 10 11 12 | <table border="1"> <tr> <th>見出し1</th> <th>見出し2</th> <th>見出し3</th> </tr> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> </table> |
th要素(table header)
テーブルの見出しを表示させる場合に記述します。
（thは見出しがある時だけ使用します）
下記の赤の箇所がthです。
tr要素(table row)
テーブルの行になります。
下記赤枠が2つなので2行のtrということです。
td要素(table data)
テーブルのデータを表示させます。
下記の赤の箇所がTDになります。
この3つの要素が最重要なので必ず覚えましょう！
テーブルの属性
border
外枠の太さを変更できます。
border=“1” ←左の数字部分を変更することで外枠の太さを変更できます。
【borderサンプルコード】
1 2 3 4 5 6 7 | <table border="1"> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> </table> |
cellpadding
文字とセルの間隔(padding)を変更できます。
cellpadding=“20” ←左の数字部分を変更することで間隔が変更できます。
【cellpaddingサンプルコード】
1 2 3 4 5 6 7 | <table border="1" cellpadding="20"> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> </table> |
cellspacing
セルとセルの間隔、セルと外枠までの間隔を変更できます。
cellspacing=“20” ←左の数字部分を変更することで間隔が変更できます。
【cellspacingサンプルコード】
1 2 3 4 5 6 7 | <table border="1" cellspacing="20"> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> </table> |
【その他の属性】
・align → 位置(left,center,right)
・bgcolor → 背景色
・frame → 枠線
・rules → 罫線
・summary → 代替テキスト(caption)
・width → テーブルの幅
CSSでテーブルの外枠を単線にする
こちらは補足ですが、テーブルの線を1本の線にする場合のCSSの記述方法です。
【サンプルコード】
1 2 3 4 5 | <style> table{ border-collapse:collapse; } </style> |
二重線が単線になります。
【実行前】
【実行後】
まとめ
今回はテーブルの基礎を解説をしました。
特にth,tr,tdはテーブルの基礎として最重要な部分なのでよく理解しておきましょう！
HTMLメルマガなんかにも、よくテーブルは使用されます。
以上です。
その他テーブル関連
【エクセルVBA】webスクレイピング(テーブル操作th,tr,td取得)
