Bagaimana untuk menetapkan pusat jadual html-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan pusat jadual html

PHPz

Lepaskan： 2023-04-25 10:55:29

asal

10803 orang telah melayarinya

HTML ialah bahasa penanda hiperteks yang digunakan secara meluas yang digunakan untuk membuat halaman web. Dalam reka bentuk web, jadual adalah elemen yang sangat berguna untuk memaparkan data. Apabila mereka bentuk jadual, keperluan biasa adalah untuk memusatkannya. Berikut ialah cara untuk memusatkan jadual dalam HTML.

1. Gunakan helaian gaya CSS

Selepas mencipta jadual dalam HTML, anda boleh memusatkan jadual dengan mudah menggunakan helaian gaya CSS. Dalam helaian gaya, anda boleh menggunakan atribut "margin: auto" untuk memusatkan jadual.

Sebagai contoh, kod berikut menetapkan jadual kepada lebar 80% dan memusatkannya pada halaman.

<!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>

Salin selepas log masuk

Dalam kod di atas, kami mencipta jadual dan menetapkan lebarnya kepada 80%. Seterusnya, gunakan atribut "margin: auto" untuk memusatkan jadual.

2. Gunakan atribut HTML

Selain menggunakan helaian gaya CSS, anda juga boleh menetapkan atribut secara langsung dalam elemen jadual HTML untuk memusatkan jadual. Di bawah ialah contoh kod tentang cara memusatkan jadual dalam 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>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan teg HTML

di luar jadual untuk memusatkan jadual. Kaedah ini mudah dan intuitif, sesuai untuk reka bentuk web kecil.

Ringkasan

Jadual dalam HTML ialah elemen reka bentuk web biasa dan jadual berpusat ialah keperluan reka bentuk biasa. Untuk memusatkan jadual, anda boleh menggunakan helaian gaya CSS atau sifat HTML. Menggunakan helaian gaya CSS memerlukan beberapa kemahiran asas, tetapi juga menghasilkan kebolehskalaan yang lebih baik dan merupakan amalan terbaik yang telah lama wujud. Menggunakan atribut HTML untuk memusatkan jadual adalah lebih mudah, tetapi boleh menyebabkan masalah untuk reka bentuk web yang kompleks. Oleh itu, apabila mereka bentuk mana-mana halaman web, seseorang mesti mempertimbangkan kaedah mana yang hendak digunakan.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan pusat jadual html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!