今回は、次世代型サイト作成システム「SIRIUS」で作成しているサイトの表に、テーブル幅を指定して、記事の中央にもっていくカスタマイズの方法です。
この前、シリウスもバージョンアップされ、Version1.1 ( 1.1.0.4 )になり、テーブル作成時、HTMLエディタを使い枠線の色や太さ、セルの背景色など、色々カスタマイズ出来るようになり、すごく便利になりましね。
そもそも、シリウスVersion1.1 ( 1.1.0.4 )では、テーブル幅が指定出来るはずなのに、SIRIUS側の不具合のようで、次回のバージョンアップまでに修正を行うみたいです。
それまで待てないよ～って方は、以下の方法を試してくださいね。
Sponsored Links
テーブルの横幅を指定して、記事の真ん中にする方法
普通にテーブルを作成して、プレビューして見るとこんな感じですね。
defaultでは記事の幅に合わせて、表のテーブル幅もいっぱいまで広がっていますね。
テキストモードの中のHTMLは、以下のテーブルタグになっています。
|
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 |
<table class="dsc1item" cellspacing="1"> <tbody> <tr> <th>項目名</th> <td>ここに説明文を入力</td> </tr> <tr> <th>項目名</th> <td>ここに説明文を入力</td> </tr> <tr> <th>項目名</th> <td>ここに説明文を入力</td> </tr> <tr> <th>項目名</th> <td>ここに説明文を入力</td> </tr> <tr> <th>項目名</th> <td>ここに説明文を入力</td> </tr> <!-- ★insertRow(<tr><th>項目名</th><td>ここに説明文を入力</td></tr>)★ --> </tbody> </table> |
では早速、カスタマイズしてみましょう。
テーブルの幅を指定する方法
まずは、テーブルの幅を任意の幅にしてみます。
テーブルタグの一番上に記述してある以下のタグがあると思います。
|
1 |
<table class="dsc1item" cellspacing="1"> |
その中に、幅を指定するstyle=”width:300px;”を以下のように追加記述してやります。
|
1 |
<table style="width:300px;" class="dsc1item" cellspacing="1"> |
width:300pxの数値を変更することで、テーブルの幅が指定できます。
上記のように幅を300pxに指定して、プレビュー画面で確認してみます。
表の幅が小さくなりましたね。テーブルの幅を指定しただけなので、左寄せになっていますね。
次は、この表を中央寄せにしてみましょう。
Sponsored Links
テーブルを中央寄せにする方法
テーブルを中央寄せにするには、マージンで指定します。
先ほど、幅を指定するのに追加記述したstyle=”width:300px;の後ろに、以下を追加記述してください。
|
1 |
margin-left:auto; margin-right:auto; |
幅と、中央揃えを追加記述したテーブルタグは以下のようになります。
|
1 |
<table style="width:300px; margin-left:auto; margin-right:auto;" class="dsc1item" cellspacing="1"> |
左右のマージンの値にautoを指定してあるので、左右中央に配置できるんですね。マージンの値にautoを使うときは、幅（width）を指定していなと、autoが無駄になり0になってしまうので、注意が必要です。
以下は、テーブルの幅を300pxにして、左右のマージンをautoにした表示結果です。
テーブルが記事の真ん中にきましたね。
短い文書で空白がいっぱい空いてしまったりして見た目が悪いときなどに、テーブルを中央揃えにすることで、解消されますね。
テーブルを右寄せにする方法
ちなみに、幅を指定して右に表を寄せたいときは、以下のような記述をすると右寄せになります。
|
1 |
<table style="width:300px; margin-left:auto; margin-right:0;" class="dsc1item" cellspacing="1"> |
テーブル右寄せ
お疲れ様でした。
Sponsored Links
