[html/css] table 중앙 정렬하기

[html/css] table 중앙 정렬하기

부제: align, center를 사용하지 않고 css로 table 정렬하기

제가 10년 전에 html을 배울 당시에는, 문서를 정렬할 때 <center>와 <align>을 썼던 기억이 나는데요

이 둘은 일부 브라우저에서 지원이 되긴 하지만, 다른 브라우저에서는 깨져 보일 수 있고

현재는 소위 사용을 권장하지 않는 퇴화(deprecated) 태그라고 부르더군요.

이전 시간에는 inline 요소를 정렬하는 text-align에 대해 배웠는데요

오늘은 block 요소인 table 정렬하는 방법에 대해 알아보겠습니다.

table 정렬하기

table을 오른쪽 왼쪽 정렬하기는 쉽습니다. float: left, float: right 속성을 사용하면 됩니다.

하지만 float에는 중앙 정렬 값이 없습니다.

table 중앙 정렬 방법

1. width 값을 설정함

2. margin: auto 혹은 margin-right: auto; margin-left: auto; 로 설정함.

3. auto를 쓰려면 doc type(문서 타입)을 선언해야 함.

*주의: width: 100% 는 가로 화면 전체를 차지하므로 auto값이 적용되지 않음.

* IE에서는 margin: auto 값을 쓰려면 항상 doctype(문서 타입)을 선언해주어야 합니다.

*table 안에 있는 요소(글자나 이미지 등)를 정렬하려면 text-align 속성을 사용하면 됩니다.

그럼 실제 html을 작성하여 css에 스타일을 적용해 보겠습니다

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

table, td{
border: 1px solid red
}

table{
width:60%;
height: 100px;
margin: auto;

text-align: center;
}

</style>
</head>

</body>
</html>

실행 화면입니다:

테이블은 width 60% 에 margin: auto를 설정해 화면 중앙에 배치했고

월요일, 화요일, 수요일은 text-align: center로 중앙 정렬했습니다.

인라인 방식으로 스타일을 적용할 때는 다음처럼 하면 됩니다.

<!DOCTYPE html>
<html>
<head>
</head>

</body>
</html>

다음 시간에는 div 정렬하는 방법을 써 볼게요~

[html/css]브라우저 기본값의 초기화 리셋(reset.css)의 개념 (1)	2014.04.21
[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) (0)	2014.04.15
[html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법) (7)	2014.04.09
[html/css] a: link, a: visited, a: active, a: hover 사용법 자세히 알기 (1)	2014.04.08
[html/css] display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이) (6)	2014.04.05