カラフルな表・応用編 ( ホームページ ) - ～セピア色のアニメ館～

ずいぶん前になりますが、カラフルな表の作り方という記事を書きましたが、
今回は、その応用方法を書きたいと思います。

以前の記事を理解されているものとして、話を進めます。
ちなみに、表組みで画像を配置する方法と、似ていますので、こちらにも目を通して下さい。

前回ご紹介したカラフルな表に関しては、表の横幅を指定することが出来ませんでした。
今回は、表の横幅を指定する方法です。

表の幅を指定してみました。
左から、５０・６０・７０・８０です。（単位はピクセル）


あ	い	う	え

１	２	３	４

||<#ffffff' ``||
||<#FFC1C1' width=50' ``あ
||<#FFF68F' width=60' ``い
||<#54FF9F' width=70' ``う
||<#B9D3EE' width=80' ``え
||<#ffffff' ``||
||<#FFF5EE' ``１
||<#FFFFE0' ``２
||<#C1FFC1' ``３
||<#D1EEEE' ``４
||<#ffffff' ``||

上記のように、１段目のみ、幅を指定すれば、２段目以降は、勝手に上の段にあわせてくれます。
これなら、そんなに手間じゃないですよね。
ちなみに、以前お話しましたが、
ヤフーの記事の表示できる幅は、５６０ピクセルなので、
合計が５６０以下になるように設定しましょう。
５６０にぴったりあわすと、綺麗かもしれません。
やってみました。


あ	い	う	え

１	２	３	４

このように、ぴったりおさまります。
ちなみに、左から、１００、１００、１６０、２００です。（合計５６０）

||<#ffffff' ``||
||<#FFC1C1' width=100' ``あ
||<#FFF68F' width=100' ``い
||<#54FF9F' width=160' ``う
||<#B9D3EE' width=200' ``え
||<#ffffff' ``||
||<#FFF5EE' ``１
||<#FFFFE0' ``２
||<#C1FFC1' ``３
||<#D1EEEE' ``４
||<#ffffff' ``||

ただ、この方法だと、表の中の文字が、左よりになってしまうんですよね。

表の文字を中央寄せにしたい場合は、左端の「｜」の数を二つから四つに増やすと良いようです。
（理由は聞かないでください。なるものはなるんです！）


あ	い	う	え

このように	文字は	センタリングに	なります

||<#ffffff' ``||
||||<#FFC1C1' width=100' ``あ
||||<#FFF68F' width=100' ``い
||||<#54FF9F' width=100' ``う
||||<#B9D3EE' width=100' ``え
||||<#ffffff' ``||
||||<#FFF5EE' ``このように
||||<#FFFFE0' ``文字は
||||<#C1FFC1' ``センタリングに
||||<#D1EEEE' ``なります
||||<#ffffff' ``||

次は、この表の中に、画像を入れてみます。
次の記事へＧＯ！