表の作成

表は，htmlで記述するウェブページの作成には入門編ですが，ブログページでは余り使いません。

私のメインページでは，けっこう表を作成することが多いのですが，単に文字を並べても，アタマが揃わなかったりキタナイものになりがちです。

そこで，htmlで一旦気に入ったひな形を作成しておけば，以後はそのサイズやカラム数を変更するだけで流用できますので，結構便利です。

以下が，いままで私が利用したもののひな形です。

露光時間の目安の表

デジカメの撮影データ		ピンホールカメラの露光量
Fナンバー	シャッター時間	Fナンバー	シャッター時間
F4.0	1/15	F200	約4分
F4.0	1/60	F200	約1分
F8.0	1/60	F200	約15秒
F8.0	1/250	F200	約4秒
F16	1/250	F200	約1秒

上の表のソースコードは，以下の通りです。 <table width="420" border="0" cellspacing="0" cellpadding="2" style="border:1px #999999 solid; border-collapse:collapse;"> <!-- 表の属性指定。 border="0"で枠線なし，"1"で有り。cellspacing="" は影響無し，cellpadding=""は内側（上側）の余白。collapseはセルをくっつけて表示--> <caption><font color="#ff6600"><strong>露光時間の目安の表</strong></font></caption> <tr> <td colspan="2" align="center" bgcolor="#bbbbbb">デジカメの撮影データ</td> <td colspan="2" align="center" bgcolor="#cccccc">ピンホールカメラの露光量</td> </tr> <td align="center" bgcolor="#bbbbbb">Fナンバー</td> <td align="center" bgcolor="#bbbbbb">シャッター時間</td> <td align="center" bgcolor="#cccccc">Fナンバー</td> <td align="center" bgcolor="#cccccc">シャッター時間</td> </tr> <tr> <td align="center" bgcolor="#f2f2f2" >F4.0<br /></td> <td align="center" bgcolor="#f2f2f2" >1/15</td> <td align="center">F200</td> <td align="center">約4分</td> </tr> <tr> <td align="center" bgcolor="#f2f2f2" >F4.0<br /></td> <td align="center" bgcolor="#f2f2f2" >1/60</td> <td align="center">F200</td> <td align="center">約1分</td> </tr> <tr> <td align="center" bgcolor="#f2f2f2">F8.0<br /></td> <td align="center" bgcolor="#f2f2f2" >1/60</td> <td align="center">F200</td> <td align="center">約15秒</td> </tr> <tr> <td align="center" bgcolor="#f2f2f2" >F8.0<br /></td> <td align="center" bgcolor="#f2f2f2" >1/250</td> <td align="center">F200</td> <td align="center">約4秒</td> </tr> <tr> <td align="center" bgcolor="#f2f2f2">F16<br /></td> <td align="center" bgcolor="#f2f2f2" >1/250</td> <td align="center">F200</td> <td align="center">約1秒</td> </tr> </table>

もう一つ示しておきます。

5j ＼ 3i	1/27	1/9	1/3	1	3	9	27
25	50/27	25/18	25/24	25/16	75/64	225/128	675/512
5	40/27	10/9	5/3	5/4	15/8	45/32	135//128
1	32/27	16/9	4/3	1	3/2	9/8	27/16
1/5	256/135	64/45	16/15	8/5	6/5	9/5	27/20
1/25	1024/675	256/225	128/75	32/25	48/25	36/25	27/25

上の表のソースコードは，以下の通りです。 <table cellspacing=1 cellpadding=4 border=0> <tr bgcolor=#bbbbbb> <td width="60" bgcolor=#999999><div align="center">5^j ＼ 3ⁱ</div></td> <td width="60"><div align="center">1/27</div></td> <td width="60"><div align="center">1/9</div></td> <td width="60"><div align="center">1/3</div></td> <td width="60"><div align="center">1</div></td> <td width="60"><div align="center">3</div></td> <td width="60"><div align="center">9</div></td> <td width="60"><div align="center">27</div></td> </tr> <tr bgcolor=#f2f2f2> <td width="60" bgcolor=#cccccc><div align="center">25</div></td> <td width="60"><div align="center">50/27</div></td> <td width="60"><div align="center">25/18</div></td> <td width="60"><div align="center">25/24</div></td> <td width="60"><div align="center">25/16</div></td> <td width="60"><div align="center">75/64</div></td> <td width="60"><div align="center">225/128</div></td> <td width="60"><div align="center">675/512</div></td> </tr> <tr bgcolor=#f2f2f2> <td width="60" bgcolor=#cccccc><div align="center">5</div></td> <td width="60"><div align="center">40/27</div></td> <td width="60"><div align="center">10/9</div></td> <td width="60"><div align="center">5/3</div></td> <td width="60"><div align="center">5/4</div></td> <td width="60"><div align="center">15/8</div></td> <td width="60"><div align="center">45/32</div></td> <td width="60"><div align="center">135//128</div></td> </tr> <tr bgcolor=#f2f2f2> <td width="60" bgcolor=#cccccc><div align="center">1</div></td> <td width="60"><div align="center">32/27</div></td> <td width="60"><div align="center">16/9</div></td> <td width="60"><div align="center">4/3</div></td> <td width="60"><div align="center">1</div></td> <td width="60"><div align="center">3/2</div></td> <td width="60"><div align="center">9/8</div></td> <td width="60"><div align="center">27/16</div></td> </tr> <tr bgcolor=#f2f2f2> <td width="60" bgcolor=#cccccc><div align="center">1/5</div></td> <td width="60"><div align="center">256/135</div></td> <td width="60"><div align="center">64/45</div></td> <td width="60"><div align="center">16/15</div></td> <td width="60"><div align="center">8/5</div></td> <td width="60"><div align="center">6/5</div></td> <td width="60"><div align="center">9/5</div></td> <td width="60"><div align="center">27/20</div></td> </tr> <tr bgcolor=#f2f2f2> <td width="60" bgcolor=#cccccc><div align="center">1/25</div></td> <td width="60"><div align="center">1024/675</div></td> <td width="60"><div align="center">256/225</div></td> <td width="60"><div align="center">128/75</div></td> <td width="60"><div align="center">32/25</div></td> <td width="60"><div align="center">48/25</div></td> <td width="60"><div align="center">36/25</div></td> <td width="60"><div align="center">27/25</div></td> </tr> </table>