Rumah > Artikel > hujung hadapan web > Bagaimana untuk memusatkan jadual dengan CSS?
Bagaimana untuk memusatkan jadual dengan CSS?
- 王林ke hadapan
- 2023-09-13 08:21:021941semak imbas
Teg f5d188ed2c074f8b944552db028f98a1 digunakan untuk mencipta komponen tradisional dalam HTML yang dipanggil jadual. Apabila mereka bentuk halaman web, mengetahui cara meningkatkan visualisasi keseluruhan reka bentuk anda adalah penting. Menjajarkan meja tengah adalah salah satu aspek penting. Tutorial ini akan mengajar kita cara memusatkan jadual menggunakan CSS.
Gunakan atribut margin-kiri dan margin-kanan
Ini ialah cara popular untuk menjajarkan elemen jadual di tengah dalam HTML dan CSS. Sifat jidar kiri dan jidar kanan CSS digunakan untuk menetapkan jidar kiri dan kanan unsur masing-masing. Margin mencipta ruang di luar sempadan elemen, dengan berkesan menolak elemen itu daripada elemen lain pada halaman.
Nilai atribut boleh ditetapkan menggunakan nilai panjang (cth., px, em, cm), peratusan atau nilai yang dipratakrifkan secara automatik, warisan atau parap.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table-container,
th,
td {
border: 2px solid rgb(96, 100, 218);
}
.table-container {
width: 70vw;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table class="table-container">
<th>Name</th>
<th>id</th>
<th>Salary</th>
<tr>
<td>Suranjan</td>
<td>12475142</td>
<td>32000</td>
</tr>
</table>
</body>
</html>
Penerangan
Kod ialah fail HTML yang mencipta jadual dengan tiga lajur: Nama, id dan Gaji. Lebar kelas "bekas meja" jadual ialah 70% daripada lebar ruang pandang dan berpusat pada halaman. Sel pengepala (nama, id dan gaji) dan sel jadual mempunyai sempadan pepejal 2 piksel dengan warna rgb(96, 100, 218).
Jadual mempunyai baris data, yang mengandungi nama "Suranjan", id ialah 12475142, dan gaji ialah 32000.
Gunakan atribut grid
Kaedah biasa lain ialah menggunakan atribut grid untuk menjajarkan jadual di tengah-tengah. Grid ialah elemen dua dimensi HTML dan CSS yang boleh kita gunakan untuk membuat baris dan lajur. Jika kami mula-mula mengisytiharkan jadual sebagai elemen grid, kami kemudian boleh menjajarkan jadual di tengah menggunakan sifat item tempat grid. Sifat item tempat sebenarnya menjajarkan grid secara mendatar dan menegak ke tengah.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table-container,
th,
td {
border: 2px solid rgb(96, 100, 218);
}
.table-container {
width: 70vw;
}
body{
display: grid;
place-items: center;
}
</style>
</head>
<body>
<table class="table-container">
<th>Name</th>
<th>country</th>
<th>Occupation</th>
<tr>
<td>Tom Holland</td>
<td>USA</td>
<td>Software Developer</td>
</tr>
</table>
</body>
</html>
Penerangan
Ini ialah kod HTML asas untuk membuat jadual dengan tiga lajur - nama, negara dan pekerjaan. Jadual mempunyai baris data yang mengandungi nilai untuk nama (Tom Holland), negara (Amerika Syarikat), dan pekerjaan (Pembangun Perisian).
Gaya CSS yang ditakrifkan dalam bahagian kepala HTML menetapkan sempadan jadual, sel jadual (th, td) dan jadual itu sendiri (class="table-container") kepada warna RGB pepejal 2px ( 96, 100, 218). Lebar meja ditetapkan kepada 70vw (70% daripada lebar ruang pandang). Bahagian badan ditetapkan untuk muncul sebagai grid dan memusatkan item pada halaman.
Gunakan sifat Flexbox
Kaedah lain yang sangat popular ialah menggunakan sifat CSS flexbox untuk menjajarkan jadual di tengah. Flexbox ialah elemen responsif untuk HTML dan CSS. Flexbox mempunyai sifat tertentu seperti item asing, justify-content, dsb. yang boleh kita gunakan untuk memusatkan jadual. Pengaturcara sering mendapati kaedah ini cara yang paling mudah untuk memusatkan jadual.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table-container,
th,
td {
border: 2px solid rgb(96, 100, 218);
}
.table-container {
width: 70vw;
}
body{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<table class="table-container">
<th>Name</th>
<th>class</th>
<th>Subject</th>
<tr>
<td>Suranjan</td>
<td>12</td>
<td>Mathematics</td>
</tr>
</table>
</body>
</html>
Penerangan
Kod ini ialah fail HTML yang mencipta jadual dengan tiga lajur: Nama (nama), id (nombor) dan Gaji (gaji). Jadual mempunyai kelas bernama "bekas meja" dengan lebar 70% daripada lebar ruang pandang. Sel pengepala (Nama, id dan Gaji) dan sel jadual semuanya mempunyai sempadan pepejal 2px dengan warna rgb(96, 100, 218). Jadual mempunyai satu baris data, termasuk nama "Suranjan", nombor 12475142, dan gaji 32,000.
Isi utama dokumen HTML mempunyai paparan gaya CSS: flex, menjadikan badan utama sebagai bekas yang fleksibel. Arah lentur gaya CSS: baris menetapkan arah item bekas flex kepada baris. Gaya CSS menjajarkan item dan item pusat justify-kandungan secara menegak dan mendatar.
KESIMPULAN
Dalam artikel ini, kami belajar cara memusatkan jadual dengan bantuan CSS. Dalam tutorial ini, kami melihat penggunaan sifat margin, grid, flexbox dan banyak lagi. Daripada semua kaedah yang dibincangkan, Flexbox harus digunakan. Ini kerana kotak flex lebih mudah dan responsif kepada elemen UI.
Atas ialah kandungan terperinci Bagaimana untuk memusatkan jadual dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!