จะรวมเซลล์ตารางใน HTML ได้อย่างไร?

ในการผสานเซลล์ใน HTML ให้ใช้แอตทริบิวต์ colspan และ rowspan แอตทริบิวต์ rowspan ใช้สำหรับจำนวนแถวที่เซลล์ควรขยาย ในขณะที่แอตทริบิวต์ colspan ใช้สำหรับคอลัมน์จำนวนหนึ่งที่เซลล์ควรขยาย

แอตทริบิวต์ทั้งสองจะอยู่ภายในแท็ก ตัวเลขจะเป็นค่าตัวเลข เช่น 2 สำหรับ 2 แถวถ้า rowspan, 2 สำหรับ 2 คอลัมน์ถ้าคอลัมน์มีช่วง

ตัวอย่าง

ก่อนอื่น เราจะมาดูวิธีการสร้างตารางในรูปแบบ HTML ที่มี 3 แถว 3 คอลัมน์

<!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>

ผลลัพธ์

จะรวมเซลล์ตารางใน HTML ได้อย่างไร?

ตัวอย่าง

มาผสานเซลล์โดยใช้แอตทริบิวต์ colspan และ rowspan

<!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 colspan="2"></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>

ผลลัพธ์

จะรวมเซลล์ตารางใน HTML ได้อย่างไร?