HTML 테이블 속성을 사용하면 HTML 테이블을보다 강력하게 제어 할 수 있습니다. 표를 더 흥미롭게 만들고 페이지의 모양을 바꾸기 위해 많은 특성을 사용할 수 있습니다.
HTML TABLE 요소 속성
HTML5에서 요소는 전역 속성과 하나의 다른 속성을 사용합니다. 그리고 그것만이 가치를 가지기 위해 바뀌 었습니다. 1 또는 비어 있습니다 (예 : border = ""). 테두리의 너비를 변경하려면 국경 너비 CSS 속성.
유효한 HTML5 테이블 속성에 대해 알아 보려면 아래를 참조하십시오.
또한 HTML5에서 쓸모 없게 된 HTML 4.01 사양의 일부인 여러 속성이 있습니다.
- - CSS 사용
심테이블의 속성TD과TH집단. - - CSS 속성 사용
국경 간격책상 위에. - - CSS 스타일 사용
border-color : 검정색;과국경 풍책상 위에. - - CSS 스타일 사용
border-color : 검정색;과국경 풍테이블의 해당 요소에 - - 대신 테이블의 구조를
표제또는 전체 테이블을그림그것을FIGCAPTION. 또는 설명이 필요하지 않도록 테이블의 구조를 단순화 할 수 있습니다. - - CSS 사용
폭재산.
HTML 4.01에서 더 이상 사용되지 않으며 HTML5에서는 더 이상 사용되지 않는 속성입니다.
HTML 4.01 표 속성에 대해 자세히 알아보십시오.
정렬하다- CSS 사용여유대신 속성.
또한 HTML 사양의 일부가 아닌 몇 가지 특성이 있습니다. 지원하는 브라우저가 HTML을 처리 할 수 있고 유효한 HTML을 신경 쓰지 않는다는 것을 알고 있으면이 속성을 사용하십시오.
- - CSS 속성 사용
배경색대신. 테두리 색- CSS 속성 사용테두리 색대신.국경 색- CSS 속성 사용테두리 색대신.bordercolordark- CSS 속성 사용테두리 색대신.칼-이 속성에 대한 대안은 없습니다.신장- CSS 속성 사용신장대신.- - CSS 속성 사용
여유대신. - - CSS 속성 사용
여유대신. - - CSS 속성 사용
공백대신. - - CSS 속성 사용
수직 정렬대신.
브라우저 특정 TABLE 속성에 대해 자세히 알아보십시오.
HTML5 TABLE 요소 속성
위에서 언급했듯이 HTML5에서 유효한 전역 속성 이외의 속성은 하나뿐입니다. 표 요소: 경계.
그만큼 경계 속성은 전체 표와 그 안에있는 모든 셀 주위의 경계를 정의하는 데 사용됩니다. HTML5 사양에 포함 시킬지 여부에 대해서는 약간의 의문이 있지만 단순한 스타일 함축 의미를 넘어서서 테이블 구조에 대한 정보를 제공했기 때문에 남아있었습니다.
추가하려면 경계 속성에서 값을 1 경계가있는 경우는 빈 상태 (존재하지 않는 경우). 대부분의 브라우저는 0 테두리가없는 경우 및 테두리 값의 너비를 픽셀 단위로 선언하는 다른 정수 값 (2, 3, 30, 500 등)이지만 HTML5에서는 더 이상 사용되지 않습니다. 대신 CSS 테두리 스타일 속성을 사용하여 테두리 너비 및 기타 스타일을 정의해야합니다.
경계선이있는 표를 만들려면 다음을 작성하십시오.
border = "1" >
국경이있는 테이블입니다.
HTML5에는 쓸모없는 HTML 4.01 속성이 있습니다. HTML 4.01 문서를 작성하려는 경우 해당 문서를 배울 수 있습니다. 그렇지 않으면 무시할 수 있습니다. 이러한 속성의 대부분은 위에서 설명한 대안을 가지고 있습니다.
HTML5 (및 HTML 4.01)에서 유효한 요소의 속성을 설명합니다. 이것은표 HTML 4.01에서는 유효하지만 HTML5에서는 더 이상 사용되지 않는 속성 HTML 4.01 문서를 계속 작성하는 경우이 속성을 사용할 수 있지만 대부분 HTML5로 이동할 때 미래를 보장 할 수있는 대안을 제공합니다.
유효한 HTML 4.01 속성
위에서 설명한 속성입니다. HTML5와 HTML 4.01의 유일한 차이점은 픽셀 단위로 테두리의 너비를 정의하기 위해 정수 (0, 1, 2, 15, 20, 200 등)를 지정할 수 있다는 것입니다.
5px 테두리가있는 표를 작성하려면 다음을 작성하십시오.
<> border = "5" > 이 표는 5 픽셀의 테두리를 가지고 있습니다.
테두리가있는 두 개의 테이블 예를 참조하십시오.
속성은 셀 테두리와 셀 내용 사이의 간격을 정의합니다. 기본값은 2 픽셀입니다. 설정셀 팟딩 에0 내용과 테두리 사이에 공백을 넣지 않으려면
셀 패딩을 20으로 설정하려면 다음을 작성하십시오.
<> 셀 팟딩 = "20" > 이 테이블에는 셀 팟딩 20의. 셀 테두리는 20 픽셀 씩 분리됩니다.
셀 패딩이있는 테이블의 예보기
이 속성은 표 셀과 셀 내용 사이의 간격을 정의합니다. 처럼셀 팟딩, 기본값은 2 픽셀로 설정되므로 설정해야합니다.0 셀 간격을 원하지 않으면
테이블에 셀 간격을 추가하려면 다음을 작성하십시오.
<> cellspacing = "20" > 이 테이블에는 셀 페이싱 20의. 셀은 20 픽셀 씩 분리됩니다.
셀 페이스가있는 표보기
이 속성은 표 바깥 쪽 경계선 부분을 표시합니다.네면, 한면, 위, 아래, 왼쪽 및 오른쪽 모두에서 테이블을 프레임 할 수 있습니다.
다음은 왼쪽 테두리 만있는 HTML 테이블입니다.
frame = "lhs" >
이 테이블 가질 것이다 오직 왼쪽 프레임.
아래쪽 프레임의 다른 예는 다음과 같습니다.
프레임 = "아래" >
이 테이블에는 아래쪽에 프레임이 있습니다.
프레임이있는 테이블을 확인하십시오.
속성은틀 속성을 사용하면 표의 셀 주위에 테두리에만 영향을 미칩니다. 모든 셀, 열 사이, 그룹 간 규칙을 설정할 수 있습니다.TBODY 과TFOOT 또는 없음.
행 사이에만 행이있는 테이블을 작성하려면 다음을 작성하십시오.
규칙 = "행" >
이 4x4 표에는 행이 아닌 열 와 개요 규칙 속성.
그리고 열 사이에 줄이있는 다른 것도 있습니다.
rules = "cols" >
이것은 테이블 어디서? 기둥 아르 강조 표시된
다음은 규칙이있는 테이블의 예입니다.
이 속성은 화면 판독기 및 표를 읽는 데 어려움이있는 다른 사용자 에이전트에 대한 표에 대한 정보를 제공합니다. 를 사용하려면개요 속성을 사용하려면 표에 대한 간략한 설명을 작성하고이를 속성의 값으로 지정하십시오. 요약은 대부분의 표준 웹 브라우저에서 웹 페이지에 표시되지 않습니다.
다음은 간단한 테이블에 요약을 작성하는 방법입니다.
<> summary = "필러 정보가 들어있는 샘플 테이블입니다.이 표의 목적은 요약을 보여주는 것입니다." > 열 1 행 1 열 2 행 1 열 1 행 2 열 2 행 2
요약이있는 표보기
이 속성은 표의 너비를 픽셀 또는 컨테이너 요소의 백분율로 정의합니다. 만약폭 가 설정되어 있지 않으면 테이블은 내용을 표시하는 데 필요한만큼의 공간 만 차지합니다. 최대 너비는 부모 요소의 너비와 같습니다.
특정 너비의 테이블을 픽셀 단위로 작성하려면 다음과 같이 작성하십시오.
<> 너비 = "300" > 이 테이블은 컨테이너의 너비의 80 %입니다.
상위 요소의 비율 인 너비의 테이블을 작성하려면 다음을 작성하십시오.
<> 너비 = "80 %" > 이 테이블은 컨테이너의 너비의 80 %입니다.
너비가있는 표의 예보기
사용되지 않는 HTML 4.01 TABLE 속성
한 가지 속성이 있습니다.표 요소는 HTML 4.01에서 더 이상 사용되지 않으며 HTML5에서는 더 이상 사용되지 않습니다.정렬하다. 이 특성을 사용하면 테이블의 옆에있는 텍스트에 상대적인 페이지의 위치를 설정할 수 있습니다. 이 속성은 HTML 4.01에서 더 이상 사용되지 않으므로 사용하지 않아야합니다. 대신 CSS 속성이나margin-left : 자동; 과margin-right : 자동; 스타일. 그만큼흙손 속성은 사용자에게 더 가까운 결과를 제공합니다.정렬하다 속성이 제공되지만 페이지 내용의 나머지 부분이 표시되는 방식에 영향을 줄 수 있습니다. 그만큼margin-right : 자동; 과margin-left : 자동; W3C가 대안으로 권장하는 것입니다.
다음은 사용되지 않는 예제입니다.정렬하다 속성:
<> align = "right" > 이 테이블은 오른쪽 정렬됩니다. 텍스트가 왼쪽으로 이동합니다.
다음을 사용하여 사용되지 않는 예제를보십시오.정렬하다 속성.
그리고 유효한 (비추천) HTML로 동일한 효과를 얻으려면 다음과 같이 작성하십시오.
<> style = "float : right;" > 이 테이블은 오른쪽 정렬됩니다. 텍스트가 왼쪽으로 이동합니다.
다음은표 HTML 사양의 일부가 아닌 속성
이전 정보는 HTML 4.01에서 유효하지만 HTML5에서는 더 이상 사용되지 않는 HTML 요소의 속성을 설명합니다.
다음은표 현재 사양에서 유효하지 않은 속성 페이지가 유효한지 여부와 사용자가 이러한 요소를 지원하는 브라우저를 사용하는지 여부에 신경 쓰지 않는다면이 요소를 사용할 수 있습니다. 그러나 대부분의 브라우저는 최신 브라우저에서 지원되지 않거나보다 표준을 준수하는 대안을 가지고 있습니다.
이러한 속성의 사용은 권장하지 않습니다. 귀하의 HTML 테이블에.
속성은 CSS가 널리 지원되기 전에 포함되었던 이전 속성입니다. 테이블의 배경색을 변경할 수 있습니다. 색상 이름이나 16 진 코드를 설정할 수 있습니다. 이 속성은 많은 브라우저에서 여전히 작동하지만 미래 보장 된 HTML의 경우이를 사용하지 말고 대신 CSS를 사용해야합니다.
이 속성의 더 나은 대안은 style 속성입니다.
표의 배경색을 변경하려면 다음을 작성하십시오.
<> style = "background-color : #ccc;" > 이 표는 회색 배경입니다.
마찬가지로bgcolor 속성,테두리 색 속성을 사용하면 속성의 색상을 변경할 수 있습니다. 이 특성은 Internet Explorer에서만 지원됩니다. 대신 border-color 스타일 속성을 사용해야합니다.
테이블의 테두리 색상을 변경하려면 다음을 작성하십시오.
style = "border-color : red;" >
이 테이블에는 빨간색 테두리가 있습니다.
그만큼국경 색 과bordercolordark 테이블 주위에 3D 테두리를 만들 수 있도록 Internet Explorer에 특성이 포함되었습니다. 그러나 IE8 이상에서는 IE7 표준 모드 및 Quirks 모드에서만 지원됩니다. Microsoft는 이러한 속성이 더 이상 지원되지 않는다고 말합니다.
짧은 시간 동안,칼 속성의표 요소는 브라우저가 테이블에있는 컬럼의 수를 알 수 있도록 제안되었습니다. 전제는 큰 테이블의 렌더링 속도를 높이는 데 도움이된다는 것입니다. 그러나 Internet Explorer에서만 구현되었으며 IE8 이상에서는 IE7 표준 모드 및 Quirks 모드에서만 지원됩니다.
거기에폭 속성 (HTML5에서 사용되지 않음) 많은 사람들이신장 테이블에 대한 속성도 있습니다. 그러나 표가 CSS의 내용 또는 정의 된 너비의 너비를 따르거나폭 속성에서 높이를 제한 할 수 없습니다. 그래서 대신 브라우저는신장 속성을 사용하여 테이블의 최소 높이를 정의하십시오. 테이블 높이가 그 높이보다 높으면 키가 커집니다. 하지만 재산을 사용해야합니다.
CSS 사용신장 속성을 사용하면 CSS 속성을 사용하여 초과 콘텐츠가있을 때 발생하는 상황을 정의하는 경우 높이를 제한 할 수 있습니다.
테이블의 최소 높이를 설정하려면 다음을 작성하십시오.
<> 스타일 = "높이 : 30em;" > 이 테이블은 적어도 30 ems입니다.
두 속성 및 왼쪽 / 오른쪽 주위 공간 추가 (hspace) 및 위 / 아래 (vspace) 테이블의. 대신 style 속성을 사용해야합니다.
세로 공간을 20 픽셀로, 가로 공간을 40 픽셀로 설정하려면 다음과 같이 작성하십시오.
<> style = "margin : 20px 40px;" 이 테이블은 20 픽셀의 공간 및 40 픽셀의 공간을 갖는다.
속성은 테이블의 내용이 부모 요소 또는 윈도우의 가장자리에서 래핑할지 아니면 가로 스크롤을 강제 실행 할지를 정의하는 부울 속성입니다. 대신 CSS 속성을 사용하여 각 표 셀의 배치 특성을 정의해야합니다.
많은 텍스트가 포함 된 열을 줄 바꾸지 않으려면 다음과 같이 작성하십시오.
<> style = "white-space : nowrap;" > 내용이 풍부한 칼럼입니다. 그러나 컨테이너보다 넓더라도 텍스트는 다음 행으로 넘어 가지 않아야하며 브라우저 창을 모든 내용을보기 위해 가로로 스크롤해야합니다.
마지막으로, 속성은 각 셀의 내용이 셀 내에서 수직으로 정렬되는 방법을 정의합니다. 이 잘못된 속성 대신 정렬을 변경하려는 각 셀에서 CSS 속성을 사용해야합니다. 셀의 내용이 다른 큰 셀에 의해 생성 된 사용 가능한 공간보다 작지 않으면이 스타일의 효과를 알 수 없습니다.
셀을 강제로 맨 아래로 정렬하려면 (기본값은 중간이 아님) 다음을 작성하십시오.
이 셀은 나머지 부분보다 길기 때문에 높이가 더 높아집니다. 따라서 수직으로 정렬 된 셀이 아래쪽에 정렬되어 있음을 알 수 있습니다. <> style = "vertical-align : bottom;" > 하단 내용. 가운데 내용.
