Cara Memusatkan Teks dalam Sel Jadual HTML: Panduan Praktikal

Menjajarkan Sel Jadual: Panduan untuk Memusatkan Teks dalam Jadual HTML

Dalam dunia pembangunan web, jadual kekal sebagai alat yang berharga untuk menstruktur dan menyusun data. Kadangkala, anda mungkin menghadapi keperluan untuk memusatkan teks dalam sel jadual anda, secara mendatar dan menegak. Artikel ini akan memberi anda penyelesaian yang komprehensif untuk mencapai penjajaran ini.

Mendatar Memusatkan Teks Menggunakan CSS dan Gaya Sebaris

Satu kaedah berkesan untuk mendatar memusatkan teks dalam sel jadual adalah melalui gaya CSS atau atribut gaya sebaris. Dalam fail CSS anda atau dalam dokumen HTML itu sendiri, anda boleh mengubah suai sifat "text-align" kepada "center" untuk sel jadual sasaran anda:

1. Gaya CSS:

   <code class="css">td {
       text-align: center;
   }</code>

   Salin selepas log masuk

2. Atribut Gaya Sebaris:

   <code class="html"><td style="text-align: center;">Text</td></code>

   Salin selepas log masuk

Memusatkan Teks Secara Menegak Menggunakan CSS

Untuk memusatkan teks secara menegak dalam sel jadual, gunakan sifat CSS "vertical-align":

1. Gaya CSS:

   <code class="css">td {
       vertical-align: middle;
   }</code>

   Salin selepas log masuk

2. Atribut Gaya Sebaris:

   <code class="html"><td style="vertical-align: middle;">Text</td></code>

   Salin selepas log masuk

Berikut ialah contoh yang menggabungkan kedua-dua pemusatan mendatar dan menegak menggunakan CSS dan gaya sebaris:

<code class="css">td {
    height: 50px; 
    width: 50px;
}

#cssTable td {
    text-align: center; 
    vertical-align: middle;
}</code>

<code class="html"><table>
    <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
    </tr>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table></code>

Atas ialah kandungan terperinci Cara Memusatkan Teks dalam Sel Jadual HTML: Panduan Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!