FC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう！ 		FC2ブログジャンキー
「うちのブログ、アクセス数が全然伸びない…」 そんな悩みをブログジャンキーが解決します！ 		FC2マイサーチ
ブログに貼り付けるだけで最適化した検索結果を 表示してくれる検索エンジンを設置しよう！ 		FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう！
TOP > タグのお勉強 > title − 表をつくる（4）表の大きさを変える
[Edit][NewEntry] [Admin]

表をつくる（4）表の大きさを変える

おさらいはナシで、最初から表の大きさを変えるを説明していきます。

枠を横に長く伸ばす 

<table border width="300">
<tr>
<td>枠を横に長く伸ばす</td>
</tr>
</table>

tableにwidth=300と入れると横の長さが指定した数字の長さになります。「%」で長さを指定することもできます。

枠を縦に伸ばす 

<table border height="150">
<tr>
<td>枠を縦に伸ばす</td>
</tr>
</table>

tableにheight=150と入れると縦の長さが指定した数字の長さになります。「%」で長さを指定することもできます。

真ん中に文字 

<table border width="250">
<tr>
<td align=center>真ん中に文字</td>
</tr>
</table>

tdの後ろにalign=centerで文字をセルの真ん中に書くことができます。centerは真ん中・rightは右・leftは左です。

真ん中に文字 真ん中に文字
右に文字 左に文字 

<table border width="350">
<tr align=center>
<td>真ん中に文字</td>
<td>真ん中に文字</td>
</tr>
<tr>
<td align=right>右に文字</td>
<td align=left>左に文字</td>
</tr>
</table>

trの後ろにalign=centerを入れれば、横1列全部が同じ位置になります。tdの後ろに入れれば、1つずつ位置を決める事ができます。

下に文字 

<table border height="150">
<tr>
<td valign=bottom>下にに文字</td>
</tr>
</table>

tdの後ろにvalign=bottomを入れると文字は下に書く事ができます。bottomは下・topは上・真ん中はmiddleです。

間隔を広げる 

<table border cellpadding="10">
<tr>
<td>間隔を広げる</td>
</tr>
</table>

borderの後ろにcellpadding=10をを入れると枠と文字との間隔が広がります。数字を増やすと間隔が大きくなります。

縦に結合 普通のセル 普通のセル
普通のセル 普通のセル 

<table border>
<tr>
<td rowspan="2">縦に結合</td>
<td>普通のセル</td>
<td>普通のセル</td>
</tr>
<tr>
<td>普通のセル</td>
<td>普通のセル</td>
</tr>
</table>

tdの後ろにrowspan=2を入れると、セルが下のセルと結合して1つになります。rowspan=2の2は縦に2つ結合するという意味です。数字を増やすとその数だけセルがあれば結合します。

横に結合 普通のセル
普通のセル 普通のセル 普通のセル 

<table border>
<tr>
<td colspan="2">横に結合</td>
<td>普通のセル</td>
</tr>
<tr>
<td>普通のセル</td>
<td>普通のセル</td>
<td>普通のセル</td>
</tr>
</table>

tdの後ろにcolspan=2を入れると、セルが右のセルと結合して1つになります。colspan=2の2は横に2つ結合するという意味です。数字を増やすとその数だけセルがあれば結合します。

見出し
表に見出しをつける 表に見出しをつける 

<table border>
<tr>
<th colspan="2">見出し</th>
</tr>
<tr>
<td>表に見出しをつける</td>
<td>表に見出しをつける</td>
</tr>
</table>

tdをthに変えると見出しを作る事ができます。見出しは文字が太字になって、セルの中央に表示されます。

タイトル
普通のセル 普通のセル 普通のセル 

<table border>
<caption>タイトル</caption>
<tr>
<td>普通のセル</td>
<td>普通のセル</td>
<td>普通のセル</td>
</tr>
</table>

tableタグの下に<caption>〜</caption>入れると、表のタイトルを作る事ができます。

次回は表の枠線を変えるです。    <つづく>

関連ページ）
・表をつくる
├表をつくる（1）基本
├表をつくる（2）表の飾り方
├表をつくる（3）複数の枠の表の飾り方
├表をつくる（4）表の大きさを変える
├表をつくる（5）枠線を変える
├表をつくる（6）タグのまとめ
└表を応用して色々つくろう


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★　　[アフィリエイトとは？]
リンクシェア
の詳細はこちら
 エーハチネット
の詳細はこちら
 ﾊﾞﾘｭｰｺﾏｰｽ
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/85-2d199f13   

HOME | ▲

Template Designed by DW99