Bagaimana untuk memusatkan jadual dengan CSS?-tutorial css-php.cn

如何用 CSS 使表格居中？

Teg

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 bagi

Contoh

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>

Salin selepas log masuk

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 bagi

Contoh

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>

Salin selepas log masuk

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 bagi

Contoh

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>

Salin selepas log masuk

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!

sumber：tutorialspoint.com

Artikel sebelumnya：Bagaimana untuk melaksanakan saiz imej penyesuaian menggunakan unit CSS Viewport vmin dan vw Artikel seterusnya：Cara menggunakan unit CSS Viewport vw untuk melaksanakan susun atur penyesuaian mendatar

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang