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

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

PHPz

풀어 주다： 2023-04-25 10:55:29

원래의

10803명이 탐색했습니다.

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

1. CSS 스타일시트 사용

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

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

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

로그인 후 복사

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

2. HTML 속성 사용

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

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

로그인 후 복사

위 코드에서는 테이블 외부에 HTML

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

요약

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

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