[html] 표를 가로로 정렬하는 CSS 방법

Program / 글쓴이

브라우저 창 중앙에 고정 너비의 표를 표시하고 싶습니다. 이제 나는

<table width="200" align="center">

그러나 Visual Studio 2008은 다음 줄에 경고를 표시합니다.

‘align’속성은 오래된 것으로 간주됩니다. 새로운 구성이 권장됩니다.

동일한 레이아웃을 얻으려면 테이블에 어떤 CSS 스타일을 적용해야합니까?

답변

이론적으로 스티븐이 맞습니다 .

CSS를 사용하여 표를 중앙에 배치하는 “올바른”방법입니다. 표준 브라우저는 왼쪽과 오른쪽 여백이 같으면 테이블을 중앙에 배치해야합니다. 이를 수행하는 가장 간단한 방법은 왼쪽 및 오른쪽 여백을 “자동”으로 설정하는 것입니다. 따라서 스타일 시트에 다음과 같이 작성할 수 있습니다.

table
{
    margin-left: auto;
    margin-right: auto;
}

그러나이 답변의 시작 부분에 언급 된 기사는 테이블을 중앙에 배치하는 다른 방법을 제공합니다.

우아한 CSS 크로스 브라우저 솔루션 : MSIE 6 (Quirks 및 Standards), Mozilla, Opera 및 Netscape 4.x에서도 명시적인 너비를 설정하지 않고도 작동합니다.

div.centered
{
    text-align: center;
}

div.centered table
{
    margin: 0 auto;
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

답변

이 시도:

<table width="200" style="margin-left:auto;margin-right:auto">

답변

단순한. IE6 이상에서는 “margin : 0 auto;”로 테이블을 중앙에 배치합니다. 페이지가 “표준”모드로 렌더링되는 경우 이를 위해서는 다음과 같은 유효한 doctype 선언이 필요합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

또는 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

사실, IE5.5 이하는 여전히 테이블을 중앙에 배치하는 것을 거부하지만, 특히 페이지가 여전히 테이블을 왼쪽 정렬 된 상태로 작동하는 경우에는 그렇게 할 수 있습니다. 지금까지 IE5.5 이하의 사용자는 이상한 모양의 웹 사이트에 상당히 익숙하다고 생각합니다.하지만 이러한 시각적 결함으로 인해 사이트를 사용할 수 없게되는 일이 없도록해야합니다.

즐거운 코딩 되세요!

편집 : 죄송합니다. IE6 이상을 “표준”렌더링 모드로 전환하기 위해 “엄격한”doctype이 필요하지 않다는 점을 지적해야합니다. 위에서 게시 한 doctype 예제에서 그렇게 보일 수 있다는 것을 깨달았습니다. 예를 들어,이 doctype 선언은 물론 동일하게 작동합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

답변

오늘날 세계에서는 이단 일 수 있지만 과거에는 다음과 같은 비 css 코드를 수행했습니다. 이것은 오늘날의 브라우저를 포함한 모든 것에서 작동하지만-내가 말했듯이-오늘날의 세계에서는 이단입니다.

<center>
<table>
   ...
</table>
</center>

당신이 필요로하는 것은 당신이 테이블을 중앙에두고 싶고 그 사람이 오래된 브라우저를 사용하고 있다는 것을 알려주는 방법입니다. 그런 다음 테이블 주위에 “<center>”명령을 삽입하십시오. 그렇지 않으면-CSS를 사용하십시오.

놀랍게도-모든 것을 BODY 영역의 중앙에 배치하려면 표준을 사용할 수 있습니다.

text-align: center;

css 명령과 IE8 (적어도)에서는 테이블을 포함하여 페이지의 모든 것을 중앙에 배치합니다.

답변

style="text-align:center;"

(나는 생각한다)

아니면 그냥 무시해도됩니다. 여전히 작동합니다.

답변

이것은 작동합니다.

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

답변

나는 이것을 배우는 중이며 마침내 나를 위해 일한 것은 먼저 3 개의 행이있는 테이블을 만드는 것이 었습니다. 왼쪽 및 오른쪽 행의 여백을 50 %로 설정합니다. 그런 다음 중앙 “테이블 행”의 “테이블 데이터”내에 단일 행, 고정 너비 테이블을 넣습니다.