空間づくり

< 新しい記事

新着記事一覧(全455件)

過去の記事 >

Jan 29, 2009

テーブルタグ～センタリング（中央寄せ）した文字を左で揃える～

テーマ：ホームページ作成の悩み(550)

カテゴリ： PC関連

文字をセンタリング（中央寄せ）しつつ、
行頭を揃える方法

前回
今回は、テーブルの中の文字位置について書いてみたいと思います

前回は、文字位置がセンタリング（中央寄せ）されていました
場合によっては、読みにくい時もあります
文字をセンタリングしたテーブル

margin-left: ● %; margin-right: ● %;

文章の左右余白"margin"を指定して、左に揃えた文字を中央に寄せる（センタリング文字の行頭揃え）各数値は、変更してください

ソースは、こうなっています
<table style="width: 650px;">
<tr>
<td>
<p style="margin-left: 22%; margin-right: 22%;"> ★文字★ </p>
</td>
</tr>
</table>

margin-left: auto; margin-right: auto;

ソースはこうなっています
<table style="width: 650px; margin-left: auto; margin-right: auto;">
<tr>
<td style="width: 22%;"></td>
<td style="width: 56%;"></td>
<td style="width: 22%;"></td>
</tr>
</table>

padding-left: ● %; padding-right: ● %;

セル内の左右余白"padding"を指定して、左に揃えた文字を中央に寄せる（センタリング文字の行頭揃え）各数値は、変更してください

ソースは、こうなっています
<table align="center" style="width: 60%;">
<tr>
<td style="padding-left: 20%; padding-right: 20%;">
★文字★
</td>
</tr>
</table>

◆番外編◆
テーブルの中に、テーブルを入れる方法

・外枠テーブルのセンタリング align="center"
・外枠テーブルのセル（中にテーブルを入れ込むセル）もセンタリング align="center"
・中に入れるテーブルのセル（文字を書くセル）を左寄せ align="left"

見栄え（レイアウト）にテーブルを使うべきでは無いというHTML4.01や、
読み込み速度の点からすると、入れ子式になるテーブルタグは、余り好ましくないかも
各パーセンテージは、変更してください

ソースはこうなっています

<table border="0" align="center" style="width: 70%;">
<tr>
<td align="center" >

<table style="width: 50%;">
<tr>
<td align="left" >
★文字★
</td>
</tr>
</table>

</td>
</tr>
</table>


テーブルそのもののセンタリングは<table align="center">で、自動的に文字は左寄せになります( HTML4.01非推奨 )

<table align="center" style="width: 30%;">
<tr>
<td>
ここに文字
</td>
</tr>
</table>

<center> センタリング </center> でテーブルを囲むタグは、 HTML4.01非推奨 となっています。

画像まわりこみと同じく、 <table align="テーブル表示位置"> にすると、
テーブル横に文字や画像を回りこませる事が出来ます。

<table align="left" style="width: 30%;">
<tr>
<td>
ここに文字
</td>
</tr>
</table>

テーブル横に、文字がまわりこみます。
テーブルと文字の余白は
テーブルタグに margin-right: 10%; で記述しています
align属性は、HTML4.01非推奨ですが、
<tr>や<td>に関しては、非推奨ではありません

style属性の <table style=" float: left ;"> を使って回り込み

<table style="float: left;">
<tr>
<td>
ここに文字
</td>
</tr>
</table>

テーブル横に、文字がまわりこみます。
テーブルと文字の余白は
回り込んだ文字の<P>タグに
margin-left: 10%; で記述しています

前後しますが、次回は、余白(paddingとmargin）について書いてみたいと思います