<table border="1">
<tr><td>1月1日</td><td>正月</td></tr>
<tr><td>2月2日</td><td>節分</td></tr>
</table>
前回はここまで進めました。
表としては既に完成していますが、
大体の人はここからセルの幅を広げたり、セル同士を繋ぎたいと考えるはずです。
今日はその辺のことをやっていきましょう。
4．テーブルの幅、セルの幅を広げたい
前回の「3-1．セルに枠線がないとテーブルっぽく見えないよね」では
<table>タグの中に「border="1"」という記述を追加しました。
これは「テーブルの線の幅を1にする」という意味合いの記述でした。
では今回は「テーブル（あるいはセル）の幅を幾つにする」という記述を追加するだけです。
今回追加する記述は「width="〇"」です。（〇は任意の数字）
これはテーブル(<table>)、セル(<td>)共に同じ記述を使用します。
先に言っておくと行(<td>)では使えません。
4-1．テーブルの幅を指定する
では早速テーブルの幅を広げてみましょう。
幅を500Pixelとしてみます。
<table border="1" width="500">
<tr><td>1月1日</td><td>正月</td></tr>
<tr><td>2月2日</td><td>節分</td></tr>
</table>
これを表示すると
こうなりました。
テーブル全体の幅が500になりそれと同時に日付とイベントのセルが広がっています。
セルの幅は恐らく文字数で自動配分されてるんじゃないかなと思います（あやふや）
4-2．セルの幅を指定する
さて、上で作成した表だと日付のところが広過ぎるので、狭くしてみましょう。
今度は1月1日のセルの幅を100にしてみましょう。
<table border="1" width="500">
<tr><td width="100">1月1日</td><td>正月</td></tr>
<tr><td>2月2日</td><td>節分</td></tr>
</table>
これを表示すると
こうなりました。多少表として見栄えがよくなりましたね。
それと同時に「あれっ？」と思うと思います。
2月2日のセルは幅を指定していないのに1月1日と同じ幅になっていますね。
これは<td>タグは確かに1つのセルではありますが、
列の幅を指定していると考えればわかりますでしょうか。
5．セル同士を結合したい
5-1．セル同士を結合したい(横編)
<table border="1" width="300">
<tr><td width="80">1月1日</td><td>正月</td></tr>
<tr><td>2月2日</td><td>節分</td></tr>
<tr><td>3月3日</td><td>ひな祭り</td></tr>
<tr><td>4月4日は何もない</td></tr></table>
今回やりたいことはすぐにわかるでしょうから、何の前置きもなく始めます。
「4月4日は何もない」を隣同士のセルで結合します。
隣同士のセルを結合する記述は「colspan="〇"」です。
今回は日付とイベントの2つのセルを結合するので「colspan="2"」と記述します。
<table border="1" width="300">
<tr><td width="80">1月1日</td><td>正月</td></tr>
<tr><td>2月2日</td><td>節分</td></tr>
<tr><td>3月3日</td><td>ひな祭り</td></tr>
<tr><td colspan="2">4月4日は何もない</td></tr></table>
これを表示すると
こうなります。
ちなみに結合するセルの数字ですが、一番右のセルまで結合するだけであれば
大き過ぎる数字を入力しても問題はありません。
が、正しい数字を入れるに越したことはないでしょう。
5-2．セル同士を結合したい(縦編)
<table border="1" width="300">
<tr><td width="80">1月1日</td><td>正月</td><td>たてにつなぐ</td></tr>
<tr><td>2月2日</td><td>節分</td></tr>
<tr><td>3月3日</td><td>ひな祭り</td></tr>
<tr><td colspan="2">4月4日は何もない</td></tr></table>
5-1では横に結合しました。
それなら当然今度は縦に結合したいでしょう！
と言うわけで今度は「たてにつなぐ」を縦に結合します。
縦同士のセルを結合する記述は「rowspan="〇"」です。
今回は1月から4月まで4つのセルを結合するので「rowspan="4"」と記述します。
これを何処に入力するかというと、やはり<td>です。
縦に繋ぐから<tr>ということはまったくありません。
<table border="1" width="300">
<tr><td width="80">1月1日</td><td>正月</td><td rowspan="4">たてにつなぐ</td></tr>
<tr><td>2月2日</td><td>節分</td></tr>
<tr><td>3月3日</td><td>ひな祭り</td></tr>
<tr><td colspan="2">4月4日は何もない</td></tr></table>
これを表示すると
こうなります。
ここで今回は力尽きた。
