HTML 테이블의 중심을 설정하는 방법-프런트엔드 Q&A-php.cn

집

HTML 테이블의 중심을 설정하는 방법

Apr 25, 2023 am 10:28 AM

HTML은 웹 페이지를 만드는 데 널리 사용되는 하이퍼텍스트 마크업 언어입니다. 웹 디자인에서 테이블은 데이터를 표시하는 데 매우 유용한 요소입니다. 테이블을 디자인할 때 일반적으로 필요한 것은 테이블을 중앙에 배치하는 것입니다. HTML에서 표를 중앙에 배치하는 방법은 다음과 같습니다.

1. CSS 스타일시트 사용

HTML로 테이블을 생성한 후 CSS 스타일시트를 사용하여 테이블을 쉽게 중앙에 배치할 수 있습니다. 스타일시트에서 "margin: auto" 속성을 사용하여 표를 중앙에 배치할 수 있습니다.

예를 들어 다음 코드는 표 너비를 80%로 설정하고 페이지 중앙에 배치합니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
        table {
            width: 80%;
            margin: auto;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;th&gt;姓名&lt;/th&gt;
            &lt;th&gt;学号&lt;/th&gt;
            &lt;th&gt;成绩&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;小明&lt;/td&gt;
            &lt;td&gt;001&lt;/td&gt;
            &lt;td&gt;90&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;小红&lt;/td&gt;
            &lt;td&gt;002&lt;/td&gt;
            &lt;td&gt;95&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

위 코드에서는 테이블을 생성하고 너비를 80%로 설정했습니다. 다음으로 "margin: auto" 속성을 사용하여 테이블을 중앙에 배치합니다.

2. HTML 속성 사용

CSS 스타일 시트를 사용하는 것 외에도 HTML 테이블 요소에 직접 속성을 설정하여 테이블을 중앙에 배치할 수도 있습니다. 다음은 HTML에서 테이블을 중앙에 배치하는 방법에 대한 샘플 코드입니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;HTML表格居中&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;center&gt;
        &lt;table border=&quot;1&quot;&gt;
            &lt;tr&gt;
                &lt;th&gt;姓名&lt;/th&gt;
                &lt;th&gt;学号&lt;/th&gt;
                &lt;th&gt;成绩&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;小明&lt;/td&gt;
                &lt;td&gt;001&lt;/td&gt;
                &lt;td&gt;90&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;小红&lt;/td&gt;
                &lt;td&gt;002&lt;/td&gt;
                &lt;td&gt;95&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

위 코드에서는 테이블 외부에 HTML <center> 태그를 사용하여 테이블을 중앙에 배치했습니다. 이 방법은 간단하고 직관적이어서 소규모 웹 디자인에 적합합니다.

요약

HTML의 표는 일반적인 웹 디자인 요소이며 중앙에 정렬된 표는 일반적인 디자인 요구 사항입니다. 표를 중앙에 배치하려면 CSS 스타일시트나 HTML 속성을 사용할 수 있습니다. CSS 스타일시트를 사용하려면 몇 가지 기본 기술이 필요하지만 확장성이 향상되며 오랫동안 사용되어 온 모범 사례입니다. HTML 속성을 사용하여 테이블을 중앙에 배치하는 것이 더 간단하지만 복잡한 웹 디자인에서는 문제가 발생할 수 있습니다. 따라서 웹페이지를 디자인할 때 어떤 방법을 사용할 것인지 고려해야 합니다.

위 내용은 HTML 테이블의 중심을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.