Làm cách nào để hợp nhất các cột trong bảng trong HTML?

Để hợp nhất các cột của bảng trong HTML, hãy sử dụng thuộc tính colspan trong thẻ . Với điều này, hợp nhất các ô với nhau. Ví dụ:nếu bảng của bạn có 4 hàng và 4 cột, thì với thuộc tính colspan, bạn có thể dễ dàng hợp nhất 2 hoặc thậm chí 3 ô trong bảng.

Ví dụ

Bạn có thể thử chạy mã sau để hợp nhất cột bảng trong HTML. Đầu tiên, chúng ta sẽ xem cách tạo một bảng trong HTML với 3 hàng và 3 cột

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <h1>Heading</h1>
      <table>
         <tr>
            <th></th>
            <th></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>

Đầu ra

Làm cách nào để hợp nhất các cột trong bảng trong HTML?

Ví dụ

Hãy hợp nhất các cột bằng cách sử dụng thuộc tính colspan. 2 cột đầu tiên sẽ hợp nhất

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

Đầu ra

Làm cách nào để hợp nhất các cột trong bảng trong HTML?