คำสั่ง Colspan และ Rowspan ใน HTML คืออะไร

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

User avatar
chatee supasand
PHP VIP Members
PHP VIP Members
Posts: 1663
Joined: 04/06/2019 10:06 am

คำสั่ง Colspan และ Rowspan ใน HTML คืออะไร

Post by chatee supasand » 05/02/2020 2:30 pm

Colspan และ Rowspan เป็นคำสั่ง คำสั่งนึงในแท็ค <table> ในภาษา HTML สำหรับสร้างเว็บไซต์ ซึ่งในการสร้างตารางนั้นมีคำสั่งหลายๆคำสั่งในการกำหนดรูปแบบของตารางโดย Colspan และ Rowspan ก็เป็นหนึ่งในนั้นที่ใช้กำหนดรูปแบบ เรามาดูกันว่า Colspan และ Rowspan คืออะไรใช้งานอย่างไร

Colspan เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าที่เรากำหนด โดยเริ่มต้นที่ Colspan ="1"
รูปแบบการใช้งานคือ <td colspan = "number">
number คือการกำหนดจำนวนคอลัมน์ที่จะรวมเข้าด้วยกัน
ปล. Colspan="0" นั้นคือการบอกให้เบราว์เซอร์ขยายเซลล์ไปยังคอลัมน์สุดท้ายของกลุ่มคอลัมน์ โดยจะมีเพียง เบราว์เซอร์ Firefox เท่านั้นที่รองรับ colspan = "0"

ตัวอย่าง code

Code: Select all

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  width : 100px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td colspan="2">3</td>
  </tr>
</table>
 
</body>
</html>
จากตัวอย่างได้กำหนด colspan="2" จึงจะเห็นว่ามีการรวม คอลัมน์ 1และ2 เข้าด้วยกัน ตามภาพด้านล่าง
colspan.png
colspan.png (1.39 KiB) Viewed 1597 times

จาก Colspan ที่เป็นกำหนดคอลัมน์แล้ว มาดู rowspan ซึ่งจะกำหนดแถว
Rowspan เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้
รูปแบบการใช้งานคือ <td rowspan = "number">
number คือการกำหนดจำนวนแถวที่จะรวมเข้าด้วยกัน
ปล. rowspan="0" นั้นคือการบอกให้เบราว์เซอร์ขยายเซลล์ไปยังแถวสุดท้ายของกลุ่มแถว Chrome, Firefox และ Opera 12 (และเวอร์ชั่นก่อนหน้า) รองรับ rowspan = "0" ด้วย

ตัวอย่าง code

Code: Select all

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

<table>
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  
</table>
 
</body>
</html>
จากตัวอย่างได้กำหนด rowspan="2" จึงจะเห็นว่ามีการรวม แถว 1และ2 เข้าด้วยกัน ตามภาพด้านล่าง
rowspan.png
rowspan.png (1.46 KiB) Viewed 1597 times
ตัวอย่างการสร้างใบ ส่งของ โดยใช้ colspan และ rowspan กำหนดตาราง

Code: Select all

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table width="500">
      <tbody>
      <tr height="25">
        <td colspan="5" align="center"> ใบส่งของ</td>
      </tr>
      
      <tr height="25">
        <td width = "20%" rowspan="2">รหัสสินค้า</td>
        <td width = "30%" rowspan="2">รายการ</td>
      	<td width = "25%" colspan="2">ราคา</td>
      	<td width = "25%" rowspan="2">หมายเหตุ</td>
        
      </tr>
      <tr height="25">
        <td>บาท</td>
        <td>สต.</td>
      </tr>
      
      <tr>
      	<td height="100"></td>
      	<td></td>
      	<td></td>
      	<td></td>
        <td rowspan="2" ></td>
      </tr>
      
      <tr>
        <td colspan="2" height="25">
        รวมเป็นเงิน :
        </td>
      </tr>
      
      <tr>
        <td colspan="5" height="25">
        ผู้รับของ :
        </td>
      </tr>
      <tr>
        <td colspan="5" height="25">
        ผู้ส่ง :
        </td>
      </tr>
      </tbody>
</table>
</body>
</html>
ผลลัพธ์รูปตัวอย่าง
2.png
2.png (6.33 KiB) Viewed 1582 times
อ้างอิง
https://www.w3schools.com/tags/att_td_colspan.asp
https://www.w3schools.com/tags/att_td_rowspan.asp
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang
Image

  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML CSS”

Who is online

Users browsing this forum: No registered users and 23 guests