HTMLテーブルマークアップの詳しい解説（初心者向け）_HTML/Xhtml_Webページ制作

テーブル>


■

：
这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。
是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用，属容器标记的还有其他。
用以标示表格列（row）
2 列目、1 列目
show結果 1 列目、1 列目 1 列目、2 列目 2 列目、1 列目 2 列目、2 列目 例 5: ソースコード

用以标示储存格（cell）
的参数设定（常用）：
例如：
width="400"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。 border="1"
表格边框厚度，不同浏览器有不同的内定值，故请指明。 cellspacing="2"
表格格线厚度，请看例子三，那是加厚到 5 的格线。 cellpadding="2"
文字与格线的距离，请看例子四，那是加至 10 的 padding。 align="CENTER"
表格的摆放位置（水平），可选值为： left, right, center，请看例子五或六，那表格 是放于中间的，为怕一些浏览器不支援，故特加上居中标记，只是多 层保证而己，当然只用亦可。 valign="TOP".
表格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。 background="myweb.gif"
表格　纸，与 bgcolor 不要同用。 bgcolor="#0000FF"
表格底色，与 background 不要同用，请看例子六。 bordercolor="#FF00FF"
表格边框颜色，NC 与 IE 有不同的效果，请看例子六。 bordercolorlight="#00FF00"
表格边框向光部分的颜色，请看例子二。『只适用于 IE』 bordercolordark="#00FFFF"
表格边框背光部分的颜色，请看例子二，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 cols="2"
表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。
的参数设定（常用）：
例如： align="RIGHT"
该一列内字画等的摆放贴　位置（水平），可选值为： left, center, right。 valign="MIDDLE"
该一列内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。 bgcolor="#0000FF"
该一列底色，请看例子五。 bordercolor="#FF00FF"
该一列边框颜色，请看例子三。『只适用于 IE』 bordercolorlight="#808080"
该一列边框向光部分的颜色，请看例子三。『只适用于 IE』 bordercolordark="#FF0000"
该一列边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

的参数设定（常用）：
例如：

width="48%"
该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。 height="400"
该一储存格高度。 colspan="5"
该一储存格向右打通的栏数。请看例子六 rowspan="4"
该一储存格向下打通的列数。请看例子六 align="RIGHT"
该一储存格内字画等的摆放贴　位置（水平），可选值为： left, center, right。 valign="BOTTOM"
该一储存格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。 bgcolor="#FF00FF"
该一储存格底色，请看例子四。 bordercolor="#808080"
该一储存格边框颜色，请看例子三。『只适用于 IE』 bordercolorlight="#FF0000"
该一储存格边框向光部分的颜色，请看例子三。『只适用于 IE』 bordercolordark="#00FF00"
该一储存格边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 background="myweb.gif"
该一储存格　纸，与 bgcolor 任用其一。
例子一：

只有一个储存格（cell）的表格

:
この 3 つのタグはテーブルを定義する上で最も重要なタグです。この 3 つだけを学習すれば十分であると言えます。
はコンテナ タグです。これは、これがテーブルであることを宣言するために使用され、他のテーブル タグはそのスコープ内でのみ適用できることを意味します。他のコンテナ タグもあります。

第一列第一栏

第一列第二栏

はテーブルの列 (行) をマークするために使用されます はセル (セル) をマークするために使用されます パラメータ設定 (一般的に使用されます): 例: width="400" テーブルの幅。絶対値 (80 など) と相対値 (80% など) を受け入れます。 border="1" 表の境界線の太さはブラウザごとに異なるため、指定してください。 cellpacing="2" 表のグリッド線の太さ。例 3 を参照してください。これは、グリッド線が 5 に太くなっています。 cellpadding="2" テキストとグリッドの間の距離。例 4 を参照してください。パディングが 10 に追加されます。 align="CENTER" テーブルの配置位置 (水平) は、左、右、中央です。例 5 または 6 を参照してください。一部のブラウザでは中央に配置されないため、テーブルは中央に配置されます。をサポートするため、センター マーク が追加されます。これは単なる多層保証です。 もちろん、 のみを使用できます。 valign="TOP". テーブル内の書道と絵画の配置位置 (垂直) は、上、中、下です。 Background="myweb.gif" フォーム用紙。bgcolor と一緒に使用しないでください。 bgcolor="#0000FF" テーブルの背景色。背景と一緒に使用しないでください。例 6 を参照してください。 bordercolor="#FF00FF" 表の境界線の色、NC および IE には異なる効果があります。例 6 を参照してください。 bordercolorlight="#00FF00" テーブルの境界線の光に面する部分の色。例 2 を参照してください。 「IEのみ」 bordercolordark="#00FFFF" テーブルの境界線のバックライト部分の色。例 2 を参照してください。bordercolorlight または bordercolordark を使用する場合、bordercolor は無効になります。 「IEのみ」 Cols="2" テーブル フィールドの数により、ブラウザはテーブルをダウンロードする前にテーブル全体を描画できるようになります。 パラメータ設定 (一般的に使用されます): 例: align="RIGHT" この列に書道と絵画を配置する位置 (水平) オプションの値は、左、中央、右です。 valign="MIDDLE" この列の書道と絵画の配置位置 (垂直) オプションの値は、上、中、下です。 bgcolor="#0000FF" この列の背景色については、例 5 を参照してください。 bordercolor="#FF00FF" この列の境界線の色は、例 3 を参照してください。 「IEのみ」 bordercolorlight="#808080" この列の境界線の光に面する部分の色。例 3 を参照してください。 「IEのみ」 bordercolordark="#FF0000" この列の境界線のバックライト部分の色。例 3 を参照してください。bordercolorlight または bordercolordark を使用する場合、bordercolor は無効になります。 「IEのみ」 パラメータ設定 (一般的に使用されます): 例:

2列目、1列目

width="48%" このセルの幅は、絶対値 (80 など) と相対値 (80% など) を受け入れます。 height="400" セルの高さ。 Colspan="5" このセルが右側に開く列の数。例 6 を参照してください rowspan="4" このセルが下方向に開く列の数。例 6 を参照してください align="RIGHT" このセル内の書道と絵画の配置位置 (水平) オプションの値は、左、中央、右です。 valign="BOTTOM" このセル内の書道と絵画の配置位置 (垂直) オプションの値は、上、中、下です。 bgcolor="#FF00FF" このセルの背景色については、例 4 を参照してください。 bordercolor="#808080" このセルの境界線の色は、例 3 を参照してください。 「IEのみ」 bordercolorlight="#FF0000" セルの境界線の光に面する部分の色。例 3 を参照してください。 「IEのみ」 bordercolordark="#00FF00" セル境界線のバックライト部分の色。例 3 を参照してください。bordercolorlight または bordercolordark を使用する場合、bordercolor は無効になります。 「IEのみ」 Background="myweb.gif" これは方眼紙 (one または bgcolor) です。 例 1:

セルが 1 つだけある表

結果を表示 セルが 1 つだけある表 例 2:

最初の列、最初の列

1 列目、2 列目

結果を表示
最初の列、最初の列 最初の列、2 番目の列
例 3:

第一列第一栏	第一列第二栏
第二列第一栏	第二列第二栏

1 列目、1 列目

1 列目、2 列目

2列目、2列目

第一列第一栏	第一列第二栏
第二列第一栏	第二列第二栏

結果の表示
1 列目、1 列目 1 列目、2 列目 2 列目、1 列目 2 列目、2 列目
例 4:

1 列目、1 列目

1 列目、2 列目

第一列第一栏	第一列第二栏	第一列第三栏
第二列第一栏	第二列第二栏	第二列第三栏

2 列目、2 列目

1 列目、1 列目

1 列目、2 列目

1 列目 3 列目

第一列第一栏	第一列 之 第二栏及第三栏
第二列及第三列 之 第一栏	第二列第二栏	第二列第三栏
	第三列第二栏	第三列第三栏

2 列目、1 列目

2 列目、2 列目 td>

2 番目列、3 列

結果の表示
1 列、1 列、1 列、1 列 2 列、1 列、列 3、列 2、列 1、列 2、列 2、列 2、列 3

例 6

元のコード

最初の列の 2 番目と 3 番目の列
2 列目と 3 列目の 1 列目

最初の列の 1 列目
2 列目の 2 列目	2 列目の 3 列目
3 列目、2 列目	3 列目、3 列目

結果を表示

Month	% of IE visitor	% of NC visitor
August	61%	39%
July	54%	46%
June	52%	48%

1列目、1列目、2列目と3列目、2列目と3列目、1列目、2列目、2列目、2列目、3列目、3列目、2 番目の列。3 つの列のうちの 3 番目の列 。
■ : と
は両方ともセルをマークします。唯一の違いは、

月

IE 訪問者の割合

NC 訪問者の割合

8 月

61%

39%

7 月

54%

46%

6 月

52%

48%

結果を表示 月 IE 訪問者の割合 NC 訪問者の割合 8 月 61% 39% 7 月 54% 46% 6 月 52% 48% ■ : は、テーブルの上にグリッド線の開始列を追加するのと同じように、テーブルのタイトル列をマークするために使用されます。 もちろん、通常はフォームのタイトルを格納するために使用される下に配置することもできます。 パラメータ設定 (一般的に使用されます): 例: align="TOP" テーブルに対するテーブルのタイトル列の位置 (水平)。 オプションの値は、left、center、right、top、middle、bottom です。 align="bottom" を使用する場合、タイトル列 ソースコード内で を の先頭に置くか末尾に置くかに関係なく、テーブルは下に表示されます。 valign="TOP" テーブルに対するテーブルのタイトル列の位置 (上と下) オプションの値は次のとおりです。 align="TOP" または align="BOTTOM" と同じです。機能は繰り返しますが、タイトル バーを下に配置し、右または左に貼り付けたい場合は、2 つのパラメータを併用できます。 valign は HTML 3.0 でのみ開始されたパラメータであるため、パラメータが 1 つしかない場合は align を優先してください。 例: Web 速度 8 月の訪問者ブラウザ使用状況分析

月	IE 訪問者の割合	NC 訪問者の割合
8 月	61%	39%