CSS Tables(테이블)

테이블은 일반적으로 테이블 데이터를 표시하는 데 사용됩니다.

CSS 스타일 시트로

스타일이나 속성이 없는 테이블을 구축하면HTML 테이블을 사용하지 않는 경우, 브라우저는 경계선 없이 표시합니다. 테이블을 스타일링하면 외관을 크게 개선할 수 있습니다.

이후의 각 섹션에서는 CSS를 사용하여 테이블 요소의 레이아웃과 표현 방식을 제어하여 고급하고 일관된 테이블을 생성하는 방법을 설명할 것입니다.

테이블에 경계선 추가

CSS border속성은 테이블 경계선을 정의하는 최선의 방법입니다.

아래의 예제는 검은색 경계선을 설정합니다<table>，<th>와<td>요소를 사용할 수 있습니다.

table,　th,　td　{
　　　　border:　1px　solid　black;
}

테이블 경계선 축소

아래의 예제에서는 각 테이블 셀에 단일 경계선이 있고, 인접한 테이블 셀의 경계선 사이에 일정한 간격이 있습니다. 이 현상은 테이블 셀 경계선이 기본적으로 분리되어 있다는 이유로 발생합니다. 그러나, 당신은 요소를 사용하여border-collapse의 속성은 단일 테이블 경계선을 하나의 경계선으로 축소합니다<table>：

아래의 예제에서, 스타일 규칙은 테이블과 테이블 셀 요소에 1픽셀의 검은색 경계선을 적용하여 테이블 셀 경계선을 축소합니다.

table　{
　　　　border-collapse:　collapse;
}
table,　th,　td　{
　　　　border:　1px　solid　black;
}

CSS의 값으로도 테이블 셀 경계선 간의 공간을 제거할 수 있습니다border-spacing속성이 0이면, 공간을 제거하지만, 경계선을 합치지 않습니다. 그리고 당신이 설정한 경계선 border-collapse를 collapse하도록 설정합니다.

테이블 내부 공간 조정

기본적으로, 브라우저가 생성한 테이블 셀은 셀 내의 데이터를 충분히 수용할 정도로 큽니다. 셀 내용 주위에 더 많은 공간을 추가하려면, 다음과 같이 CSS padding 속성을 사용할 수 있습니다:

th,　td　{
　　　　padding:　15px;
}

border-spacing테이블의 경계선이 분리되어 있다면(기본 설정), 셀 경계선 간의 간격을 CSS 속성으로 조정할 수 있습니다.

다음 스타일 규칙은 테이블의 모든 경계선 사이에 적용됩니다10픽셀 간격:

table　{
　　　　border-spacing:　10px;
}

테이블 레이아웃 제어

기본적으로, 테이블은 포함된 데이터를 위한 공간을 확장하고 축소합니다. 테이블에 데이터가 채워지면, 공간이 남아있으면 데이터는 계속 확장됩니다. 그러나, 때로는 테이블에 고정된 너비를 설정하여 레이아웃을 관리해야 할 때가 있습니다.

CSS 테이블을 사용하여 이 작업을 수행할 수 있습니다.-layout 속성을 사용하여 이 작업을 수행할 수 있습니다. 이 속성은 테이블 셀, 행 및 열을 배치하는 알고리즘을 정의합니다. 이 속성은 두 가지 중 하나의 값을 취합니다:

• auto —자동 테이블 레이아웃 알고리즘을 사용합니다. 이 알고리즘을 사용하면 테이블 및 셀의 너비를 내용에 맞게 조정할 수 있습니다. 이것은 기본 값입니다.

• fixed -고정 테이블 레이아웃 알고리즘을 사용합니다. 이 알고리즘에서, 테이블의 수평 레이아웃은 셀의 내용에 따라 değil, 테이블의 너비와 열의 너비 및 경계나 셀 간격에 따라 결정됩니다.

다음 예제에서, 스타일 규칙은 테이블이 고정 레이아웃 알고리즘을 사용하여 레이아웃되었으며,300픽셀의 고정 너비.

table　{
　　　　width:　300px;
　　　　table-layout:　fixed;
}

이 table-layout 속성의 고정 값이 있으면, 대형 테이블에서 사용자는 테이블의 어떤 부분도 볼 수 없으며, 브라우저가 전체 테이블을 표현할 때까지 테이블의 어떤 부분도 볼 수 없습니다.

공백 셀을 처리합니다

이 empty-cellsCSS 속성은 경계를 제어하며, 테이블에 명확한 내용이 없을 때 분리된 경계 모델 셀 배경을 렌더링합니다.

이 속성은 세 가지 중 하나의 값을 취할 수 있습니다: show, hide 또는 inherit.

다음 스타일 규칙은 table 요소에서 공백 셀을 숨깁니다.

table　{
　　　　border-collapse:　separate;
　　　　empty-cells:　hide;
}

테이블 제목의 위치를 제어합니다

이 caption-sideCSS 속성을 사용하여 테이블 제목 상자의 수직 위치를 설정할 수 있습니다.

다음 스타일 규칙은 테이블 제목을 그 부모 테이블 아래에 배치합니다. 그러나,字幕 텍스트의 수평 정렬 방식을 변경하려면 이text-align속성.

caption　{
　　　　caption-side:　bottom;
}