テーブルタグの説明１｜HTML辞典｜HTMLタグ・CSS

Home≫HTML辞典≫テーブルタグの説明１
サイト内検索

テーブルタグの説明１

≪ テーブルタグ <table><tr><td> 【 HOME 】 テーブルタグの説明２ ≫
Yahoo!ブックマークに登録Yahoo!ブックマークに登録 Google Bookmarks に追加Google Bookmarks に追加 はてなブックマークに登録はてなブックマークに登録 livedoorに記事をクリップlivedoorに記事をクリップ
テーブルタグページ一覧
解説 テーブルタグの説明が多くなるので下記のページに分けました。
テーブル背景に色を表示
タグ <table border bgcolor="#色指定">
<tr>
<td>文字1</td>
</tr>
</table>
見本 <table border bgcolor="#ffaaaa">
<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>
結果
文字1文字2文字3
文字4文字5文字6
文字7文字8文字9
見本 <table border>
<tr bgcolor="#ffaaaa">
<td>文字1</td><td>文字2</td><td>文字3</td>
</tr>
<tr bgcolor="#aaffaa">
<td>文字4</td><td>文字5</td><td>文字6</td>
</tr>
<tr bgcolor="#aaaaff">
<td>文字7</td><td>文字8</td><td>文字9</td>
</tr>
</table>
結果
文字1文字2文字3
文字4文字5文字6
文字7文字8文字9
見本 <table border>
<tr>
<td bgcolor="#ffaaaa">文字1</td><td>文字2</td><td>文字3</td>
</tr>
<tr>
<td>文字4</td><td bgcolor="#aaffaa">文字5</td><td>文字6</td>
</tr>
<tr>
<td>文字7</td><td>文字8</td><td bgcolor="#aaaaff">文字9</td>
</tr>
</table>
結果
文字1文字2文字3
文字4文字5文字6
文字7文字8文字9
見本 <table cellspacing="1" bgcolor="#666666">
<tr bgcolor="#ffaaff">
<td bgcolor="#ffaaaa">文字1</td><td>文字2</td><td>文字3</td>
</tr>
<tr bgcolor="#aaeeff">
<td>文字4</td><td bgcolor="#aaffaa">文字5</td><td>文字6</td>
</tr>
<tr bgcolor="#ffeeaa">
<td>文字7</td><td>文字8</td><td bgcolor="#aaaaff">文字9</td>
</tr>
</table>
結果
文字1文字2文字3
文字4文字5文字6
文字7文字8文字9
解説 <table> <tr> <th> <td> に 「bgcolor="#色指定"」 で色を指定することで背景に色をつけることができます（色見本）
一番下の結果は、border を消して外内の枠線を消し、cellspacing="1" でマス（セル）の隙間を細い1本線になるようにしました。 そうすることでテーブル全体に指定している色を、シンプルな枠線のように見せることができます。
テーブル背景に画像を表示
タグ <table border background="画像名">
<tr>
<td>文字1</td>
</tr>
</table>
見本 <table border background="img/bg1.gif">
<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>
<tr>
<td>文字10</td><td>文字11</td><td>文字12</td>
</tr>
</table>
結果
文字1文字2文字3
文字4文字5文字6
文字7文字8文字9
文字10文字11文字12
文字1文字2文字3
文字4文字5文字6
文字7文字8文字9
文字10文字11文字12
解説

table の横に 「background="画像名"」 と書けば、背景に画像を表示することができます。
td の横に書けば、その一つのマス（セル）内にだけ反映します。
tr に書けば、その段の横１行分のマス（セル）に反映します。

上で指定している img/bg1.gif の 「img」 はフォルダ、「bg1」 はファイル名、「.gif」 は画像の種類（拡張子）です。

結果の右にある表は、線の 「border」 を消した状態です。
「border」 を消すと、枠線が消えてスッキリします。
テーブルの枠に色を付ける
タグ <table border bordercolor="#色指定">
<tr>
<td>文字1</td>
</tr>
</table>
見本 <table border bordercolor="#ff0000">
<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>
結果
文字1文字2文字3
文字4文字5文字6
文字7文字8文字9
タグ <table border="5" bordercolorlight="#色指定" bordercolordark="#色指定">
<tr>
<td>文字1</td>
</tr>
</table>
見本 <table border="5" bordercolorlight="#ffaaaa" bordercolordark="#dd5555">
<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>
結果
文字1文字2文字3
文字4文字5文字6
文字7文字8文字9
解説 「bordercolor="#色指定"」 で、外枠と内枠線の色を指定することができます（色見本）
「bordercolorlight="#色指定"」 で、外枠の立体的になっている明るい部分の色を指定することができます（色見本）
「bordercolordark="#色指定"」 で、外枠の立体的になっている暗い部分の色を指定することができます（色見本）
これらの指定は 「border」 があること前提の指定になります。


≪ テーブルタグ <table><tr><td> 【 HOME 】 テーブルタグの説明２ ≫
練習用書き込みフォーム（サンプル表示）


素材の森 素材NAVI 素材R 素材・壁紙 イラスト素材 素材・作成 素材ランキング 無料素材リンク 素材ファン
無料ＨＰ素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索 サイト内検索
素材ランキング 素材ＮＡＶＩ 素材の森 素材サーチ フリー素材 素材・画像 素材・壁紙 素材Ｒ Webランキング
web サイトの説明 素材使用方法 質問集/用語集 作成練習場 HTML/CSS カラー見本