Bagaimana untuk memusatkan jadual html

HTML, sebagai bahasa penanda, digunakan secara meluas untuk membina halaman web. Antaranya, jadual merupakan elemen penting untuk menyusun data dan susun atur. Semasa mereka bentuk jadual, pemusatan ialah gaya yang biasa digunakan untuk menjadikan halaman lebih cantik dan boleh dibaca. Artikel ini akan memperkenalkan cara untuk mencapai kesan pemusatan jadual HTML melalui helaian gaya CSS.

1. Pengetahuan tentang jadual HTML

Dalam HTML, teg jadual digunakan untuk mentakrifkan jadual, teg tr digunakan untuk menentukan baris jadual dan teg td digunakan untuk menentukan sel. Kita boleh menggunakan helaian gaya CSS untuk menukar gaya elemen, termasuk susun atur jadual, warna, sempadan, dsb.

2. Pemusatan mendatar

1. Gunakan atribut penjajaran teks

Anda boleh menggunakan atribut penjajaran teks untuk mendatar teks. Contohnya:

jadual{

text-align:center;

}

Ini akan memusatkan semua kandungan teks dalam teg jadual, tanpa mengira sel mana ia terletak.

2. Gunakan atribut margin

Kita juga boleh menggunakan atribut margin CSS untuk mencapai pemusatan mendatar. Anda boleh menambah gaya berikut pada elemen luar jadual:

jadual{

margin: 0 auto;

}

Ini akan memusatkan jadual secara mendatar dalam elemen yang mengandunginya, tanpa mengira saiz dan lokasi. Kaedah ini berfungsi untuk memusatkan satu jadual pada satu masa.

3. Pemusatan menegak

1. Gunakan atribut penjajaran menegak

Kita juga boleh menggunakan atribut penjajaran menegak CSS untuk mencapai pemusatan menegak, yang boleh dilakukan dalam Tetapkannya dalam gaya sel atau jadual (pengepala), contohnya:

td{

vertical-align: middle;

}

Ini akan memusatkan kandungan dalam sel secara menegak. Jika ditetapkan dalam pengepala (th), pengepala akan dipusatkan secara menegak.

Nota: Menggunakan atribut penjajaran menegak hanya boleh ditetapkan dalam sel, bukan pada jadual itu sendiri.

2. Gunakan sifat ketinggian garis

Anda boleh mencapai pemusatan menegak dengan menggunakan sifat ketinggian garis CSS. Contohnya:

td{

line-height: 100px;

}

menetapkan ketinggian sel kepada 100px dan kemudian menetapkan ketinggian baris kepada 100px, yang akan memusatkan kandungan sel secara menegak. Ambil perhatian bahawa kaedah ini hanya berfungsi untuk satu baris data.

Kesimpulan

Melalui helaian gaya CSS, kita boleh mencapai kesan pemusatan jadual HTML dengan mudah. Bagi kebanyakan pereka bentuk dan pembangun, kaedah pemusatan mendatar agak mudah, manakala kaedah pemusatan menegak boleh menjadi lebih sukar. Adalah disyorkan agar anda mencuba kaedah yang berbeza untuk mencari kaedah yang paling sesuai untuk senario khusus anda.

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