表の作成 [ちょっと便利なhtml記述]

表は,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<sup>j</sup> \ 3<sup>i</sup></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>
nice!(6)  コメント(0)  トラックバック(0) 
共通テーマ:PLAYLOG

nice! 6

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。