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