Bagaimana untuk menggabungkan sel jadual dalam HTML?-html tutorial-php.cn

Bagaimana untuk menggabungkan sel jadual dalam HTML?

王林

Lepaskan： 2023-09-10 16:09:04

ke hadapan

3030 orang telah melayarinya

Bagaimana untuk menggabungkan sel jadual dalam HTML?

Kami menggunakan atribut colspan dan rowspan untuk menggabungkan sel dalam HTML. Atribut rowspan menentukan bilangan baris yang mana sel harus digabungkan, manakala atribut colspan digunakan untuk menentukan bilangan lajur yang mana sel harus digabungkan.

Atribut ini hendaklah diletakkan di dalam tag

Tatabahasa

Berikut ialah sintaks untuk menggabungkan sel jadual dalam HTML.

<td rowspan="2">cell data</td>

Salin selepas log masuk

Contoh

Berikut ialah contoh program untuk menggabungkan sel baris jadual dalam HTML.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td >Tharun</td>
         <td rowspan="2">Content writer</td>
      </tr>
      <tr>
         <td >Akshaj</td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

Gunakan atribut colspan

Kita boleh menggabungkan sel lajur jadual menggunakan sintaks berikut.

Tatabahasa

Untuk colspan, kami menggunakan sintaks berikut.

<td colspan="2">cell data</td>

Salin selepas log masuk

Contoh

Berikut ialah contoh program untuk menggabungkan sel lajur jadual dalam HTML.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Last Name</th>
         <th>Job role</th>
      </tr>
      <tr>
         <td colspan="2" >Tharun chandra</td>
         <td >Content writer</td>
      </tr>
      <tr>
         <td colspan="2">Akshaj Vank</td>
         <td >Content writer</td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

Contoh

Berikut ialah contoh program kami untuk melaksanakan rowspan dan colspan pada jadual HTML.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td >Tharun</td>
         <td rowspan="2">Content writer</td>
      </tr>
      <tr>
         <td >Akshaj</td>
      </tr>
      <tr>
         <td colspan="2">Welcome to the company</td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menggabungkan sel jadual dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!