テーブル

 

使用ツール「Style Note」
テーブルの簡単作成ツールがあり、簡単に作るとこうなる。
 

<TABLE> <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>

 


このままでは表示はまったく無く、テーブルごとに語句や定義付けが必要。
当たり前だw
まず枠線を表示する。
そしてテーブルの幅を決める。

<TABLE BORDER="1"> <TR><TD WIDTH="50"> </TD><TD WIDTH="50"> </TD></TR> <TR><TD WIDTH="50"> </TD><TD WIDTH="50"> </TD></TR> <TR><TD WIDTH="50"> </TD><TD WIDTH="50"> </TD></TR> <TR><TD WIDTH="50"> </TD><TD WIDTH="50"> </TD></TR> <TR><TD WIDTH="50"> </TD><TD WIDTH="50"> </TD></TR> </TABLE>

 

   
   
   
   
   


一般的なテーブルはこうなるが、枠線がちょっと邪魔なので枠線を詰めてみる。

<TABLE BORDER="1" CELLSPACING="0">

 

   
   
   
   
   

 


表らしくするため、表題を追加する。

<TABLE BORDER="1" CELLSPACING="0"> <caption>テーブル</caption>

 

 

テーブル
     
     
     
     
     

 


大体、表らしくなってきたので、内容を入れてみる。

<TABLE BORDER="1" CELLSPACING="0"> <caption>テーブル</caption> <TR><TD WIDTH="50">アイテム</TD><TD WIDTH="50"> </TD><TD WIDTH="50"> </TD></TR> <TR><TD WIDTH="50">1</TD><TD WIDTH="50">50</TD><TD WIDTH="50">100</TD></TR> <TR><TD WIDTH="50">2</TD><TD WIDTH="50">20</TD><TD WIDTH="50">150</TD></TR> <TR><TD WIDTH="50">3</TD><TD WIDTH="50">5</TD><TD WIDTH="50">98</TD></TR> <TR><TD WIDTH="50">4</TD><TD WIDTH="50">100</TD><TD WIDTH="50">980</TD></TR> </TABLE>

 

 

 

 

テーブル
アイテム    
50 100
20 150
5 98
100 980

 


仕上げ

<TABLE BORDER="1" CELLSPACING="0"> <caption>テーブル</caption> <TR><TD NOWRAP>アイテム</TD><TD COLSPAN="2" ALIGN="center">数量/単価</TD></TR> <TR><TD WIDTH="50" ALIGN="center">1</TD><TD WIDTH="50" ALIGN="right">50</TD><TD WIDTH="50" ALIGN="right">100</TD></TR> <TR><TD WIDTH="50" ALIGN="center">2</TD><TD WIDTH="50" ALIGN="right">20</TD><TD WIDTH="50" ALIGN="right">150</TD></TR> <TR><TD WIDTH="50" ALIGN="center">3</TD><TD WIDTH="50" ALIGN="right">5</TD><TD WIDTH="50" ALIGN="right">98</TD></TR> <TR><TD WIDTH="50" ALIGN="center">4</TD><TD WIDTH="50" ALIGN="right">100</TD><TD WIDTH="50" ALIGN="right">980</TD></TR> </TABLE>

 

 

 

 

テーブル
アイテム 数量/単価
50 100
20 150
5 98
100 980

 


「Style Note」では、タグ内で半角空白を入力すると、関連するタグの一覧が表示されていくので結構便利に使える。

 

 


ご存じですか?

オンラインのお客様

現在 7 人のゲスト が閲覧中です。

スポンサー

Copyright © 2020 便利工事士A. Powered by Zen Cart / zen-cart.jp