HTML 테이블 마크업에 대한 자세한 설명(초보자에게 적합)_HTML/Xhtml_웹페이지 제작

테이블>


■

：
这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。
是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用，属容器标记的还有其他。
用以标示表格列（row）
두 번째 열, 첫 번째 열
show 결과 첫 번째 열, 첫 번째 열 첫 번째 열, 두 번째 열 두 번째 열, 첫 번째 열 두 번째 열, 두 번째 열 예 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）的表格

:
이 세 가지 태그는 테이블을 정의하는 데 가장 중요한 태그입니다. 이 세 가지만 익히면 충분하다고 할 수 있습니다.
은 컨테이너 태그입니다. 즉, 테이블임을 선언하는 데 사용되며 다른 테이블 태그는 해당 범위 내에서만 적용할 수 있습니다.

第一列第一栏

第一列第二栏

은 테이블 열(행)을 표시하는 데 사용됩니다. 은 셀(셀)을 표시하는 데 사용됩니다. 매개변수 설정(일반적으로 사용됨): 예: width="400" 표 너비는 절대값(예: 80)과 상대값(예: 80%)을 허용합니다. border="1" 테이블 테두리 두께는 브라우저마다 다르므로 지정해 주세요. cellspacing="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 전용" 매개변수 설정(일반적으로 사용됨): 예:

두 번째 열, 첫 번째 열

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:

셀이 하나만 있는 표

결과 표시 셀이 하나만 있는 테이블 예 2:

첫 번째 열, 첫 번째 열

첫 번째 열, 두 번째 열

결과 표시
첫 번째 열, 첫 번째 열 첫 번째 열, 두 번째 열
예 3:

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

첫 번째 열, 첫 번째 열

첫 번째 열, 두 번째 열

두 번째 열, 두 번째 열

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

결과 표시
첫 번째 열, 첫 번째 열 첫 번째 열, 두 번째 열 두 번째 열, 첫 번째 열 두 번째 열, 두 번째 열
예 4:

첫 번째 열, 첫 번째 열

첫 번째 열, 두 번째 열

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

두 번째 열, 두 번째 열

첫 번째 열, 첫 번째 열

첫 번째 열, 두 번째 열

첫 번째 열 세 번째 열

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

두 번째 열, 첫 번째 열

두 번째 열, 두 번째 열 td>

두 번째 열, 세 번째 열

결과 표시
첫 번째 열, 첫 번째 열, 첫 번째 열, 첫 번째 열 열 2, 열 1, 3열, 2열, 1열, 2열, 2열, 2열, 3열

예 6

원본 코드

두 번째 및 세 번째 열의 첫 번째 열

첫 번째 열의 첫 번째 열	첫 번째 열의 두 번째 및 세 번째 열
두 번째 열의 두 번째 열	두 번째 열의 세 번째 열
세 번째 열, 두 번째 열	세 번째 열, 세 번째 열

결과 보기

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

첫 번째 열, 첫 번째 열, 두 번째 열과 세 번째 열, 두 번째 열과 세 번째 열, 첫 번째 열, 두 번째 열, 두 번째 열, 두 번째 열, 세 번째 열, 세 번째 열 , 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" 테이블을 기준으로 한 테이블 제목 열의 위치(가로)입니다. 선택 값은 왼쪽, 가운데, 오른쪽, 위쪽, 중간, 아래쪽입니다. 제목 열 소스 코드에서 의 머리에 를 넣었는지, 아니면 꼬리에 넣었는지에 관계없이 아래에 표가 나타납니다. valign="TOP" 테이블을 기준으로 한 테이블 제목 열의 위치(상단 및 하단)입니다. 선택 값은 상단, 하단입니다. align="TOP" 또는 align="BOTTOM"과 같습니다. 기능이 반복되지만 제목 표시줄을 아래에 배치하고 오른쪽이나 왼쪽에 붙여넣기를 원하는 경우 두 매개변수를 함께 사용할 수 있습니다. 매개변수가 하나만 있는 경우 valign은 HTML 3.0에서만 시작되는 매개변수이므로 align을 선호하세요. 예: 웹 속도 ​​8월 방문자 브라우저 사용량 분석

월	IE 방문자 비율	NC 방문자 비율
8월	61%	39%