Bagaimana untuk menetapkan lebar tetap untuk td dalam jadual?-html tutorial-php.cn

Bagaimana untuk menetapkan lebar tetap untuk td dalam jadual?

WBOY

Lepaskan： 2023-08-28 22:13:21

ke hadapan

1282 orang telah melayarinya

Bagaimana untuk menetapkan lebar tetap untuk td dalam jadual?

Jadual HTML ialah elemen utama pembangunan web. Ia digunakan untuk menyusun dan memaparkan data dalam format berstruktur. Jadual HTML membenarkan pembangun web menyusun data ke dalam baris dan lajur sel.

Jadual HTML dibuat menggunakan teg

, yang merangkumi beberapa komponen seperti ,

Tatabahasa

Berikut ialah sintaks untuk menetapkan

Setiap komponen mempunyai sifat uniknya.

Fahami

elemen dalam jadual HTML

Elemen teg

mentakrifkan sel data dalam jadual HTML. Ia digunakan untuk memaparkan data seperti teks, imej atau pautan dalam jadual. Setiap elemen

terkandung dalam elemen

<td style="width: 20px; >content</td>

Salin selepas log masuk

Kod ini akan menetapkan lebar elemen

Kepentingan menetapkan lebar tetap untuk elemen

Adalah penting bahawa jadual kelihatan konsisten dan mudah dibaca apabila ia dipaparkan pada halaman web. Kita boleh mencapai ini dengan mudah dengan menetapkan lebar tetap untuk elemen

dalam jadual. Dengan cara ini, kami boleh memastikan bahawa setiap lajur dalam jadual mempunyai lebar yang sama, memudahkan pengguna mencari maklumat.

Cara berbeza untuk menetapkan lebar tetap untuk

elemen

Berikut ialah beberapa cara biasa untuk menetapkan lebar tetap untuk

elemen dalam jadual HTML.

1. Gunakan atribut lebar

Elemen gaya HTML mengandungi atribut lebar. Untuk menetapkan lebar sel, kami boleh meletakkan jenis atribut ini di dalam teg

dengan nilai atribut dalam piksel. Contohnya -

<td width="100px">Data</td>

Salin selepas log masuk

Contoh 1

Berikut ialah contoh penggunaan atribut lebar untuk menetapkan lebar teg

<!DOCTYPE html>
<html>
<body>
   <h3>Set the width of <td> element using the width attribute </h2>
   <table border = "1px">
      <tr>
         <td width="100px">Content 1</td>
         <td width="150px">Content 2</td>
      </tr>
      <tr>
         <td>Content 3</td>
         <td>Content 4</td>
      </tr>
      <tr>
         <td>Content 5</td>
         <td>Content 6</td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

2. Gunakan CSS

Dengan menggunakan CSS, kami boleh menetapkan lebar tetap untuk elemen

. Untuk ini kita boleh menggunakan atribut lebar. Contohnya -

td {
   width: 100px;
}

Salin selepas log masuk

Kod ini akan menetapkan lebar elemen

kepada 100px;

Contoh 2

Berikut ialah contoh menetapkan lebar tag

menggunakan CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      td {
         width: 100px;
      }
   </style>
</head>
<body>
   <h3>Set the width of <td> element using CSS</h3>
   <table border = "1px">
      <tr>
         <td>Content 1</td>
         <td>Content 2</td>
      </tr>
      <tr>
         <td>Content 3</td>
         <td>Content 4</td>
      </tr>
      <tr>
         <td>Content 5</td>
         <td>Content 6</td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

3. Gunakan atribut susun atur jadual

Kami juga boleh menetapkan lebar tetap untuk elemen

menggunakan atribut susun atur jadual. Dengan menetapkan atribut susun atur jadual kepada tetap, kami memastikan setiap elemen

dalam jadual mempunyai lebar yang sama. Contohnya -

table {
   table-layout: fixed;
}
td {
   width: 150px;
}

Salin selepas log masuk

Kod ini akan menetapkan lebar elemen

Terjemahan bahasa Cina bagi

Contoh 3

ialah:

Contoh 3

Ini ialah contoh menggunakan atribut susun atur jadual untuk menetapkan lebar label

<!DOCTYPE html>
<html>
<head>
   <style>
      h1, h3 {
         text-align: center;
      }
      table {
         width: 100%;
         table-layout: fixed;
         border-collapse: collapse;
      }
            
      th, td {
         padding: 5px;
         text-align: left;
         border: 1px solid;
      }
            
      td {
         width: 150px;
      }
   </style>
</head>
<body>
   <h3>Fixed <td> Width using the table-layout Property</h3>
   <table>
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Ram Kumar</td>
            <td>35</td>
            <td>Male</td>
         </tr>
         <tr>
            <td>Kavita</td>
            <td>28</td>
            <td>Female</td>
         </tr>
         <tr>
            <td>Bob Johnson</td>
            <td>42</td>
            <td>Male</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam artikel ini, kami membincangkan beberapa cara untuk menetapkan lebar tetap, seperti sifat lebar, CSS dan sifat susun atur jadual. Menetapkan lebar tetap untuk elemen

dalam jadual HTML adalah penting untuk memastikan jadual kelihatan konsisten dan mudah dibaca.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar tetap untuk td dalam jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!