戻る
テーブル要素練習問題
セルが１つのテーブル（表）を作る
テーブル（表）を作成するには主に下記のタグを使います。
- <table>～</table>で１つのテーブルを作ります。（テーブル全体）
- <tr>～</tr>が１つの行になります<table>～</table>の内側に書きます、
- <td>～</td>はテーブルデータ「実際に表示される部分」になります。<tr>～</tr>の内側に書きます。 （テーブルの１マス「セル」になります）
- <border="○○○">（枠線の太さを指定します、border="0"にすると枠線は消えます。） 数字を大きくすると枠線が太くなります。
- <caption>（テーブルの見出しを書きます）
エディターで次のように書いてみましょう。
<html> <head> <title>テーブルを作る</title> </head> <body> <table border="1"> <tr><td>いぬ</td></tr> </table> </body> </html>
これをブラウザで見ると次のようになります
| いぬ |
列を増やしてみる
１行３列にしてみます 注、ここからhtml～body、とbody～htmlを省略していますので実際に書く場合は１番目のように html～body、body～htmlも書いてください。 <tr>～</tr>の内側に<td>～</td>を３つに増やしました、この様に<tr>～</tr> の内側に<td>～</td>を好きな数だけ作ればその数だけ列を増やす事が出来ます。
エディターで次のように書いてみましょう。
<table border="1"> <tr><td>いぬ</td><td>ねこ</td><td>さる</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
行を増やしてみる
エディターで次のように書いてみましょう。
<table border="1"> <tr><td>いぬ</td><td>ねこ</td><td>さる</td></tr> <tr><td>るびい</td><td>いわし</td><td>ししまい</td></tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | ししまい |
| いか | かき | きりん |
３行３列にしました、ちょっとだけ表（テーブル）らしくなりましたね <tr>～</tr>を３行書きました、これで３行になりました。<td>～</td>は改行されませんでしたが <tr>～</tr>では改行されます。 <tr>～</tr>が1行になります。
テーブル全体の幅をパーセントで指定してみる
エディターで次のように書いてみましょう。
<table border="1" width="80%"> <tr><td>いぬ</td><td>ねこ</td><td>さる</td></tr> <tr><td>るびい</td><td>いわし</td><td>ししまい</td></tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | ししまい |
| いか | かき | きりん |
横幅を全体の８０％にしてみました。（やっとテーブルらしくなってきましたね、もう少しです。） テーブルの幅の指定は今回のようにパーセントで指定する方法とピクセルで指定する方法があります。 パーセントで指定した場合はどのパソコンでも同じ割合で表示されます （但し同じ割合で全体の幅が表示されると言う事はセル内の文字はパソコンの画面が小さい場合は予想しない所で改行される事もあります。）
テーブル全体の幅をピクセルで指定してみる
エディターで次のように書いてみましょう。
<table border="1" width="600"> <tr><td>いぬ</td><td>ねこ</td><td>さる</td></tr> <tr><td>るびい</td><td>いわし</td><td>ししまい</td></tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | ししまい |
| いか | かき | きりん |
横幅を６００ピクセルに指定しました。 ピクセルで指定した場合は幅が固定されるので、 あまり幅を広く設定するとパソコンの画面が小さい場合は横にスクロールしないといけなくなる場合があります。 横スクロールは非常にやりにくいのでピクセルで指定する場合は気をつけましょう。
テーブルをセンタリングしてみよう
センタリングと同時に1箇所だけセル内の文字数を増やして見ましょう
エディターで次のように書いてみましょう。
<div align="center"> <table border="1" width="600" > <tr><td>いぬ</td><td>ねこ</td><td>さる</td></tr> <tr><td>るびい</td><td>いわし</td><td> 獅子舞ししまい</td></tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table> </div>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | 獅子舞ししまい |
| いか | かき | きりん |
セルの幅を指定してみましょう。
６番のように文字の長さを変えると夫々のセルの幅が変わりましたね、これでは困る場合がありますので、 文字の長さに影響されないようにそれぞれのセルの幅を指定してみましょう。 1番目のセルと2番目のセルの幅を設定すると3番目は残りの幅と言う事になります。（1行目だけを指定すればいいようです。） 指定方法はパーセントでもピクセルでもかまいません。
エディターで次のように書いてみましょう。
<div align="center"> <table border="1" width="600"> <tr><td width="33%">いぬ</td><td width="33%" >ねこ</td><td>さる</td></tr> <tr><td>るびい</td><td>いわし</td><td>獅子舞ししまい</td></tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table> </div>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | 獅子舞ししまい |
| いか | かき | きりん |
テーブルに見出しをつけて見ましょう。
テーブルに見出しをつけるにはcaption属性を使います。これはtableタグの直ぐ後に1回だけ書きます。 <caption align="○○○">、○○○はtopやbottomなどを書き込みます、 topは上の中央表示bottomは下の中央表示になります。
th は Table Header の略です。これは見出しではありませんが、 多くのブラウザでは、文字が太字の中央表示で表示されます。<th>～</th>で囲みます。
エディターで次のように書いてみましょう。（金額は適当に書いています）
<table border="1" width="600"> <caption align="top">家計簿サンプル</caption> <tr><th width="25%"><br></th> <th width="25%">１月</th><th width="25%">２月</th> <th>３月</th></tr> <tr><th align="left">食費</th> <td align="right">１００，０００円</td> <td align="right">８０，０００円</td> <td align="right">１０１，０００円</td></tr> <tr><th align="left">教育費</th> <td align="right">５０，０００円</td> <td align="right">５０，０００円</td> <td align="right">６０，０００円</td></tr> <tr><th align="left">水道光熱費</th> <td align="right">２０，０００円</td> <td align="right">２２，０００円</td> <td align="right">１５，０００円</td></tr> </table>
これをブラウザで見ると次のようになります
| １月 | ２月 | ３月 | |
| 食費 | １００，０００円 | ８０，０００円 | １０１，０００円 |
| 教育費 | ５０，０００円 | ５０，０００円 | ６０，０００円 |
| 水道光熱費 | ２０，０００円 | ２２，０００円 | １５，０００円 |
テーブル内の文字のセンタリングや右寄
今までと同じ方法で 、<td align="○○○">という様に書きます。○○○はcenterやrightなどを書き込みます。
エディターで次のように書いてみましょう。
<table border="1" width="600"> <caption>表サンプル</caption> <tr><td width="33%" align="center">いぬ</td><td width="33%" >ねこ</td><td>さる</td></tr> <tr><td>るびい</td><td>いわし</td><td align="right" >獅子舞ししまい</td></tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | 獅子舞ししまい |
| いか | かき | きりん |
文字の周りに余白を作る（セル内の余白）
cellpadding="○○○"、 ○○○は数字（ピクセル）で指定します。
エディターで次のように書いてみましょう。
<table border="1" width="600" cellpadding="10"> <caption>表サンプル</caption> <tr><td width="200" align="center">いぬ</td><td width="200">ねこ</td><td>さる </td></tr> <tr><td>るびい</td><td>いわし</td><td align="right">獅子舞ししまい</td> </tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | 獅子舞ししまい |
| いか | かき | きりん |
セルとセルの隙間
cellspacing="○○○"、 ○○○は数字（ピクセル）で指定します。cellspacing はセル間の余白を設定します。
セル間の隙間をなくす
エディターで次のように書いてみましょう。
<table border="1" width="600"cellpadding="10" cellspacing="0"> <caption>表サンプル</caption> <tr><td width="33%" align="center">いぬ</td><td width="33%">ねこ</td><td>さる </td></tr> <tr><td>るびい</td><td>いわし</td><td align="right">獅子舞ししまい</td> </tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | 獅子舞ししまい |
| いか | かき | きりん |
セル間の隙間を広くする
エディターで次のように書いてみましょう。
<table border="1" width="600"cellpadding="10" cellspacing="20"> <caption>表サンプル</caption> <tr><td width="33%" align="center">いぬ</td><td width="33%">ねこ</td><td>さる </td></tr> <tr><td>るびい</td><td>いわし</td><td align="right">獅子舞ししまい</td> </tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | 獅子舞ししまい |
| いか | かき | きりん |
セル間余白0、セル内余白10、の状態で border="10"にしてみます。
border="○○○"、 ○○○は数字（ピクセル）で指定します。２０でも５０でも好きな数字を入れてみて下さい。
エディターで次のように書いてみましょう。
<table border="10" width="600"cellpadding="10" cellspacing="0"> <caption>表サンプル</caption> <tr><td width="33%" align="center">いぬ</td><td width="33%">ねこ</td><td>さる </td></tr> <tr><td>るびい</td><td>いわし</td><td align="right">獅子舞ししまい</td> </tr> <tr><td>いか</td><td>かき</td><td>きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | 獅子舞ししまい |
| いか | かき | きりん |
テーブルに色をつけて見ましょう。
テーブル全体とセルに別々に色の指定をすることが出来ます。 今回はテーブル全体にgrayを、いぬの部分にyellowを、いわしの部分にoliveを、３行目全体にlimeを指定しました 背景色を濃くすると文字が見えにくくなるのでその時は文字色を背景色とは逆に明るい色にするといいです。 ねこの文字をwhiteにしました
エディターで次のように書いてみましょう。
<table border="1" width="600"cellpadding="10" cellspacing="0" bgcolor="gray"> <caption>表サンプル</caption> <tr><td width="33%" align="center" bgcolor="yellow">いぬ</td> <td width="33%"><font color="red">ねこ</font> </td><td>さる</td></tr> <tr><td>るびい</td><td bgcolor="olive">いわし</td> <td align="right">獅子舞ししまい</td></tr> <tr bgcolor="lime"><td>いか</td><td>かき</td> <td>きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし | 獅子舞ししまい |
| いか | かき | きりん |
セルの左右（列）を結合してみよう
テーブルの２段目の右２つを結合してみます 先ずテーブルの２段目の一番右の<td align="right">獅子舞ししまい</td>の部分を削除します、 次に<td bgcolor="#ff77ff">いわし</td>の部分を <td align="center" colspan="2" bgcolor="#ff77ff">いわし＋獅子舞ししまい</td>に変更して完了です （colspan="○○○"は数を記入します、○○○を３にすると３ヶのセルを結合します。 その場合は<td>～</td>の部分を２箇所削除するのを忘れずに！！）
エディターで次のように書いてみましょう。
<table border="1" width="600"cellpadding="10" cellspacing="0" bgcolor="#c0e0a0"> <caption>表サンプル</caption> <tr><td width="33%" align="center" bgcolor="#ffff00">いぬ</td> <td width="33%">ねこ</td><td>さる</td></tr> <tr><td>るびい</td> <td align="center" colspan="2"bgcolor="#ff77ff">いわし＋獅子舞ししまい</td></tr> <tr><td>いか</td><td>かき</td><td bgcolor="#ffffaa">きりん</td></tr> </table>
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい | いわし＋獅子舞ししまい | |
| いか | かき | きりん |
セルの上下（行）を結合してみよう
テーブルの２段目と３段目の左２つを結合してみます 先ずテーブルの３段目の一番左の<td>いか</td>の部分を削除します、 次に<td>るびい</td>の部分を<td rowspan="2" bgcolor="#ff77ff">るびい＋いか</td>に変更して完了です（rowspan="○○○"は数を記入します、 ○○○を３にすると３ヶのセルを結合します。その場合は<td>～</td>の部分を２箇所削除するのを忘れずに！！）
エディターで次のように書いてみましょう。
<table border="1" width="600"cellpadding="10" cellspacing="0" bgcolor="#c0e0a0"> <caption>表サンプル</caption> <tr><td width="33%" align="center" bgcolor="#ffff00">いぬ</td><td width="33%">ねこ</td> <td>さる</td></tr> <tr><td rowspan="2" bgcolor="#ffffff">るびい＋いか</td> <td align="center" colspan="2" bgcolor="#ff77ff">いわし＋獅子舞ししまい</td></tr> <tr><td>かき</td><td bgcolor="#ffffaa">きりん</td></tr> </table>
これをブラウザで見ると次のようになります。
| いぬ | ねこ | さる |
| るびい＋いか | いわし＋獅子舞ししまい | |
| かき | きりん | |
結合したセル内の文字の位置を上下に動かしてみよう
セル内の文字や画像を上下させるには、valign属性（上下の位置を指定）を使います。 valign属性にはvalign="top（上）"、valign="middle（中央）"、valign="bottom（下）"の３種類を指定できます。
align属性では align="left" 、align="center" 、align="right" ですので間違わないようにしましょう。 特に valign="middle" は valign="center" と書き間違えやすいので気をつけましょう。
エディターで次のように書いてみましょう。
<td rowspan="2" bgcolor="#ffffff">るびい＋いか</td>の部分を <td rowspan="2" valign="top" bgcolor="#ffffff">るびい＋いか</td>に変更してみてください。
これをブラウザで見ると次のようになります
| いぬ | ねこ | さる |
| るびい＋いか | いわし＋獅子舞ししまい | |
| かき | きりん | |
画像を入れて見ましょう。
<td>～</td>の部分に文字と同様に画像を貼り付けます。1つのセルに画像を入れてみました、他のセルの場合も同じ要領です。
エディターで次のように書いてみましょう。
<table border="1" width="600"cellpadding="10" cellspacing="0" bgcolor="#c0e0a0"> <caption>表サンプル</caption> <tr><td width="33%" align="center" bgcolor="#ffff00"><img src="img/inu1.png" width="100" height="71" alt=""></td><td width="33%">ねこ</td><td>さる</td></tr> <tr><td>るびい</td><td bgcolor="#ff77ff">いわし</td><td align="right" >獅子舞ししまい</td></tr> <tr><td>いか</td><td>かき</td><td bgcolor="#ffffaa">きりん</td></tr> </table>
これをブラウザで見ると次のようになります
 |
ねこ | さる |
| るびい | いわし | 獅子舞ししまい |
| いか | かき | きりん |
summary属性を使う。
summary属性は、音声ブラウザなどのために、この表の目的や構成の説明を書きます。 Ｗ３Ｃ(World Wide Web Consotium)のＷＡＩ(Web Accessibility Initiative)という所で書くように推奨されているそうです。 summaryを辞書で引くと、概要，要約と書かれています。captionは書かなくてもsummaryは書く様にしましょう。
エディターで次のように書いてみましょう。
<table summary="家計簿サンプル、行に食費等の各項目を、列には各月（１月から３月）を書いています。" width="600" border="1"> <caption>家計簿サンプル</caption> <tr><th width="25%"><br></th> <th width="25%">１月</th><th width="25%">２月</th><th>３月</th></tr> <tr><th align="left">食費</th><td align="right">１００，０００円</td> <td align="right">８０，０００円</td><td align="right">１０１，０００円</td></tr> <tr><th align="left">教育費</th><td align="right">５０，０００円</td> <td align="right">５０，０００円</td><td align="right">６０，０００円</td></tr> <tr><th align="left">水道光熱費</th><td align="right">２０，０００円</td> <td align="right">２２，０００円</td><td align="right">１５，０００円</td></tr> </table>
これをブラウザで見ると次のようになります
| １月 | ２月 | ３月 | |
| 食費 | １００，０００円 | ８０，０００円 | １０１，０００円 |
| 教育費 | ５０，０００円 | ５０，０００円 | ６０，０００円 |
| 水道光熱費 | ２０，０００円 | ２２，０００円 | １５，０００円 |
練習問題
問題１
下の様にブラウザで表示されるようにＨＴＭＬ文書を作成してください。
ワンちゃん達
| 犬１の画像 | 犬２の画像 | 犬３の画像 |
|
 |
 |
| okok | ||
| okok | okok | |
問題１の答え
<html> <head> <title>練習問題１の答え</title> </head> <body> <div align="center"> <table border="1" width="600" summary="ワンちゃん達の写真です" cellspacing="0" cellpadding="15"> <caption align="top"><font color="red"><strong>ワンちゃん達</strong></font></caption> <tr> <td width="33%">犬１の画像</td> <td width="33%">犬２の画像</td><td>犬３の画像</td> </tr> <tr> <td><img src="img/inu1.png" width="100" height="75" alt="犬１の画像"></td> <td align="center"><img src="img/inu2.png" width="100" height="75" alt="犬２の画像"></td> <td align="right" rowspan="3" valign="bottom" bgcolor="#ddffff"><img src="img/inu3.png" width="100" height="75" alt="犬３の画像"></td> </tr> <tr> <td colspan="2" align="center">okok</td> </tr> <tr> <td>okok</td> <td>okok</td> </tr> </table> </div> </body> </html>
問題２（カレンダーを作る）
下の様にブラウザで表示されるようにＨＴＭＬ文書を作成してください。カレンダーを作れるようになると、自分だけの日記などにも応用できます。
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
問題２（カレンダーを作る）の答え
<html> <head> <title>練習問題２（カレンダーを作る）の答え</title> </head> <body> <div align="center"> <table summary="カレンダー" border="1" cellspacing="0" cellpadding="5"> <caption><font size="2">カレンダーサンプル</font></caption> <tr> <td><font color="red">日</font></td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> <td><font color="blue">土</font></td> </tr> <tr> <td align="right"><font color="red"><br></font></td> <td align="right">1</td> <td align="right">2</td> <td align="right">3</td> <td align="right">4</td> <td align="right">5</td> <td align="right"><font color="blue">6</font></td> </tr> <tr> <td align="right"><font color="red">7</font></td> <td align="right">8</td> <td align="right">9</td> <td>10</td> <td>11</td> <td>12</td> <td><font color="blue">13</font></td> </tr> <tr> <td><font color="red">14</font></td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td><font color="blue">20</font></td> </tr> <tr> <td><font color="red">21</font></td> <td>22</td> <td><font color="red">23</font></td> <td>24</td> <td>25</td> <td>26</td> <td><font color="blue">27</font></td> </tr> <tr> <td><font color="red">28</font></td> <td>29</td> <td>30</td> <td>31</td> <td><br></td> <td><br></td> <td><font color="blue"><br></font></td> </tr> </table> </div> </body> </html>
半年分のカレンダーを作る
テーブルの中に複数のテーブルを入れる（入れ子にする）ことで３列２段のカレンダーを作る事が出来ます。 基本的に下のような構造になります
| <table> | ←６個のカレンダーの大枠になります。 |
| <tr> | ←上段３個のカレンダーの大枠になります。 |
| ↓ここからが上段３個のカレンダーです。 | |
| <td><table>～</table></td> | ←<table>～</table>の部分が１ヶ月分のカレンダーになります。 |
| <td><table>～</table></td> | ←<table>～</table>の部分が１ヶ月分のカレンダーになります。 |
| <td><table>～</table></td> | ←<table>～</table>の部分が１ヶ月分のカレンダーになります。 |
| ↑ここまでが上段３個のカレンダーです。 | |
| </tr> | ←上段３個のカレンダーの大枠になります。 |
| <tr> | ←下段３個のカレンダーの大枠になります。 |
| ↓ここからが下段３個のカレンダーです。 | |
| <td><table>～</table></td> | ←<table>～</table>の部分が１ヶ月分のカレンダーになります。 |
| <td><table>～</table></td> | ←<table>～</table>の部分が１ヶ月分のカレンダーになります。 |
| <td><table>～</table></td> | ←<table>～</table>の部分が１ヶ月分のカレンダーになります。 |
| ↑ここまでが下段３個のカレンダーです。 | |
| </tr> | ←下段３個のカレンダーの大枠になります。 |
| </table> | ←６個のカレンダーの大枠になります。 |
|
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
<div align="center"> <table summary="カレンダーサンプル" border="1" cellpadding="15" cellspacing="0"> <!--１段目--> <tr> <td valign="top"> <table summary="日曜日から始まるカレンダー" border="1" cellspacing="0" cellpadding="5"> <caption><small>日曜日～</small></caption> <tr> <td><font color="red">日</font></td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> <td><font color="blue">土</font></td> </tr> <tr> <td align="right"><font color="red">1</font></td> <td align="right">2</td> <td align="right">3</td> <td align="right">4</td> <td align="right">5</td> <td align="right">6</td> <td align="right"><font color="blue">7</font></td> </tr> <tr> <td align="right"><font color="red">8</font></td> <td align="right">9</td> <td align="right">10</td> <td align="right">11</td> <td>12</td> <td>13</td> <td><font color="blue">14</font></td> </tr> <tr> <td><font color="red">15</font></td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td><font color="blue">21</font></td> </tr> <tr> <td><font color="red">22</font></td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td><font color="blue">28</font></td> </tr> <tr> <td><font color="red">29</font></td> <td>30</td> <td>31</td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </td> <td valign="top"> <table summary="月曜日から始まるカレンダー" border="1" cellspacing="0" cellpadding="5"> <caption><small>月曜日～</small></caption> <tr> <td><font color="red">日</font></td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> <td><font color="blue">土</font></td> </tr> <tr> <td></td> <td align="right">1</td> <td align="right">2</td> <td align="right">3</td> <td align="right">4</td> <td align="right">5</td> <td align="right"><font color="blue">6</font></td> </tr> <tr> <td align="right"><font color="red">7</font></td> <td align="right">8</td> <td align="right">9</td> <td>10</td> <td>11</td> <td>12</td> <td><font color="blue">13</font></td> </tr> <tr> <td><font color="red">14</font></td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td><font color="blue">20</font></td> </tr> <tr> <td><font color="red">21</font></td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td><font color="blue">27</font></td> </tr> <tr> <td><font color="red">28</font></td> <td>29</td> <td>30</td> <td>31</td> <td></td> <td></td> <td></td> </tr> </table> </td> <td valign="top"> <table summary="火曜日から始まるカレンダー" border="1" cellspacing="0" cellpadding="5"> <caption><small>火曜日～</small></caption> <tr> <td><font color="red">日</font></td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> <td><font color="blue">土</font></td> </tr> <tr> <td></td> <td></td> <td align="right">1</td> <td align="right">2</td> <td align="right">3</td> <td align="right">4</td> <td align="right"><font color="blue">5</font></td> </tr> <tr> <td align="right"><font color="red">6</font></td> <td align="right">7</td> <td align="right">8</td> <td align="right">9</td> <td>10</td> <td>11</td> <td><font color="blue">12</font></td> </tr> <tr> <td><font color="red">13</font></td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td><font color="blue">19</font></td> </tr> <tr> <td><font color="red">20</font></td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td><font color="blue">26</font></td> </tr> <tr> <td><font color="red">27</font></td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td></td> <td></td> </tr> </table> </td> </tr> <!--２段目--> <tr> <td valign="top"> <table summary="水曜日から始まるカレンダー" border="1" cellspacing="0" cellpadding="5"> <caption><small>水曜日～</small></caption> <tr> <td><font color="red">日</font></td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> <td><font color="blue">土</font></td> </tr> <tr> <td></td> <td></td> <td></td> <td align="right">1</td> <td align="right">2</td> <td align="right">3</td> <td align="right"><font color="blue">4</font></td> </tr> <tr> <td align="right"><font color="red">5</font></td> <td align="right">6</td> <td align="right">7</td> <td align="right">8</td> <td align="right">9</td> <td>10</td> <td><font color="blue">11</font></td> </tr> <tr> <td><font color="red">12</font></td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td><font color="blue">18</font></td> </tr> <tr> <td><font color="red">19</font></td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td><font color="blue">25</font></td> </tr> <tr> <td><font color="red">26</font></td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td></td> </tr> </table> </td> <td valign="top"> <table summary="木曜日から始まるカレンダー" border="1" cellspacing="0" cellpadding="5"> <caption><small>木曜日～</small></caption> <tr> <td><font color="red">日</font></td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> <td><font color="blue">土</font></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td align="right">1</td> <td align="right">2</td> <td align="right"><font color="blue">3</font></td> </tr> <tr> <td align="right"><font color="red">4</font></td> <td align="right">5</td> <td align="right">6</td> <td align="right">7</td> <td align="right">8</td> <td align="right">9</td> <td><font color="blue">10</font></td> </tr> <tr> <td><font color="red">11</font></td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td><font color="blue">17</font></td> </tr> <tr> <td><font color="red">18</font></td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td><font color="blue">24</font></td> </tr> <tr> <td><font color="red">25</font></td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td><font color="blue">31</font></td> </tr> </table> </td> <td valign="top"> <table summary="金曜日から始まるカレンダー" border="1" cellspacing="0" cellpadding="5"> <caption><small>金曜日～</small></caption> <tr> <td><font color="red">日</font></td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> <td><font color="blue">土</font></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td align="right">1</td> <td align="right"><font color="blue">2</font></td> </tr> <tr> <td align="right"><font color="red">3</font></td> <td align="right">4</td> <td align="right">5</td> <td align="right">6</td> <td align="right">7</td> <td align="right">8</td> <td align="right"><font color="blue">9</font></td> </tr> <tr> <td><font color="red">10</font></td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td><font color="blue">16</font></td> </tr> <tr> <td><font color="red">17</font></td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td><font color="blue">23</font></td> </tr> <tr> <td><font color="red">24</font></td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td><font color="blue">30</font></td> </tr> <tr> <td><font color="red">31</font></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </td> </tr> </table> </div>