Apakah yang dimaksudkan dengan rowspan dan colspan jadual dalam HTML?-html tutorial-php.cn

Apakah yang dimaksudkan dengan rowspan dan colspan jadual dalam HTML?

王林

Lepaskan： 2023-08-31 23:33:05

ke hadapan

2837 orang telah melayarinya

rowspan dan colspan ialah atribut teg

. Ini digunakan untuk menentukan bilangan baris atau lajur yang mana sel harus digabungkan. Atribut rowspan digunakan untuk menggabungkan baris dan atribut colspan digunakan untuk menggabungkan lajur jadual dalam HTML.

Atribut ini hendaklah diletakkan di dalam teg

seperti yang ditunjukkan dalam imej di bawah -

Apakah yang dimaksudkan dengan rowspan dan colspan jadual dalam HTML?

tatabahasa

Berikut ialah sintaks untuk menggabungkan sel jadual dalam HTML -

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

Salin selepas log masuk

Contoh 1 - Tetapan Span Baris

Sekarang mari kita lihat contoh di mana rentang baris salah satu lajur ditetapkan kepada 2.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      table,
      tr,
      th,
      td {
         border: 1px solid black;
         padding: 20px;
      }
   </style>
</head>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th>First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td></td>
         <td rowspan="2"></td>
      </tr>
      <tr>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

Berikut ialah output program contoh di atas

Contoh 2 - Tetapan colspan

Diberikan di bawah adalah contoh penggabungan sel lajur jadual dalam HTML.

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

Salin selepas log masuk

Berikut ialah output program contoh di atas.

Contoh 3

Berikut ialah satu lagi contoh penggabungan baris dan lajur dengan menetapkan nilai sifat rowspan dan colspan dalam satu program

<html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         width: 100px;
         height: 50px;
      }
   </style>
</head>
<body>
   <h1>Heading</h1>
   <table>
      <tr>
         <td colspan="2" ></td>
      </tr>
      <tr>
         <td ></td>
         <td></td>
      </tr>
      <tr>
         <td colspan="2"></td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

Berikut ialah output program contoh di atas.

Atas ialah kandungan terperinci Apakah yang dimaksudkan dengan rowspan dan colspan jadual dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!