Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan lebar tetap untuk td dalam jadual?

Bagaimana untuk menetapkan lebar tetap untuk td dalam jadual?

WBOYke hadapan: 2023-08-28 22:13:211214semak imbas

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>

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>

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>

2. Gunakan CSS

Dengan menggunakan CSS, kami boleh menetapkan lebar tetap untuk elemen

. Untuk ini kita boleh menggunakan atribut lebar. Contohnya -

td {
   width: 100px;
}

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>

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;
}

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>

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!

css html table td tr th

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya："Sistem Telekomunikasi Mudah Alih Universal" boleh diterjemahkan sebagai "Sistem Telekomunikasi Mudah Alih Universal"Artikel seterusnya："Sistem Telekomunikasi Mudah Alih Universal" boleh diterjemahkan sebagai "Sistem Telekomunikasi Mudah Alih Universal"

Artikel berkaitan

Lihat lagi