브라우저 창 중앙에 고정 너비의 표를 표시하고 싶습니다. 이제 나는
<table width="200" align="center">
그러나 Visual Studio 2008은 다음 줄에 경고를 표시합니다.
'align'속성은 오래된 것으로 간주됩니다. 새로운 구성이 권장됩니다.
동일한 레이아웃을 얻으려면 테이블에 어떤 CSS 스타일을 적용해야합니까?
브라우저 창 중앙에 고정 너비의 표를 표시하고 싶습니다. 이제 나는
<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>
단순한. 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 (적어도)에서는 테이블을 포함하여 페이지의 모든 것을 중앙에 배치합니다.
나는 이것을 배우는 중이며 마침내 나를 위해 일한 것은 먼저 3 개의 행이있는 테이블을 만드는 것이 었습니다. 왼쪽 및 오른쪽 행의 여백을 50 %로 설정합니다. 그런 다음 중앙 "테이블 행"의 "테이블 데이터"내에 단일 행, 고정 너비 테이블을 넣습니다.
<style>
.abc {
text-align: center;
}
</style>
<table class="abc">
<tr>
<td>Item1</td>
<td>Item2</td>
</tr>
</table>
기본적으로 다음과 같이 작동합니다.
<table align="center">
...
그러나 CSS를 사용하여 더 나은 방법으로 수행 할 수 있으며 웹 페이지에 동적 동작을 제공하고 응답 성이 있으므로 CSS를 사용하는 더 나은 방법이 될 것입니다.
<table style="text-align:center;">
또한 페이지에 표만 표시해야하는 경우에는 아래와 같이 body 태그 정렬 만하면됩니다.
<body style="text-align:center;">
<table>
...
</table>
다른 제안이 있으면 알려주세요. 확실히 이것에 당신을 도울 것입니다. 또한 부트 스트랩 기능을 사용하면 더 쉽고 상호 작용할 수 있습니다.