HTML - ตาราง

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

ตาราง HTML ถูกสร้างขึ้นโดยใช้ไฟล์ <table> ซึ่งแท็ก <tr> แท็กใช้ในการสร้างแถวตารางและ <td>แท็กใช้ในการสร้างเซลล์ข้อมูล องค์ประกอบภายใต้ <td> เป็นแบบปกติและจัดชิดซ้ายตามค่าเริ่มต้น

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ที่นี่ borderเป็นแอตทริบิวต์ของแท็ก <table> และใช้เพื่อใส่เส้นขอบให้กับเซลล์ทั้งหมด หากคุณไม่ต้องการเส้นขอบคุณสามารถใช้ border = "0"

ส่วนหัวของตาราง

สามารถกำหนดส่วนหัวของตารางได้โดยใช้ <th>แท็ก แท็กนี้จะถูกนำไปแทนที่แท็ก <td> ซึ่งใช้แทนเซลล์ข้อมูลจริง โดยปกติคุณจะวางแถวบนสุดของคุณเป็นส่วนหัวของตารางดังที่แสดงด้านล่างมิฉะนั้นคุณสามารถใช้องค์ประกอบ <th> ในแถวใดก็ได้ ส่วนหัวซึ่งกำหนดไว้ในแท็ก <th> จะอยู่กึ่งกลางและเป็นตัวหนาตามค่าเริ่มต้น

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

Cellpadding และ Cellspacing แอตทริบิวต์

มีสองแอตทริบิวต์ที่เรียกว่าcellpaddingและcellspacingซึ่งคุณจะใช้เพื่อปรับพื้นที่สีขาวในเซลล์ตารางของคุณ แอตทริบิวต์ cellspacing กำหนดช่องว่างระหว่างเซลล์ตารางในขณะที่ cellpadding แสดงระยะห่างระหว่างขอบเซลล์กับเนื้อหาภายในเซลล์

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
	
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติ Colspan และ Rowspan

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

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <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>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

พื้นหลังตาราง

คุณสามารถตั้งค่าพื้นหลังตารางโดยใช้หนึ่งในสองวิธีต่อไปนี้ -

  • bgcolor แอตทริบิวต์ - คุณสามารถกำหนดสีพื้นหลังสำหรับทั้งตารางหรือเพียงเซลล์เดียว

  • background แอตทริบิวต์ - คุณสามารถตั้งค่าภาพพื้นหลังสำหรับทั้งตารางหรือเพียงเซลล์เดียว

คุณยังสามารถตั้งค่าสีเส้นขอบได้โดยใช้ bordercolor แอตทริบิวต์

Note- เดอะbgcolor , พื้นหลังและborderColorแอตทริบิวต์เลิกใน HTML5 อย่าใช้แอตทริบิวต์เหล่านี้

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <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>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

นี่คือตัวอย่างของการใช้ backgroundแอตทริบิวต์ ในที่นี้เราจะใช้รูปภาพที่มีอยู่ในไดเร็กทอรี / images

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" background = "/images/test.png">
         <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>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ ภาพพื้นหลังที่นี่ใช้ไม่ได้กับส่วนหัวของตาราง

ความสูงและความกว้างของโต๊ะ

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

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
	
   <body>
      <table border = "1" width = "400" height = "150">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

คำบรรยายตาราง

captionแท็กจะทำหน้าที่เป็นชื่อเรื่องหรือคำอธิบายสำหรับตารางและจะปรากฏที่ด้านบนสุดของตาราง แท็กนี้เลิกใช้แล้วใน HTML / XHTML เวอร์ชันใหม่กว่า

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Caption</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <caption>This is the caption</caption>
         
         <tr>
            <td>row 1, column 1</td><td>row 1, columnn 2</td>
         </tr>
         
         <tr>
            <td>row 2, column 1</td><td>row 2, columnn 2</td>
         </tr>
      </table>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ส่วนหัวของตารางเนื้อหาและส่วนท้าย

ตารางสามารถแบ่งออกเป็นสามส่วน ได้แก่ ส่วนหัวลำตัวและส่วนเท้า ส่วนหัวและส่วนท้ายค่อนข้างคล้ายกับส่วนหัวและส่วนท้ายในเอกสารที่ประมวลผลด้วยคำซึ่งยังคงเหมือนเดิมสำหรับทุกหน้าในขณะที่เนื้อหาเป็นตัวยึดเนื้อหาหลักของตาราง

องค์ประกอบสามประการในการแยกส่วนหัวลำตัวและส่วนท้ายของโต๊ะ ได้แก่ -

  • <thead> - เพื่อสร้างส่วนหัวตารางแยกต่างหาก

  • <tbody> - เพื่อระบุตัวหลักของตาราง

  • <tfoot> - เพื่อสร้างส่วนท้ายของตารางแยกต่างหาก

ตารางอาจมีองค์ประกอบ <tbody> หลายรายการเพื่อระบุหน้าหรือกลุ่มข้อมูลต่างๆ แต่เป็นที่น่าสังเกตว่าแท็ก <thead> และ <tfoot> ควรปรากฏก่อน <tbody>

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>
         
         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>
         
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>
         
      </table>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตารางที่ซ้อนกัน

คุณสามารถใช้ตารางหนึ่งในตารางอื่น ไม่เพียง แต่ตารางเท่านั้นที่คุณสามารถใช้แท็กเกือบทั้งหมดในแท็กข้อมูลตาราง <td> ได้

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างของการใช้ตารางอื่นและแท็กอื่น ๆ ภายในเซลล์ตาราง

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -