초보 웹 디자이너라면 테이블 셀 안에 텍스트를 가운데에 배치하는 방법에 대해 궁금한 점이있을 것입니다. 이 가이드를 통해 몇 분 안에이 기술을 습득하십시오. 이전에 시도한 적이 없더라도 쉽습니다.
시작하기
셀 내부의 텍스트 가운데 맞추기는 웹 페이지의 다른 요소에 텍스트 를 가운데 맞춤하는 것처럼 CSS를 사용하는 것이 가장 좋습니다. 그러나 시작하기 전에 정확히 중심에두기를 원하는 것을 결정해야합니다. 테이블을 사용하면 테이블의 모든 셀을 포함하여 여러 옵션을 사용할 수 있습니다. 테이블의 모든 헤더 셀은 테이블 헤드, 테이블 본문 또는 테이블 피트의 모든 셀에 있습니다. 테이블 내의 특정 셀 또는 셀 세트를 센터링 할 수도 있습니다.
또한 문서의 머리 부분에 내부 스타일 시트 를 만들거나 외부 스타일 시트 로 문서에 첨부해야합니다. 스타일 시트를 그 스타일 시트의 중심에 놓습니다.
표의 모든 셀을 중앙에 배치하는 방법
스타일 시트에 다음 행을 추가하십시오.
td, th {텍스트 정렬 : 중심; }표의 각 셀 셀을 중앙에 배치하는 방법
스타일 시트에 다음 행을 추가하십시오.
th {텍스트 정렬 : 중심; }테이블 헤드, 바디 또는 풋의 모든 셀 중앙에 배치
이러한 셀을 가운데에 배치하려면 ,
및 와 같이 항상 사용되지는 않는 테이블 태그를 추가해야합니다. 그런 다음 테이블 헤드, 몸체 및 발을 식별하기 위해 테이블 셀을이 태그로 묶습니다. 그 후 스타일 시트에 다음을 추가합니다. thead thad, thead td {text-align : center; } tbody th, tbody td {텍스트 정렬 : 중심; } tfoot th, tfoot td {text-align : center; }중앙에 놓지 않으려는 영역의 스타일을 제거하십시오.
표의 특정 셀을 가운데 맞춤하는 방법
이렇게하려면 가운데 맞춤을 적용 할 셀에 클래스를 설정해야합니다.
중앙 정렬 할 테이블 셀에 다음 특성을 추가하십시오.
그런 다음 스타일 시트에 다음을 추가하십시오.
.centered-cell {text-align : center; }이 클래스를 테이블의 셀에 추가 할 수 있습니다.
마무리
어떤 스타일의 표 셀에서도 이러한 스타일을 사용하는 것을 주저하지 마십시오. 병합 된 셀이나 단일 셀에서 사용할 수 있으며 텍스트는 가운데에 배치됩니다.