ตารางใน HTML: คู่มือการสร้างและจัดรูปแบบตารางใน HTML

ตารางเป็นส่วนประกอบที่สำคัญใน HTML สำหรับการแสดงข้อมูลในรูปแบบโครงสร้างที่มีแถวและคอลัมน์ ใน HTML ตารางถูกสร้างขึ้นโดยใช้แท็ก <table>, <tr> และ <td>

แท็ก <table> แสดงถึงคอนเทนเนอร์ของตารางหลัก ซึ่งมีแถวและคอลัมน์ทั้งหมด แถวถูกกำหนดโดยใช้แท็ก <tr>(แถวของตาราง) ในขณะที่เซลล์ภายในแถวถูกกำหนดโดยใช้แท็ก <td>(ข้อมูลตาราง) นอกจากนี้ คุณสามารถใช้แท็ก <th>(ส่วนหัวของตาราง) เพื่อกำหนดเซลล์ส่วนหัวสำหรับตาราง

คุณสามารถใช้แอตทริบิวต์ เช่น colspan และ rowspan เพื่อผสานเซลล์ในตารางหรือขยายเซลล์ข้ามแถวและหลายคอลัมน์ นอกจากนี้ คุณสามารถใช้คุณสมบัติ CSS เพื่อปรับแต่งลักษณะที่ปรากฏและเค้าโครงของตาราง

 

ตาราง( <table>)

- <table> องค์ประกอบที่ใช้ในการสร้างตารางใน HTML

- ข้อมูลอยู่ในแถว( <tr>) และคอลัมน์( <td> หรือ <th>)

- แต่ละเซลล์ข้อมูลจะอยู่ภายใน องค์ประกอบ <td>(เซลล์ข้อมูล) หรือ <th>(เซลล์ส่วนหัว)

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

 

ส่วนหัวของคอลัมน์( <th>)

- <th> องค์ประกอบนี้ใช้เพื่อสร้างส่วนหัวของคอลัมน์ในตาราง

- โดยปกติจะอยู่ในแถวแรกของตาราง

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

 

แถวข้อมูล( <tr>):

- <tr> องค์ประกอบที่ใช้เพื่อสร้างแถวข้อมูลในตาราง

- เซลล์ข้อมูล( <td>) หรือเซลล์ส่วนหัว( <th>) จะอยู่ภายใน <tr> องค์ประกอบ เหล่านี้

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

 

การขยายคอลัมน์( colspan)

แอตทริบิวต์ colspan ใช้เพื่อกำหนดจำนวนคอลัมน์ที่เซลล์ข้อมูลหรือเซลล์ส่วนหัวจะขยายในตาราง

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

 

การแบ่งแถว( rowspan)

แอตทริบิวต์ rowspan ใช้เพื่อกำหนดจำนวนแถวที่เซลล์ข้อมูลหรือเซลล์ส่วนหัวจะขยายในตาราง

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

 

การผสานเซลล์( colspan และ rowspan)

คุณสามารถรวมทั้งสอง colspan และ rowspan แอตทริบิวต์เพื่อผสานเซลล์ในตาราง

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

 

border คุณสมบัติ

- border คุณสมบัติระบุความหนาของเส้นขอบตาราง

- ค่าของ border เป็นจำนวนเต็มที่ไม่เป็นลบ

<table border="1">  
<!-- Table rows and columns -->  
</table>  

 

cellpadding คุณสมบัติ

-, cellpadding คุณสมบัติระบุระยะห่างระหว่างเนื้อหาเซลล์และเส้นขอบของเซลล์ในตาราง

- ค่าของ cellpadding เป็นจำนวนเต็มที่ไม่เป็นลบ

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

 

cellspacing คุณสมบัติ

- cellspacing คุณสมบัติระบุระยะห่างระหว่างเซลล์ในตาราง

- ค่าของ cellspacing เป็นจำนวนเต็มที่ไม่เป็นลบ

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

 

แอตทริบิวต์และองค์ประกอบเหล่านี้ช่วยให้คุณสร้างและปรับแต่งตารางใน HTML ตามความต้องการของคุณ คุณสามารถใช้เพื่อแสดงข้อมูลอย่างชัดเจนและเป็นระเบียบบนเว็บไซต์ของคุณ