表を書く方法 HTML:テーブルタグを使って
こんにちワ。綾小路きみまろじゃない、道路工事きもまろです^^;
（以前書いた記事を修正して、まとめてみました。）
こんな表を書く方法です（↓）。
| 順番等 | ・・・・・・・・備考、概要、簡単な説明文等・・・・・・・・ |
| １ | ～～ |
| ２ | ～～ |
| ３ | ～～ |
| ４ | ～～ |
| ５ | ～～ |
| ６ | ～～ |
| ７ | ～～ |
| ８ | ～～ |
| ９ | ～～ |
| １０ | ～～ |
ウェブページにテーブルタグを使って表を書く方法
1.基礎編
【基本形】です。
「ブログを書く」で「HTML表示」にして（タグ編集エディタを採用されている方はそのままで）、以下の文字列を記述します。
<table border=1><tr><td>１番</td></tr></table>
「プレビュー」あるいは「表示を確認する」では、
| １番 |
↑このように表示されます。
これが基本形です。
・赤い太字の部分の数字を大きくする(例:2)と枠線が太くなります。
↓
| １番 |
次に、表らしく、この枠をいくつか並べてみたいと思います。
【応用形】枠（セル）を並べます。
①横に並べる場合です。
<table border=1><tr><td>１番</td><td>２番</td></tr></table>
「プレビュー」あるいは「表示を確認する」では、
| １番 | ２番 |
↑このように表示されます。
②縦に並べる場合です。
<table border=1><tr><td>１番</td></tr><tr><td>２番</td></tr></table>
「プレビュー」あるいは「表示を確認する」では、
| １番 |
| ２番 |
↑このように表示されます。
この記述の中の「<td>～</td>」と言う部分が一個の枠を示しています。（この囲われた枠の事をセルと呼びます）
これを続けて記述していくと、セルが横方向に伸びていきます。
それを「<tr>～</tr>」で囲む事で改行されます。
③枠を追加して並べていく場合です。
<table border=1><tr><td>１番</td><td>２番</td></tr><tr><td>３番</td><td>４番</td></tr></table>
「プレビュー」あるいは「表示を確認する」では、
| １番 | ２番 |
| ３番 | ４番 |
↑このように表示されます。
・・・
例:表題（小見出し・・）と説明文を表にする場合
| 表題①ー１ | ああああああああああ |
| 表題② | いいいいいいいい |
| 表題③ | うう |
これのタグは、こちらです↓
<table border=1><tr><td>表題①ー１</td><td>ああああああああああ</td></tr><tr><td>表題②</td><td>いいいいいいいい</td></tr><tr><td>表題③</td><td>うう</td></tr></table>
2.応用編
| 順番等 | ・・・・・・・・備考、概要、簡単な説明文等・・・・・・・・ |
| １ | ～～ |
| ２ | ～～ |
| ３ | ～～ |
| ４ | ～～ |
| ５ | ～～ |
| ６ | ～～ |
| ７ | ～～ |
| ８ | ～～ |
| ９ | ～～ |
| １０ | ～～ |
これを「HTML表示」にすると、以下のようになります。
<Div Align="center"><table border="2" BorderColor="#0000ff"BgColor="#FFFFdd"><tr><td>順番等</td><td>・・・・・・・・備考、概要、簡単な説明文等・・・・・・・・</td></tr><tr><td>１</td><td>～～</td></tr><tr><td>２</td><td>～～</td></tr><tr><td>３</td><td>～～</td></tr><tr><td>４</td><td>～～</td></tr><tr><td>５</td><td>～～</td></tr><tr><td>６</td><td>～～</td></tr><tr><td>７</td><td>～～</td></tr><tr><td>８</td><td>～～</td></tr><tr><td>９</td><td>～～</td></tr><tr><td>１０</td><td>～～</td></tr></table></div>
＊１０行にする場合は、最後の方の、
<tr><td>１０</td><td>～～</td></tr>
を、削除して下さい。（さらに行数を減らす場合は、この手順を繰り返して下さい）
逆に、行数を増やす場合は、上のタグをコピーして、最後の方の</table>の直前に記入して、赤字の箇所を、表示させたい数字、文章等に差し替えて下さい。
注：上記タグの中の
＊1.table border="2" の数字（2）が枠線の太さです（大きくすると太くなります）。
＊2.BorderColor="#0000ff"が枠線の色です（今回は青）。カラーコード#0000ffを、お好みで差し換えてください。
＊3.BgColor="#FFFFdd"が枠線内の色です（今回は少し黄色の入った白）。これもカラーコード#FFFFddを、お好みで差し換えてみて下さい。
例：枠線を赤、枠線内を黄色にして、枠を少し太くしてみました。
| 順番等 | ・・・・・・・・備考、概要、簡単な説明文等・・・・・・・・ |
| １ | ～～ |
| ２ | ～～ |
○要約
最初に<table border>を記述し、１行ごとに、<tr>～</tr>で囲んで、その中に、セル<td>～文章～</td>を記述して、最後に</table>で閉じます。
※１行（<tr>～</tr>）の中に記入するセル（<td>～</td>）の数は一定のものにして下さい。
でないと表にならなくなっちゃいます＾＾；
※セルの横幅は、その列の一番長い箇所のものになります。
最初に<table border>を記述し、１行ごとに、<tr>～</tr>で囲んで、その中に、セル<td>～文章～</td>を記述して、最後に</table>で閉じます。
※１行（<tr>～</tr>）の中に記入するセル（<td>～</td>）の数は一定のものにして下さい。
でないと表にならなくなっちゃいます＾＾；
※セルの横幅は、その列の一番長い箇所のものになります。
※こちらに便利なテーブルタグ自動作成サイトがありました。
⇒Web便利ツール/テーブルタグ作成ツール - TAG index Webサイト
○思うこと
ブログ等に表を書く場合、エクセルを使って書いて、それをキャプチャーして画像として表示されてる場合が多いと思います。
ただそれだと表内のテキストをコピーする事が出来ません。また、テキストにリンクを貼る事も出来ません。
ちと手間は掛りますが、こんなテーブルタグを使って表を書いたほうが閲覧者さんにとって親切な場合もあると思います。
ブログ等に表を書く場合、エクセルを使って書いて、それをキャプチャーして画像として表示されてる場合が多いと思います。
ただそれだと表内のテキストをコピーする事が出来ません。また、テキストにリンクを貼る事も出来ません。
ちと手間は掛りますが、こんなテーブルタグを使って表を書いたほうが閲覧者さんにとって親切な場合もあると思います。
☆ブィブィ ('-^*)/
元祖：かまってちゃん。
ね！？