トリッキーコードネット トップへ戻る   C/C++, Java, Perl, PHP, JavaScript, アルゴリズム, ショートコーディング, IOCCCコードの解説, 等々

サイト情報

トリッキーなコード

7行プログラミング

物凄いコード集

アルゴリズム

データ構造

C/C++な話題

コードサンプル

ツール/環境構築

開発ノウハウ 等

ネタ/ジョーク集

おススメ書籍/サイト

サイトTOP >> コードサンプル >> テーブルを綺麗に描画

テーブルを綺麗に書く裏技 (HTML/CSS)

枠ありのテーブルを描画する際、一昔前までは、HTMLで次の様に書いていました。

<table border="1" cellpadding="3">
<tr><th>あああ</th><th>いいいい</th><th>ううう</th></tr>
<tr><td>AAA</td><td>BBB</td><td>CCC</td></tr>

~~ (略) ~~

</table>
(※ 便宜上 <thead>, <tbody>, <tfoot> 等は入れていません。)

つまり<table>タグに border, cellpadding, etc・・・を指定していたわけです^^;)


結果は以下の通り (お使いのブラウザによって、見た目が大きく異なります)

あああいいいいううう
AAABBBCCC
AAABBBCCC
AAABBBCCC
AAABBBCCC
しかしこれだと、 ・ブラウザごとに表示が異なったり、 ・テーブル枠の細かい設定(太さ、色、スタイルを、枠の上下で変えたり等)ができなかったり、 ・何より見た目がちょっと・・・orz といった不都合があります (ノД`)・゜・。 というわけで、スタイルシートを使って綺麗なテーブルに仕上げてみたのがこちら
あああいいいいううう
AAABBBCCC
AAABBBCCC
AAABBBCCC
AAABBBCCC
コードは以下の通りです。 【CSS】 .mytable{ <strong>border-collapse:collapse;</strong> text-align:center; } .mytable th, .mytable td{ <strong>border:1px solid #000;</strong> padding:3px 10px; text-align:center; } .mytable tr.paint{ <strong>background-color:#80ffff;</strong> } 【HTML】 <table class="mytable"> <tr><th>あああ</th><th>いいいい</th><th>ううう</th></tr> <tr class="paint"><td>AAA</td><td>BBB</td><td>CCC</td></tr> <tr><td>AAA</td><td>BBB</td><td>CCC</td></tr> <tr class="paint"><td>AAA</td><td>BBB</td><td>CCC</td></tr> <tr><td>AAA</td><td>BBB</td><td>CCC</td></tr> </table> <th>, <td>タグにborderスタイルを設定します。 しかしそれだけだと、重なっている部分が太く見苦しくなってしまう為、 <table>タグに border-collapse:collapse スタイルを設定します。 そして、テーブルの見易さを向上させる為、 1行おきに<tr>タグのbackground-colorスタイルを設定します^^;) (この処理は、スクリプト言語でループを使って処理すれば簡単ですね♪) そして、これをさらに改造すると、↓の様なテーブルも描画することができます。
商品名個数値段
商品A110200
商品A23250
商品A37350
合計(A)20800
商品B110200
商品B23250
商品B37350
合計(B)20800
総合計401,600
商品項目行は、枠線 - 灰色 / 真ん中揃え 合計行は、 枠線 - 黒色 / 右揃え    となっています。 コードは以下の通りです。 【CSS】 .mytable2{ border-collapse:collapse; text-align:center; } .mytable2 thead th{ border:1px solid #000; } .mytable2 tbody th{ border:1px solid #000; font-weight:normal; padding-right:3px; text-align:right; } .mytable2 tbody td{ border-top:1px solid #CCC; border-left:1px solid #000; border-right:1px solid #000; border-bottom-style: none; padding:3px 20px; text-align:center; } .mytable2 tbody tr.paint{ background-color:#80ffff; } 【HTML】 <table class="mytable2" style="margin:5px;"> <thead> <tr><th>商品名</th><th>個数</th><th>値段</th></tr> </thead> <tbody> <tr class="paint"><td>商品A1</td><td>10</td><td>200</td></tr> <tr><td>商品A2</td><td>3</td><td>250</td></tr> <tr class="paint"><td>商品A3</td><td>7</td><td>350</td></tr> <tr><th>合計(A)</th><th>20</th><th>800</th></tr> <tr class="paint"><td>商品B1</td><td>10</td><td>200</td></tr> <tr><td>商品B2</td><td>3</td><td>250</td></tr> <tr class="paint"><td>商品B3</td><td>7</td><td>350</td></tr> <tr><th>合計(B)</th><th>20</th><th>800</th></tr> <tr><th>総合計</th><th>40</th><th>1,600</th></tr> </tbody> </table> 項目数の多いテーブルを描画する際には、ちょっとだけ便利かもしれません^^;)
         このエントリーをはてなブックマークに追加   


作業効率化・ライフハックのオススメ記事




コンピュータ・テクノロジーのオススメ記事





恋愛・人間関係のオススメ記事




※ 当サイトは、トップページからリンクで辿る事の出来るページに限り、リンクフリーです。
※ 当サイトの閲覧/利用によって生じた如何なる損害も、当サイト管理人は責任を負いません。
※ 当サイトの内容を転載される場合は、当サイトへのリンクをお願い致します。