WordPressでテーブルタグを使うと罫線が表示されないから不便だという話を耳にしましたので、それについて触れてみたいと思います。
ちょうど先ほどVPSの比較用にExcelで表を作ってそのままWordPressに貼り付けたTABLEタグがあります。私が使ってるWordPressテーマでの定義では下の様な表になりました。私はこれで別に不満はありません。
| プロバイダ | CPU | メモリ | ディスク容量 | 初期費用 | 月額料金 | 年契約の月額料金 |
| WEBKEEPERS スタンダード | 保障1コア×13% | 1GB | 80GB | 0 | 980 | 780 |
| FC2 VPS スタンダード | 保障1コア×13% | 1GB | 20GB | 0 | 980 | 780 |
| さくらVPS | 仮想2コア | 1GB | 100GB | 0 | 980 | 980 |
| GMOクラウドVPS | 仮想3コア | 2GB | 100GB | 0 | 980 | 980 |
実際にExcelからコピってきた表のHTMLソースコードは下記の様になります。相変わらずTABLEタグはウザいですね。TABLEタグって読みづらくて非人間的な構造だと私は思うので、無くなればイイのにと思います。
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<table width="731" border="0" cellspacing="0" cellpadding="0"><colgroup> <col width="222" /> <col span="5" width="72" /> <col width="149" /> </colgroup> <tbody> <tr> <td width="222" height="18">プロバイダ</td> <td width="72">CPU</td> <td width="72">メモリ</td> <td width="72">ディスク容量</td> <td width="72">初期費用</td> <td width="72">月額料金</td> <td width="149">年契約の月額料金</td> </tr> <tr> <td width="222" height="36"><a href="http://jp.webk.net/service/vps_windows.html" target="_blank">WEBKEEPERS スタンダード</a></td> <td width="72">保障1コア×13%</td> <td width="72">1GB</td> <td width="72">80GB</td> <td align="right" width="72">0</td> <td align="right" width="72">980</td> <td align="right" width="149">780</td> </tr> <tr> <td height="36"><a href="http://fc2-vps.com/">FC2 VPS スタンダード</a></td> <td width="72">保障1コア×13%</td> <td width="72">1GB</td> <td width="72">20GB</td> <td align="right" width="72">0</td> <td align="right" width="72">980</td> <td align="right" width="149">780</td> </tr> <tr> <td height="18"><a href="http://vps.sakura.ad.jp/">さくらVPS</a></td> <td>仮想2コア</td> <td>1GB</td> <td>100GB</td> <td align="right">0</td> <td align="right">980</td> <td align="right">980</td> </tr> <tr> <td height="18"><a href="http://vps.gmocloud.com/">GMOクラウドVPS</a></td> <td>仮想3コア</td> <td>2GB</td> <td>100GB</td> <td align="right">0</td> <td align="right">980</td> <td align="right">980</td> </tr> </tbody> </table> |
このままでは、WordPressテーマで定義されたCSSの記述にしたがっているので確かに罫線が表示されなかったりしてしまいます。気に入らないテーブル定義を編集する方法としては、TABLEタグそのものにSTYLE書式をインラインで記述してしまうか、利用が多いのであればテーマCSSに新しくクラスで独自のTABLE書式を定義してしまうのが効率的でしょう。
私は表にさほど思い入れというか拘りは持っていないのですが（意味が通じれば良いと思っている）、ハッキリ言ってTABLEタグは大嫌いなので、とっととCSSに定義してしまう方が好きです。ただでさえ読みづらいTABLEタグにSTYLE記述をツラツラ追加するのは面倒くさいしナンセンスだと思っています。インライン記述は最小限にしたい派ですね。
という訳でWordPressのCSSファイルに3つの定義を追記しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* for Original Table ----------------------------------------------- */ table.sasaki{ border: 1px #E3E3E3 solid; border-spacing: 0; } table.sasaki th { width: 80px; padding: 5px; border: #E3E3E3 solid; border-width: 0 0 1px 1px; background: #EFEFEF; line-height: 120%; text-align: center; } table.sasaki td { padding: 5px; border: 1px #E3E3E3 solid; border-width: 0 0 1px 1px; text-align: right; } |
どうせなのでExcelからコピペしたTABLEタグも一部修正しました。その為にCSSでthを定義しています。
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<table class="sasaki" width="731" border="1" cellspacing="0" cellpadding="0"><colgroup> <col width="222" /> <col span="5" width="72" /> <col width="149" /> </colgroup> <tbody> <tr> <th width="222" height="18">プロバイダ</th> <th width="72">CPU</th> <th width="72">メモリ</th> <th width="72">ディスク容量</th> <th width="72">初期費用</th> <th width="72">月額料金</th> <th width="149">年契約の月額料金</th> </tr> <tr> <td style="text-align: left;" width="222"><a href="http://jp.webk.net/service/vps_windows.html" target="_blank">WEBKEEPERS スタンダード</a></td> <td width="72">保障1コア×13%</td> <td width="72">1GB</td> <td width="72">80GB</td> <td align="right" width="72">0</td> <td align="right" width="72">980</td> <td align="right" width="149">780</td> </tr> <tr> <td style="text-align: left;" height="36"><a href="http://fc2-vps.com/">FC2 VPS スタンダード</a></td> <td width="72">保障1コア×13%</td> <td width="72">1GB</td> <td width="72">20GB</td> <td align="right" width="72">0</td> <td align="right" width="72">980</td> <td align="right" width="149">780</td> </tr> <tr> <td style="text-align: left;" height="18"><a href="http://vps.sakura.ad.jp/">さくらVPS</a></td> <td>仮想2コア</td> <td>1GB</td> <td>100GB</td> <td align="right">0</td> <td align="right">980</td> <td align="right">980</td> </tr> <tr> <td style="text-align: left;" height="18"><a href="http://vps.gmocloud.com/">GMOクラウドVPS</a></td> <td>仮想3コア</td> <td>2GB</td> <td>100GB</td> <td align="right">0</td> <td align="right">980</td> <td align="right">980</td> </tr> </tbody> </table> |
| プロバイダ | CPU | メモリ | ディスク容量 | 初期費用 | 月額料金 | 年契約の月額料金 |
|---|---|---|---|---|---|---|
| WEBKEEPERS スタンダード | 保障1コア×13% | 1GB | 80GB | 0 | 980 | 780 |
| FC2 VPS スタンダード | 保障1コア×13% | 1GB | 20GB | 0 | 980 | 780 |
| さくらVPS | 仮想2コア | 1GB | 100GB | 0 | 980 | 980 |
| GMOクラウドVPS | 仮想3コア | 2GB | 100GB | 0 | 980 | 980 |
変更点は、TABLEのclassを”sasaki”として自分で定義したCSSを適用させる様にました。ついでに見出し部分をtdタグからthタグに変更した点ですね。thには背景色をCSSでグレーにし、文字を小さめに定義してしています。
tdタグの文字揃えはCSS側で右揃えにしたので、見出し列（プロバイダ名）だけはTABLEタグ内にインラインで、左揃えにしています。インラインの方が優先順位が上なのでCSSを無視させられます。此れ位の修正ならちょっとTABLEタグを読める人なら容易でしょう。TABLEタグ大嫌いな超めんどくさがりの私でも出来る位です。
| プロバイダ | CPU | メモリ | ディスク容量 | 初期費用 | 月額料金 | 年契約の月額料金 |
| WEBKEEPERS スタンダード | 保障1コア×13% | 1GB | 80GB | 0 | 980 | 780 |
| FC2 VPS スタンダード | 保障1コア×13% | 1GB | 20GB | 0 | 980 | 780 |
| さくらVPS | 仮想2コア | 1GB | 100GB | 0 | 980 | 980 |
| GMOクラウドVPS | 仮想3コア | 2GB | 100GB | 0 | 980 | 980 |
罫線ありなし、どちらの表がお好みですか？私としてはどっちゃでもええわってのが本音です（ｗ もちろん手をかければもっと自由に調整はできますが、たかが表にそこまで手を加えないといけないものかな？って思っています。意図が伝われば十分だというのが私の価値観だからです。（もちろん読み手に伝わらないのは言うまでもなくダメですよ・・）
ま、とにかくTABLEタグはウザいってことですが、CSSとの関連性を理解していればWordPress上でも表をコントロールできるって事をお伝えしたかったのでサンプルを書いてみた次第です。ツールで生成したTABLEソースをWordPressにそのままペーストしたらTABLEが上手く表示されないのは別にWordPressのせいじゃないってことです。CSSとHTML内にインライン記述する場合の優先順位を理解した上で使いこなしたいですね。
私は基本的にはCSSで定義して、例外的な書式はインラインで定義する手法が、特にTABLEタグを使う時には便利な概念だなって思っています。しつこい様ですが、自分のサイトで表を表示させる場合は見た目はさほど気にしません（ｗ