HTML 테이블 셀 안의 텍스트를 가운데 정렬하려면 CSS의 text-align 속성을 사용해야 합니다. 과거에는 <table> 태그의 align 속성을 사용했지만, 이 속성은 HTML5에서 더 이상 지원되지 않으므로(deprecated) 사용하지 않는 것이 좋습니다. 대신 CSS를 활용해 텍스트 정렬을 처리하는 것이 표준적인 방법입니다.
text-align 속성으로 셀 정렬하기
테이블 셀은 <td> 태그로 구성되므로, 이 태그에 text-align 속성을 적용하면 됩니다. 이때 CSS를 추가하는 가장 간단한 방법은 style 속성(인라인 스타일)을 사용하는 것입니다.
style 속성은 요소에 인라인 스타일을 지정하는 역할을 하며, 다음과 같이 <td> 태그와 함께 사용합니다.
<td style="text-align:center">가운데 정렬된 텍스트</td>
text-align의 주요 값
text-align 속성에 설정할 수 있는 대표적인 값은 다음과 같습니다.
- left – 왼쪽 정렬 (기본값)
- center – 가운데 정렬
- right – 오른쪽 정렬
style 속성 사용 시 주의사항
style 속성으로 지정한 스타일은 전역(global)으로 설정된 스타일보다 우선 적용됩니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일시트에서 정의한 스타일보다 인라인 스타일이 우선순위가 높으므로, 의도치 않은 스타일 덮어쓰기가 발생하지 않도록 주의해야 합니다.
예제 코드
다음 코드를 실행하면 테이블 셀의 텍스트가 가운데 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
width: 300px;
}
</style>
</head>
<body>
<h1>Our Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td style="text-align:center">NetBeans</td>
<td style="text-align:center">MySQL</td>
</tr>
</table>
</body>
</html>실행 결과
위 예제를 브라우저에서 실행하면 'NetBeans'와 'MySQL' 텍스트가 각각의 셀에서 가운데 정렬되어 표시됩니다. 헤더 셀(<th>)은 기본적으로 가운데 정렬되지만, 일반 데이터 셀(<td>)은 기본값이 왼쪽 정렬이므로 위와 같이 text-align: center를 직접 지정해 주어야 합니다.