趣味でいろんな事やってます。今はテンプレートやカスタマイズ方法 HTML CSSについて書いています。『完成!』とか『クリア!』と達成感を味わいたい。 そんなこんなで へたのヨコズキ 趣味紹介ページです。
 
 
 
 
 
 
スポンサーサイト
 
 
【--/--/-- --:--】
 
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
 
 
 
▲TOP
 
 
 
 
テーブルの仕組み
 
 
【2006/03/07 09:54】
 
 
テーブルタグについて 詳しく例題をあげています。
説明文はありませんが 見ただけで解るようになっています。

テーブルを使って表を作る
テーブルは表を作ったり、レイアウトを美しくするために使用します。
テーブルを使って画像を重ねたり画面を見やすくしたりするので
HPを作るときはまず覚えたいタグの一つだと思います。
(解りやすくするためにborder="1"にしています。)

テーブルで使用する主なタグ
<table>~</table> 表全体を囲む
<tr>~</tr> セルの横列を囲む
<th>~</th> 見出しセル
<td>~</td> セル
<caption>~</caption> 表の名前
width="幅を指定" height="高さを指定"

例)
表の名前
見出し1見出し2見出し3
セル1 セル2 セル3
セル4 セル5 セル6

上のテーブルのソース
<table width="250px" border="1">
<caption>表の名前</caption>
<tr height="50px">
<th width="50px">見出し1</th> <th>見出し2</th> <th width="50%">見出し3</th>
</tr>
<tr>
<td>セル1</td> <td>セル2</td> <td>セル3</td>
</tr>
<tr>
<td>セル4</td> <td>セル5</td> <td>セル6</td>
</tr>

</table>



セルを連結
colspan="横方向に連結させたいセルの数"
rowspan="縦方向に連結させたいセルの数"

例)
セル1
セル2 セル3 セル4
セル5 セル6

上のテーブルのソース
<table width="250px" border="1">
<tr>
<td colspan="3">セル1</td>
</tr>
<tr>
<td rowspan="2">セル2</td> <td>セル3</td> <td>セル4</td>
</tr>
<tr>
<td>セル5</td> <td>セル6</td>
</tr>
</table>

セルとセルの間隔を設定
cellspacing="セルの間隔"
セル1 セル2 セル3
セル4 セル5 セル6

上のテーブルのソース
<table width="100px" border="1" cellspacing="20">
<tr>
<td>セル1</td> <td>セル2</td> <td>セル3</td>
</tr>
<tr>
<td>セル4</td> <td>セル5</td> <td>セル6</td>
</tr>
</table>

セルの内容と枠との間隔を設定
cellpadding="枠との間隔"
セル1 セル2 セル3
セル4 セル5 セル6

上のテーブルのソース
<table width="100px" border="1" cellpadding="20">
<tr>
<td>セル1</td> <td>セル2</td> <td>セル3</td>
</tr>
<tr>
<td>セル4</td> <td>セル5</td> <td>セル6</td>
</tr>
</table>

背景に色設定
bgcolor="色指定"
セル1 セル2 セル3
セル4 セル5 セル6
*TDやTR単位でも指定できます。

上のテーブルのソース
<table width="200px" height="100px" border="1" bgcolor="#FFFF33">
<tr bgcolor="#FF33FF">
<td>セル1</td> <td>セル2</td> <td>セル3</td>
</tr>
<tr>
<td bgcolor="#33FFFF">セル4</td> <td>セル5</td> <td>セル6</td>
</tr>
</table>

テーブルに背景画像を設定
background="画像のURL"
セル1 セル2 セル3
セル4 セル5 セル6
*TDやTR単位でも指定できます。

上のテーブルのソース
<table width="200px" height="100px" border="1" background="画像のURL">
<tr>
<td>セル1</td> <td>セル2</td> <td>セル3</td>
</tr>
<tr>
<td>セル4</td> <td>セル5</td> <td>セル6</td>
</tr>
</table>

セル内の表示位置指定
align="横方向の表示位置" valign="縦方向の表示位置"
左上 中上 右上
左中 中中 右中
左下 中下 右下

上のテーブルのソース
<table width="250px" height="250px" border="1">
<tr>
<td align="left" valign="top">左上</td>
<td align="center" valign="top">中上</td>
<td align="right" valign="top">右上</td>
</tr>
<tr>
<td align="left" valign="middle">左中</td>
<td align="center" valign="middle">中中</td>
<td align="right" valign="middle">右中</td>
</tr>
<tr>
<td align="left" valign="bottom">左下</td>
<td align="center" valign="bottom">中下</td>
<td align="right" valign="bottom">右下</td>
</tr>
</table>

表のヘッダーとフッターを指定
<thead>~</thead> 表のヘッダー
<tbody>~</tbody> 表の内容
<tfoot>~</tfoot> 表のフッター

ヘッダー1 ヘッダー2 ヘッダー3
フッター1 フッター2 フッター3
セル1 セル2 セル3
セル4 セル5 セル6

上のテーブルのソース
<table width="250px" height="200px" border="1">
<thead>
<tr>
<td>ヘッダー1</td> <td>ヘッダー2</td> <td>ヘッダー3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>フッター1</td> <td>フッター2</td> <td>フッター3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>セル1</td> <td>セル2</td> <td>セル3</td>
</tr>
<tr>
<td>セル4</td> <td>セル5</td> <td>セル6</td>
</tr>
</tbody>
</table>

セルを縦一列でグループ
<colgroup span="グループにしたい列数">~</colgroup>
セル1 セル2 セル3
セル4 セル5 セル6
セル7 セル8 セル9

上のテーブルのソース
<table width="250px" height="150px" border="1">
<colgroup span="1" bgcolor="#33FFFF"></colgroup>
<colgroup span="2" bgcolor="#FF33FF"></colgroup>
<tr>
<td>セル1</td> <td>セル2</td> <td>セル3</td>
</tr>
<tr>
<td>セル4</td> <td>セル5</td> <td>セル6</td>
</tr>
<tr>
<td>セル7</td> <td>セル8</td> <td>セル9</td>
</tr>
</table>

スポンサーサイト

 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
HP作成 >> コンピュータ
 
 
 
▲TOP
 
 
 
 
この記事に対するコメント
 
 
 
 
 
▲TOP

 
 
 
 
この記事に対するコメント投稿
 
 















 
 
 
▲TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。