Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan pusat jadual html
Bagaimana untuk menetapkan pusat jadual html
- PHPzasal
- 2023-04-25 10:28:4710756semak imbas
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>
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>
Dalam kod di atas, kami menggunakan teg HTML
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!