空間づくり

空間づくり

Jan 29, 2009
XML
カテゴリ: 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)について書いてみたいと思います

HOME 日記 楽天ブログで使えるタグ一覧表


Takabo Soft氏 AquaMaker を使い、アクアボタンを作成しました
DLは コチラ





お気に入りの記事を「いいね!」で応援しよう

最終更新日  Feb 2, 2009 06:14:29 PM


【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

© Rakuten Group, Inc.
X

Create a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: