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

 

 

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

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

 

 

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

 

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

 

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

 

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

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

 

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

 

 

table 정렬하기

 

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

 

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

 

 [css 기초] float 속성에 대하여

 

 

table 중앙 정렬 방법

 

 

1. width 값을 설정함

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

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

 

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

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

 

 margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)

 

 

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

 

 

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

 

table.htm

 <!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>
 <table>
<tr>
<td>월요일</td>
<td>화요일</td>
<td>수요일</td>
</tr>
</table>
 

</body>
</html>

 

실행 화면입니다:

 

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

 

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

 

 

 

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

 

table2.htm

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

<body>
 
 <table style="border: 1px solid red; width:60%; height: 100px; margin: auto; text-align: center;">
<tr>
<td style="border: 1px solid red;">월요일</td>
<td style="border: 1px solid red;">화요일</td>
<td style="border: 1px solid red;">수요일</td>
</tr>
</table>
 

</body>
</html>

 

 

 

 

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

 

[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

DIV 태그를 이용하여 레이아웃 만들기

 

지구별에
css 2014.04.12 09:00
Powerd by Tistory, designed by criuce