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