Table Colspan กับ Table Rowspan

Table Colspan กับ Table Rowspan
ในบทความนี้ เรามาดูความแตกต่างระหว่าง Table Colspan กับ Table Rowspan ซึ่งทั้งสองเป็นการกำหนดคุณสมบัติของตาราง



- Colspan เป็นการผสานคอลัมน์

- Rowspan เป็นการผสานแถว

Colspan
การผสานคอมลัมน์ 2 คอลัมน์
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Doesystem</td>
  <td>088 88 888</td>
  <td>088 88 889</td>
</tr>
</table>



  
Name
  
Telephone


  
Doesystem
  
088 88 888
  
088 88 889





การผสานคอมลัมน์ 3 คอลัมน์
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="3">Telephone</th>
</tr>
<tr>
  <td>Doesystem</td>
  <td>088 88 888</td>
  <td>088 88 889</td>
  <td>088 88 890</td>
</tr>
</table>



  
Name
  
Telephone


  
Doesystem
  
088 88 888
  
088 88 889
  
088 88 890


Rowspan
การผสานแถว 2 แถว
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Doesystem</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>088 88 888</td>
</tr>
<tr>
  <td>088 88 889</td>
</tr>
</table>




  
First Name:
  
Doesystem


  
Telephone:
  
088 88 888


  
088 88 889





การผสานแถว 3 แถว
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Doesystem</td>
</tr>
<tr>
  <th rowspan="3">Telephone:</th>
  <td>088 88 888</td>
</tr>
<tr>
  <td>088 88 889</td>
</tr>
<tr>
  <td>088 88 890</td>
</tr>
</table>




  
First Name:
  
Doesystem


  
Telephone:
  
088 88 888


  
088 88 889


  
088 88 890



การนำ Table Colspan กับ Table Rowspan มาใช้ร่วมกัน
<table border="1">
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
	</tr>
	<tr>
		<td rowspan="2">Row 1 Cell 1</td>
		<td>Row 1 Cell 2</td>
		<td>Row 1 Cell 3</td>
	</tr>
	<tr>
		<td>Row 2 Cell 2</td>
		<td>Row 2 Cell 3</td>
	</tr>
	<tr>
		<td colspan="3">Row 3 Cell 1</td>
	</tr>
</table>




Column 1
Column 2
Column 3

Row 1 Cell 1
Row 1 Cell 2
Row 1 Cell 3
Row 2 Cell 2
Row 2 Cell 3
Row 3 Cell 1