ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - 表をつくる(4)表の大きさを変える

表をつくる(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   

Template Designed by DW99