아래 테이블 요소를 화면 중앙으로 보내려면?
본문
테이블이 중앙 정렬 안된 예<style>
table {border:2px solid #b8064d; width:300px; height:300px; padding:10px;}
tr {}
td {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; }
div {margin-top:20px; text-align:center;}
</style>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table><div>홈짱닷컴 (homzzang.com)</div>
테이블이 중앙 정렬 된 예<style>
table {border:2px solid #b8064d; width:300px; height:300px; padding:10px;}
tr {}
td {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; }
div {margin-top:20px; text-align:center;}
</style>
<table align=center>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table><div>홈짱닷컴 (homzzang.com)</div>
[질문]
table 요소는 <table> 태그에 align=center 넣어 <table align=center>처럼 하면 중앙 정렬 됩니다.
그런데, 아래처럼 align:center를 스타일에 넣어주면 중앙 정렬 되지 않습니다. 왜 그런 건가요?
스타일을 지정해서 테이블 태그를 화면 중앙에 오려면 어떻게 해야 할까요?
<style>
table {align:center; border:2px solid #b8064d; width:300px; height:300px; padding:10px;}
tr {}
td {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; }
div {margin-top:20px; text-align:center;}
</style>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table><div>홈짱닷컴 (homzzang.com)</div>
ps.
위 소스에서 div 태그는 block 요소 태그인데, 왜 float:center 넣으면 중앙정렬이 되지 않을까요?
공부할 수록 점점 미궁에 빠지는 css ㅜㅜ
답변 4
CSS 속성에서 align이란건 없습니다.
text-align과 혼동하신거 같습니다만...
그리고 table align=center 이건 테이블 태그 속성 입니다. css 속성이 아닙니다.
table style="align:center" 이렇게 적은 거랑 같은 겁니다.
div {margin: 0 auto;width:500px;} 이걸 쓰든
table align="center" 이걸 쓰든
center 로 감싸 버리든
table width="100%" > tr > td align="center" 이런식으로 하든
뭐든 하면 됩니다. 대부분의 사이트에서 문제될 꺼리는 없습니다.
단, 중요한 것은 레이아웃적인 요소를 이해하는 것 입니다.
어떤 놈은 너비를 가져야만 하고, 어떤놈은 너비가 자동으로 계산되고, 이런 섬세한 부분을 익히고 있어야 혼란에 빠지지 않습니다.
또한 text-align은 자식 요소의 가로 정렬을 하는 것이고,
table의 align은 자기 자신의 정렬을 하는 것이고,
td의 align은 자식요소를 정렬하는 것이고,
이런 부분을 이해해야 합니다.
걍 table 감싸기 신공 ㄱㄱ
테이블 시작과 끝에
<center>
</center>
그리구 table은 쓰지마세요......div
그렇군요. 쉽게쉽게 가는 게 정답인 듯 싶네요. ^^
다른분들 말씀처럼 그냥 center 로 감싸는게 났습니다.
테이블 사용을 자제하긴 해야 하지만, 굳이 테이블로 해도 되는 데이터 값을 뿌려주는것을 div 로 힘들게 짤 필요도 사실 없습니다. (표준을 어긋난다 라는말은 이럴때 쓰는게 아니겠지요.)
http://www.w3schools.com/
이곳을 모르실때마다 찬찬히 보시는것도 많은 도움이 되실겁니다.
css 의 경우 특히나 날로 발전하고 있습니다. 마치 php,javascript 를 짜는거처럼 다양해지고 복잡해진것도 사실입니다.(물론 정교해졌기도 하구요)
그러니. 코딩을 하시거나, 짜집기를 하시거나 할때 참고하시면 나중에 도움이 많이 되실거 같네요
테이블 사용을 자제하긴 해야 하지만, 굳이 테이블로 해도 되는 데이터 값을 뿌려주는것을 div 로 힘들게 짤 필요도 사실 없습니다. (표준을 어긋난다 라는말은 이럴때 쓰는게 아니겠지요.)
http://www.w3schools.com/
이곳을 모르실때마다 찬찬히 보시는것도 많은 도움이 되실겁니다.
css 의 경우 특히나 날로 발전하고 있습니다. 마치 php,javascript 를 짜는거처럼 다양해지고 복잡해진것도 사실입니다.(물론 정교해졌기도 하구요)
그러니. 코딩을 하시거나, 짜집기를 하시거나 할때 참고하시면 나중에 도움이 많이 되실거 같네요
그렇지 않아도 요새 저 사이트 가서 틈틈이 공부 중입니다. ^^
많은 도움이 되었습니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
