元ネットワークエンジニアのブログカスタマイズ(テーブル中央揃え編)

ブログカスタマイズ(テーブル中央揃え編)テーブルイメージ画像

今回は、ブログでテーブルを作成した際に、テーブルを中央揃えにするための方法についてご紹介致します。
テーブルを作成する場合、HTMLでテーブルタグを記述し、CSSでレイアウト設定を行うことになります。

お役立ちブログカスタマイズ(従来のテーブル中央揃え)


テーブルを作成する場合、配置等のレイアウトについては、基本的にCSSファイルに記述します。
但し、この方法の場合、テーブルを複数作成した際に全てのテーブルに同じ設定を適用することになるため、各テーブル毎に配置をコントロールすることができません。

尚、次のようにテーブルタグに「align="center"」の指定を行う方法は、現在では推奨されていないのでご注意願います。

また、この方法ではうまくテーブルの中央寄せを行うことができません。
テーブルのレイアウトはCSSで記述するというルールに則って対処しましょう。

<table border="1" align="center">
<tr>
<td>文字・数値・画像等</td>
</tr>
</table>

align="center"」で配置を中央に指定しています。
この方法であれば、「align="left"(左寄せ)」「align="right"(右寄せ)」等テーブル配置の変更が可能になります。

但し、この記述は推奨されている方法ではないため、テンプレートや環境によってはうまく中央揃えできないことがあります。

そのため、テーブルの配置をCSSで指定することになりますが、先に述べた通り、普通に記述しただけでは、作成した全てのテーブルで配置が同じになってしまいます。

そこで、各テーブル毎に配置を変更する必要が生じるわけです。

厳密には、クラスやセレクタ等で変数を定義しておき、テーブルタグに変数を代入することで、テーブル毎に配置を割り振ることができます。

但し、この方法の場合、都度変数を作成する必要があり、構造が複雑になる可能性があります。
よって、今回はその方法は採用致しません。

尚、クラスやセレクタについての説明はここでは割愛します。
今回の設定では特に必要とはしないからです。

今後、設定する機会があれば、その際にご説明させて頂こうと思います、
ご了承くださいませ。

そこで、直接テーブルタグ内にCSSを記述することで、各テーブル毎に配置をコントロールする方法を考えます

この方法であれば、逐次CSSで変数を宣言する手間が省け、テーブル毎に異なる設定を施すことが出来るようになります。

お役立ちブログカスタマイズ(CSSを用いたテーブル中央揃え)


それでは、実際にテーブルタグ内に直接CSSを記述する方法をご説明致します。

以下の通り、テーブルタグ内にCSSの記述を追加します。

<table border="1" style="margin-left:auto; margin-right:auto;">
<tr>
<td>文字・数値・画像等</td>
</tr>
</table>

テーブルタグ内に、「style="margin-left:auto; margin-right:auto;"」と指定することで、CSSの記述を設定することができます。

この場合、テーブルの左右の余白を自動(auto)に設定することで、テーブルが中央に配置されるように指定しています。
つまり、相対的にテーブルが中央に配置されるように調整しているわけです。

このように設定することで、常にテーブルが中央に配置されるようになります。
直接テーブルタグ内にCSSを記述することで、テーブル毎に配置をコントロールできるようになるわけです。

但し、IE(インターネットエクスプローラ)ではうまく配置されないようです^^;。
その他のブラウザでは概ね問題なく表示できるようです。

テーブルの中央寄せがうまくいかず困っている方がおられましたら、是非この方法をお試し頂ければと存じます。
意外にテーブルの配置が思い通りにならず、苦心している方は多いのではないしょうか^^;。

細かい変数等の設定不要で、テーブル位置をコントロールすることができるのでおすすめです♪

今後も随時、お役に立つカスタマイズ方法を紹介していきたいと思います。

WEBデザイン講座をお探しならこちらがおすすめ♪

↓ ↓ ↓

WEBデザイン講座をお探しならこちら

ブログカスタマイズの関連書籍はこちらになります

↓ ↓ ↓

ブログカスタマイズの関連書籍はこちら

CSSの関連書籍はこちらになります

↓ ↓ ↓

CSSの関連書籍はこちら

スポンサーリンク



Comment

Leave a Reply


管理者にだけ表示を許可する