テーブルタグ



HTML  〜タグ〜


テーブルタグ


 テーブルタグの基本タグ。

<table border="1">
<tr>
<td>本文</td>
</tr>
</table>


テーブルの基本的な構造です。

【詳しい説明】

<table border="1"> ←テーブル開始タグ
<tr> ←行開始タグ
<td> ←列開始タグ </td> ←列終了タグ
</tr> ←行終了タグ
</table> ←テーブル終了タグ

ブラウザ表示だと
こんな感じ


例えば2行2列の表を作りたかったら次のようになります。

<table border="1">

<tr>
<td>1行目1列目</td>
<td>1行目2列目</td>
</tr>

<tr>
<td>2行目1列目</td>
<td>2行目2列目</td>
</tr>

</table>

ブラウザ表示だとこんなかんじ

1行目1列目 1行目2列目
2行目1列目 2行目2列目


こんな感じで簡単に作ることができます。

このほかにも背景を変えたり 幅を指定したりといろいろ編集できます。








サイト上部へ↑  トップページへ



 テーブルの枠の大きさ。枠を非表示。

<table border="数字">

テーブル開始タグの部分です。数字が1,2,3と大きくなれば枠が大きくなります。


@

 
A

 
B

 
C

 
D

 
E




<table>

枠を非表示にするならこれでOK



サイト上部へ↑  トップページへ


 テーブルの横幅、高さを指定。

<table border="1" width="横幅" height="縦幅">

テーブルの横幅と高さを指定します。


 サンプルです。250*100です



サイト上部へ↑  トップページへ



 テーブルのセル内の余白を指定。 枠線の余白の指定

<table border="1" cellpadding="数字">

セル内の余白を指定します。

例えばこの文章を記載しているこのテーブルの余白は10ピクセルです。
←余白があるでしょ? 上下左右全て余白ができます。




<table border="1" cellspacing="数字">

分かりにくいと思いますがテーブルの線の余白(幅?)を指定します
表自体に色を付けたときとかに使えるかと思います。
この文章を記載しているテーブルもセル内の色を白にして線の余白を1にして表現しています。



サイト上部へ↑  トップページへ



 テーブルの背景色、背景画像を指定。

<table border="1" bgcolor="色">

テーブルの背景色を決めます。



サンプル

 
枠を消したサンプル

 
枠を消して
線の余白を2にして
セルの背景を白にした
サンプル






<table border="1" background="アドレス">

表の背景に画像を入れます。表の大きさにあわせて画像は繰り返し表示されます。

 サンプルです 250*100

使用した画像




サイト上部へ↑  トップページへ


 行開始タグ

<tr align="left">

右寄せにします



<tr align="center">

中央にします



<tr align="right">

右に寄せます



<tr valign="top">

上に寄せます



<tr valign="middle">

中心に寄せます



<tr valign="bottom">

下に寄せます



<tr bgcolor="色">

行の背景色を決めます



<tr background="アドレス">

行の背景画像を決めます



サイト上部へ↑  トップページへ



 列開始タグ

<td width="数字">文字</td>

列の横幅を指定します



<td height="数字">文字</td>

列の高さを指定します



<td bgcolor="色">

列の背景色を指定します



<td background="アドレス">

列の背景画像を指定します



<td align="left">

左に寄せます



<td align="center">

中央に寄せます



<td align="right">

右に寄せます



<td valign="top">

上に寄せます



<td valign="middle">

中心に寄せます



<td valign="bottom">文字</td>

下に寄せます



サイト上部へ↑  トップページへ



 セルの結合。

<td colspan="結合するセル数">

横にセルを結合させる。



【結合のサンプル例】

<TABLE border="1" width="250" height="100">
<TR>
<TD colspan="2">一行目 結合させたセル</TD>
</TR>
<TR>
<TD>下のセルは2列あるので・・</TD>
<TD>結合するセルの数は2です</TD>
</TR>
</TABLE>



一行目 結合させたセル 
下のセルは2列あるので・・ 結合するセルの数は2です






<td rowspan="結合するセル数">

縦にセルを結合させる。



【結合のサンプル例】

<TABLE border="1" width="250" height="100">
<TR>
<TD rowspan="2">縦に結合させたセル</TD>
<TD>一行目二列目</TD>
</TR>
<TR>
<TD>二列目はここだけ</TD>
</TR>
</TABLE>


 縦に結合させたセル  一行目一列目
 二行目はここだけ


サイト上部へ↑  トップページへ








サイト上部へ↑  トップページへ


メニュー
HTML基本構造
HTML HEAD要素
HTML Body属性
HTML基本タグ
HTML文字タグ
HTML画像タグ
HTMLリンクタグ
HTMLラインタグ
HTMLリストタグ
HTMLテーブルタグ
HTMLアイフレームタグ
HTMLフレームタグ
HTMLテキストエリアタグ
HTMLカラーコード
HTMLその他タグ
HTMLリンク集







おすすめ


1GB無料ホームページ
完全に一行広告の表示が
消えました!お勧めです。
当サイトも使用中
サイト最下部にPowered by FC2.comと表示されるだけ!


PR







私はこれで会社を辞めました
一日たった1〜2時間の作業でOKなインターネットで行えるビジネスとは?


いつまで貧乏くじを引きますか?
あなたは、しっかり検討しましたか?


育児と家事だけの人生なんて嫌!
ビジネスをやっても成功しない、全然楽しくない。 楽しくて・成功するビジネスとは?


アフィリエイトの時代は終わった!
アフィリエイトは手間ばかりかかって月に5,000円も稼げない・・・・


月3万円が余分にある生活
私たちはビジネスの提案ではなく、ライフスタイルを提案しています。


貧乏から金持ちへ
3分だけ時間を下さい。けして無駄な時間にはしませんから。


















Copyright(C) HTMLタグ All Rights Reserved


inserted by FC2 system