元ネットワークエンジニアのブログカスタマイズ(テーブル右寄せ編)

ブログカスタマイズ(テーブル右寄せ編)テーブルイメージ画像(右寄せ)

今回は、前回の記事で紹介致しました「テーブルの中央揃え」に続き、ブログでテーブルを右寄せする際の手法についてご説明致します。



既に何度も申し上げている通り、テーブルを作成する際の基本は、HTMLでテーブルタグを記述し、CSSでレイアウト設定を行うことにありますが、テーブル毎に配置を変えたい場合だと、都度CSSで変数を宣言する必要があり、ソースが複雑になることがあります。

全て同じ設定であれば問題ないのですが、そうでない場合はクラスやセレクタを用いて、都度異なる設定を反映させる必要があるわけです。

しかし、このような複雑な設定を行わずともCSSで複数のテーブル設定を反映させることは可能です。

尚、前回同様今回もこれらの用語についての解説は致しません。
特に使用する必要がないためです。
予めご了承ください。

以下、具体的に設定方法についてご説明致します。
基本的には前回ご説明した通りの流れとなりますので、前回の記事と併せてお読み頂くと効率がよいかと存じます。

お役立ちブログカスタマイズ(従来のテーブル右寄せ)


テーブルを作成する場合、基本的に配置等のレイアウトについてはCSSファイルに記述するのが一般的です。

ですが、実際は、直接テーブルタグで配置を指定することでもテーブルの配置を変えることができます。
但し、この手法は現在では推奨されておらず、お使いの環境やテンプレートによってはうまく機能しない場合があることを予めお断りさせて頂きます。

ただ、前回ご紹介させて頂きました「従来のテーブルの中央揃え」に比べると、幾分機能する確率は高いと思います。
しかし、テンプレートやブラウザによってはうまく配置できない場合があります。

また、スマホ等で閲覧した際に、デザインが崩れる可能性もありますので、テーブルタグのみで配置を指定することはおすすめできません。

現在のHTMLの文法では推奨されていない方法のため、極力CSSを用いて記述する方が無難だと思われます。

参考までに、HTMLタグのみでテーブルの右寄せ指定を行う際の記述をご紹介致します。
通常のPC閲覧であれば、この記述でも大丈夫な場合もありますので、環境によって使い分けるのが良いと思われます。

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

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

但し、先に申し上げた通り、この手法は現在のHTML文法には即しておらず、非推奨の方法となっているため、最近では用いられることは少なくなってきています。

勿論、この手法でも文法上機能はしますが、必ずしも万能であるかと言えばそうではありません。
やはり環境やブラウザ等の仕様に左右されてしまいます。

今や万国共通の仕様として、基本構造はHTMLで、装飾等のレイアウトはCSSにて行うという暗黙のルールがあるからです。

よって、テーブルの配置に関わる設定は、CSSにて行うことになります。
ただし、先に述べた通り、そのまま記述しただけでは全てのテーブル配置が同じになってしまいます。
特に変える必要がなければそれでも構わないのですが、そのままでは不都合なケースも出てきます。

そのような場合に次に紹介する手法を用いて、テーブル毎に配置をコントロールする必要が出てくるわけです。

前回同様、直接テーブルタグ内にCSSを記述することで、各テーブル毎に設定を反映することが可能になります。

以下、具体的に解説致します。

お役立ちブログカスタマイズ(CSSを用いたテーブル右寄せ)


それでは、実際にテーブルタグ内に直接CSSを記述し、テーブル毎の設定を行う場合についてご説明致します。

以下の通り、テーブルタグ内にCSSの記述を追加し、テーブル設定が機能するようにします。

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

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

少しわかりにくいのですが、テーブルを寄せたい方向(今回の場合は右側)の余白に0を指定し、反対側(今回の場合は左側)の余白を自動(auto)とすることで、テーブルが右側に配置されるよう指定しています。

つまり、テーブルの右側の余白を動かさず、左側の余白を自動とすることで、配置を右側に固定しているわけです。
この方法であれば、前回同様、常にテーブルを右側に配置することができるわけです。

尚、前回同様IE(インターネットエクスプローラ)だとうまく配置されない場合があります^^;。
バージョンによってはうまく配置されることもありますが、確実とは言えませんので、使用されている方はご注意願います。

恐らく、前回ご紹介させて頂きました「テーブルの中央揃え」に比べれば、テーブルの右寄せはうまくいくケースが多いかとは思いますが、機能しない場合を考えて、予めCSSで記述するのが無難だと思われます。

この方法であれば、細かい変数等の設定が不要なのでおすすめです♪

今後も随時、ブログを作成する際にお役に立つ手法を紹介していきたいと思います。

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

↓ ↓ ↓

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

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

↓ ↓ ↓

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

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

↓ ↓ ↓

CSSの関連書籍はこちら

スポンサーリンク



Comment

Leave a Reply


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