HTMLタグ・CSS｜HTML辞典｜テーブルタグ <table><tr><td>

Home≫HTML辞典≫テーブルタグ <table><tr><td>

テーブルタグ <table><tr><td>

≪ 画像内リンク <img src="画像名">	【 HOME 】	テーブルタグの説明１ ≫

テーブルタグページ一覧
解説	テーブルタグの説明が多くなるので下記のページに分けました。テーブルタグについて（現在のページ）テーブルタグの基本的なサンプルや概要を紹介したページ。テーブルタグの説明１テーブルに指定する背景色や線の色、背景画像についての説明。テーブルタグの説明２テーブルの余白や位置、縦横サイズの指定についての説明。テーブルタグの説明３マス（セル）の結合、グループ化させる指定についての説明。テーブルをレイアウトに使うテーブルをレイアウトの基盤として使うときの方法を紹介しています。

テーブルタグで表を作る

タグ

見本

結果

文字1	文字2	文字3
文字4	文字5	文字6
文字7	文字8	文字9

見本

結果

文字1	文字2	文字3
文字4	文字5	文字6
文字7	文字8	文字9

見本

結果

文字1	文字2	文字3
文字4	文字5	文字6
文字7	文字8	文字9

解説

<table> がテーブルタグの始まりです。基本的に <tr> や <td> とセットで使用します。
<tr> は縦の段を１段増やせます。 <td> は横の文字を書ける部分（セル）を１つ増やせます。
「border」部分は、表に枠を表示するという意味です。
これを無しにすると透明になるので、それをレイアウトの基礎に使用すると便利です。
「border」を「border="数字"」のように数字で外枠の太さを変える事もできます。

テーブルタグの概要
解説	<table> タグに使える効果。「cellpadding」１マス（セル）の余白を指定する。「cellspacing」テーブルの境界線の間隔を指定する。「align」テーブルの位置を指定する。 align="★" 　「left」テーブル全体を左に表示する。　「center」テーブル全体を真ん中に表示する。　「right」テーブル全体を右に表示する。「summary」表の概要や説明を書いておく（実際に表示されない）編集するときに分かり易くするために書いておくと便利です。「width」テーブル全体の横幅を指定する。「height」テーブル全体の縦幅を指定する。「background」背景画像を表示する。「bgcolor」背景色を指定する（色見本）「border」外枠の太さを指定する。「bordercolor」外枠の色を指定する（色見本）「bordercolorlight」外枠の立体的な明るい部分の色を指定する（色見本）「bordercolordark」外枠の立体的な暗い部分の色を指定する（色見本）「frame」外枠の表示方法。 frame="★" 　「border」上下左右の外枠を表示する（初期値）　「void」外枠を表示しない。　「hsides」上下の外枠だけを表示する。　「vsides」左右の外枠だけを表示する。　「above」上の外枠だけを表示する。　「below」下の外枠だけを表示する。　「lhs」左の外枠だけを表示する。　「rhs」右の外枠だけを表示する。「rules」内枠の表示方法。 rules="★" 　「all」すべての枠を表示する（初期値）　「none」内部の線を表示しない。　「rows」内部の横線だけを表示する。　「cols」内部の縦線だけを表示する。　「groups」 <thead>、<tbody>、<tfoot>、<colgroup> で指定した線のみ表示する。 <td> <th> タグに使える効果。「align」横の位置を指定する。 align="★" 　「left」 1マス（セル）の内容を左に表示する。　「center」 1マス（セル）の内容を真ん中に表示する。　「right」 1マス（セル）の内容を右に表示する。「valign」縦の位置を指定する。 valign="★" 　「top」 1マス（セル）の内容を上に表示する。　「middle」 1マス（セル）の内容を縦中央に表示する。　「bottom」 1マス（セル）の内容を下に表示する。　「baseline」 1マス（セル）の内容をベースラインに揃えて表示する。「width」 1マス（セル）の幅を指定する。「height」 1マス（セル）の高さを指定する。「bgcolor」 1マス（セル）の背景色を指定する（色見本）「background」背景画像を指定する。「colspan」横方向の1マス（セル）の連結数を指定する。「rowspan」縦方向の1マス（セル）の連結数を指定する「nowrap」 1マス（セル）内の折り返しを禁止する。 <caption> タグに使える効果。「align」位置を指定する。 align="★" 　「top」表の上の真ん中に表示（初期値）　「bottom」表の下の真ん中に表示。　「left」表の左に表示する。　「right」表の右に表示する。 <thead> <tfoot> <tbody> タグに使える効果。「align」横の位置を指定する。 align="★" 　「left」グループの1マス（セル）の内容を左に表示する。　「center」グループの1マス（セル）の内容を真ん中に表示する。　「right」グループの1マス（セル）の内容を右に表示する。「valign」縦の位置を指定する。 valign="★" 　「top」グループの1マス（セル）の内容を上に表示する。　「middle」グループの1マス（セル）の内容を真ん中に表示する。　「bottom」グループの1マス（セル）の内容を下に表示する。　「baseline」グループの1マス（セル）の内容をベースラインに揃えて表示する。 <colgroup> <col> タグに使える効果。「span」グループ化させる列を指定する。「width」列の横幅を指定する。「align（IE)」横の位置を指定する。 align="★" 　「left」グループの1マス（セル）の内容を左に表示する。　「center」グループの1マス（セル）の内容を真ん中に表示する。　「right」グループの1マス（セル）の内容を右に表示する。「valign（IE)」　縦の位置を指定する。 valign="★" 　「top」グループの1マス（セル）の内容を上に表示する。　「middle」グループの1マス（セル）の内容を中央に表示する。　「bottom」グループの1マス（セル）の内容を下に表示する。　「baseline」グループの1マス（セル）の内容をベースラインに揃えて表示する。「bgcolor」グループの背景色を指定する（色見本）

テーブルタグの概要

解説

<table> タグに使える効果。

「cellpadding」１マス（セル）の余白を指定する。
「cellspacing」テーブルの境界線の間隔を指定する。
「align」テーブルの位置を指定する。 align="★"
　「left」テーブル全体を左に表示する。
　「center」テーブル全体を真ん中に表示する。
　「right」テーブル全体を右に表示する。
「summary」表の概要や説明を書いておく（実際に表示されない）
編集するときに分かり易くするために書いておくと便利です。
「width」テーブル全体の横幅を指定する。
「height」テーブル全体の縦幅を指定する。
「background」背景画像を表示する。
「bgcolor」背景色を指定する（色見本）
「border」外枠の太さを指定する。
「bordercolor」外枠の色を指定する（色見本）
「bordercolorlight」外枠の立体的な明るい部分の色を指定する（色見本）
「bordercolordark」外枠の立体的な暗い部分の色を指定する（色見本）
「frame」外枠の表示方法。 frame="★"
　「border」上下左右の外枠を表示する（初期値）
　「void」外枠を表示しない。
　「hsides」上下の外枠だけを表示する。
　「vsides」左右の外枠だけを表示する。
　「above」上の外枠だけを表示する。
　「below」下の外枠だけを表示する。
　「lhs」左の外枠だけを表示する。
　「rhs」右の外枠だけを表示する。
「rules」内枠の表示方法。 rules="★"
　「all」すべての枠を表示する（初期値）
　「none」内部の線を表示しない。
　「rows」内部の横線だけを表示する。
　「cols」内部の縦線だけを表示する。
　「groups」 <thead>、<tbody>、<tfoot>、<colgroup> で指定した線のみ表示する。

<td> <th> タグに使える効果。

「align」横の位置を指定する。 align="★"
　「left」 1マス（セル）の内容を左に表示する。
　「center」 1マス（セル）の内容を真ん中に表示する。
　「right」 1マス（セル）の内容を右に表示する。
「valign」縦の位置を指定する。 valign="★"
　「top」 1マス（セル）の内容を上に表示する。
　「middle」 1マス（セル）の内容を縦中央に表示する。
　「bottom」 1マス（セル）の内容を下に表示する。
　「baseline」 1マス（セル）の内容をベースラインに揃えて表示する。
「width」 1マス（セル）の幅を指定する。
「height」 1マス（セル）の高さを指定する。
「bgcolor」 1マス（セル）の背景色を指定する（色見本）
「background」背景画像を指定する。
「colspan」横方向の1マス（セル）の連結数を指定する。
「rowspan」縦方向の1マス（セル）の連結数を指定する
「nowrap」 1マス（セル）内の折り返しを禁止する。

<caption> タグに使える効果。

「align」位置を指定する。 align="★"
　「top」表の上の真ん中に表示（初期値）
　「bottom」表の下の真ん中に表示。
　「left」表の左に表示する。
　「right」表の右に表示する。

<thead> <tfoot> <tbody> タグに使える効果。

「align」横の位置を指定する。 align="★"
　「left」グループの1マス（セル）の内容を左に表示する。
　「center」グループの1マス（セル）の内容を真ん中に表示する。
　「right」グループの1マス（セル）の内容を右に表示する。
「valign」縦の位置を指定する。 valign="★"
　「top」グループの1マス（セル）の内容を上に表示する。
　「middle」グループの1マス（セル）の内容を真ん中に表示する。
　「bottom」グループの1マス（セル）の内容を下に表示する。
　「baseline」グループの1マス（セル）の内容をベースラインに揃えて表示する。

<colgroup> <col> タグに使える効果。

「span」グループ化させる列を指定する。
「width」列の横幅を指定する。
「align（IE)」横の位置を指定する。 align="★"
　「left」グループの1マス（セル）の内容を左に表示する。
　「center」グループの1マス（セル）の内容を真ん中に表示する。
　「right」グループの1マス（セル）の内容を右に表示する。
「valign（IE)」　縦の位置を指定する。 valign="★"
　「top」グループの1マス（セル）の内容を上に表示する。
　「middle」グループの1マス（セル）の内容を中央に表示する。
　「bottom」グループの1マス（セル）の内容を下に表示する。
　「baseline」グループの1マス（セル）の内容をベースラインに揃えて表示する。
「bgcolor」グループの背景色を指定する（色見本）

≪ 画像内リンク <img src="画像名">	【 HOME 】	テーブルタグの説明１ ≫

練習用書き込みフォーム（サンプル表示）
<table border> <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>

テーブルタグ <table><tr><td>｜HTML辞典｜HTMLタグ・CSS

テーブルタグ <table><tr><td>