In html, บทความทั้งหมด

ในบทความนี้ ขออนุญาตแนะนำวิธีสร้างตาราง และการปรับแต่งตารางใน HTML เริ่มตั้งแต่การกำหนดแท็ก <table> การใช้ <tbody> เพื่อกำหนดขอบเขตตาราง การใช้ <tr> เพื่อกำหนดแถว และใช้ <td> เพื่อกำหนดเซลล์ลงในตาราง

ตารางใน HTML

การสร้างตารางใน HTML จะใช้ แท็ก <table> เพื่อกำหนดขอบเขตของตาราง โดยภายในตารางก็จะมีแท็กบ่งบอกส่วนต่างๆ ของตาราง ดังนี้

  • แท็ก <caption> แสดงชื่อตาราง
  • แท็ก <thead> แสดงส่วนหัวของตาราง (Table Header)
  • แท็ก <tbody> แสดงข้อมูลในตาราง (Table Body)
  • แท็ก <tfoot> แสดงส่วนสรุปข้อมูลที่อยู่ท้ายตาราง (Table Footer)
  • แท็ก <tr> คือส่วนที่ใช้แสดงแต่ละแถวของตาราง
  • แท็ก <td> เป็นส่วนที่ใช้แสดงแต่ละเซลล์ของตาราง
  • แท็ก <th> เป็นส่วนที่ใช้แสดงแต่ละเซลล์ของตารางที่ต้องการเน้น โดยข้อมูลที่อยู่ในเซลล์จะถูกทำให้เป็นตัวหนาและจัดให้อยู่กึ่งกลางอัตโนมัติ ดังนั้นแท็ก <th> จึงนิยมใช้กับเซลล์ที่อยู่หัวตาราง

ตารางในแบบง่ายๆ

สำหรับตารางแบบง่ายๆ เราไม่จำเป็นต้องใช้แท็กครบทั้งหมด ใช้เพียงแท็ก <table>, <tr> และ <td> ก็เพียงพอต่อการสร้างตารางแล้ว

ต่อไปนี้คือตัวอย่างการสร้างตารางขนาด 2×2 คือ มีแถว 2 แถว โดยแต่ละแถวมี 2 คอลัมน์

  • บรรทัดที่ 8 แท็ก <table> คือแท็กแสดงจุดเริ่มต้นของตาราง
  • บรรทัดที่ 9 แท็ก <tr> คือแท็กแสดงแถวแรกของตาราง
  • บรรทัดที่ 10 แท็ก <td></td> คือเซลล์แรกของแถวปัจจุบัน (แถวแรก)
  • บรรทัดที่ 11 แท็ก <td></td> คือเซลล์ที่สองของแถวปัจจุบัน (แถวแรก)
  • บรรทัดที่ 12 แท็ก </tr> เป็นการกำหนดว่าแถวแรกได้สิ้นสุดลงแล้ว
  • บรรทัดที่ 13 แท็ก <table> คือแท็กแสดงจุดเริ่มต้นของตาราง
  • บรรทัดที่ 14 แท็ก <tr> คือแท็กแสดงจุดเริ่มต้นของแถวที่สอง
  • บรรทัดที่ 15  แท็ก <td></td> คือเซลล์แรกของแถวปัจจุบัน (แถวที่สอง)
  • บรรทัดที่ 16 แท็ก <td></td> คือเซลล์ที่สองของแถวปัจจุบัน (แถวที่สอง)
  • บรรทัดที่ 17 แท็ก </tr> เป็นการกำหนดว่าแถวแรกได้สิ้นสุดลงแล้ว
  • บรรทัดที่ 18 แท็ก </table> บอกให้ทราบว่านี่คือจุดสิ้นสุดของตาราง

จากโค้ตตัวอย่างข้างบน หากนำไปเปิดบนบราวเซอร์ ก็จะได้ผลลัพธ์ เป็นดังรูป

thaidemy-html-13

แท็ก <table> เป็น block-element ซึ่งหมายความว่า เวลาเรากำหนดแท็ก <table> ก็จะเป็นการขึ้นบรรทัดใหม่โดยอัตโนมัติ

Attributes ของแท็ก <table>

แท็ก <table> ใช้สําหรับแสดงตารางบนเว็บเพจ ซึ่งจะเห็นว่าที่แท็กเปิด เราสามารถกำหนด Attribute เพื่อปรับความกว้างของตารางได้ เช่น width=”100%” และสามารถใช้ Attribute เพื่อ กําหนดความหนาของเส้นตาราง ด้วย border=”1″

  • Element ในที่นี้คือแท็ก <table>
  • Attributes แรกคือ width ส่วนค่า Value ในที่นี้คือ 100% หมายถึงกําหนดให้ตารางมีความ กว้าง 100% หรือถ้าต้องการกำหนดความกว้างของตารางจำนวนพิกเซลล์ก็สามารถทำได้ เช่น <table width="320px">
  • Attributes ที่สอง คือ border ส่วนค่า Value ในที่นี้คือ 1 หมายถึงกําหนดให้ตารางมีความหนาของ เส้น 1px (หรือ 1 พิกเซล)

นอกจาก width และ border แล้วแท็ก <table> ยังมี Attribute แบบอื่นๆ ที่น่าสนใจ ดังนี้

  • align ใช้สำหรับจัดเรียงตารางว่าจะให้ชิดซ้าย (left) อยู่กึ่งกลาง (center) หรือชิดขวา (right) เช่น <table align=”center”>
  • bgcolor ใช้กำหนดสีพื้นหลังของตาราง เช่น <table bgcolor=”#00f5f5″> หรือ <table bgcolor=”lightblue”>
  • bordercolor ใช้เพื่อกำหนดสีให้กับเส้นตาราง
  • cellpadding กำหนดระยะห่างระหว่างเนื้อหาที่อยู่ในเซลล์ตาราง กับขอบเซลล์ของตาราง เป็นการกำหนดว่าข้อความของแต่ละเซลล์จะอยู่ชิดกับเส้นตารางหรือไม่
  • cellspacing กำหนดระยะห่างระหว่างเซลล์ของตาราง

แสดงชื่อตารางด้วยแท็ก <caption>

หากเราต้องการแสดงชื่อตาราง ก็สามารถทำได้ง่ายๆ โดยแทรกแท็ก <caption></caption> ต่อจากแท็ก <table> ดังตัวอย่างต่อไปนี้

  • บรรทัดที่ 8 กำหนดจุดเริ่มต้นตารางด้วยการแทรกโค้ต   <table width="300px" border="1">  หมายถึง กำหนดให้ตารางกว้าง 300 พิกเซล และมีความหนาของเส้นตารางเป็น 1 พิกเซล
  • บรรทัดที่ 9 กำหนดชื่อตารางลงในแท็ก <caption></caption>

thaidemy-html-14

ปรับแต่งตาราง

ตารางที่แสดงบนเว็บเพจ เราสามารถตีเส้นตาราง โดยกําหนดความหนาของเส้น หรือปรับสีสันให้กับแต่ละส่วนของตารางได้ ดังตัวอย่างต่อไปนี้

จากข้างต้นได้ใช้ bordercolor เพื่อกําหนดสีให้เส้นขอบตาราง ซึ่งในที่นี้ใช้เป็นสี cyan สีออก ฟ้าๆ จากนั้นก็ใช้ bgcolor เพื่อเปลี่ยนสีให้กับพื้นตาราง ดังผลลัพธ์ตามรูปข้างล่างนี้

thaidemy-html-15

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

ในตารางที่มีการรูปแบบที่ซับซ้อน หรือต้องสรุปข้อมูลของตาราง เราควรแบ่งตารางออกเป็น 3 ส่วน คือ ส่วนหัวตาราง ส่วนข้อมูลตาราง และส่วนสรุปข้อมูลของตาราง ซึ่งเราจะใช้แท็ก <thead>, <tbody> และ <tfoot> แยกข้อมูลออกจากกัน ดังตัวอย่างต่อไปนี้

เมื่อนำเอาโค้ตข้างบนไปเปิดยังบราวเซอร์ เราก็จะได้ผลลัพธ์เป็นตาราง ดังรูป

thaidemy-html-16

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

การผสานเซลล์ในตาราง

ในบางตารางจะมีการรวมหลายๆ คอลัมน์ให้เป็นคอลัมนเดียว หรืออาจรวมหลายๆ แถวให้เป็นแถวเดียว โดยเฉพาะการแสดงหัวข้อตาราง ดังตัวอย่างต่อไปนี้

sale person sale units assets
north central south main unit accessories
John  23  38  45  8  34
Mintra  18  49  46  5  21
Suchat  24  32  37  9  22
  • การรวมเซลล์ในแนวนอน (รวมหลายๆ คอลัมน์เข้าด้วยกัน) ให้กำหนด colspan ไปที่แท็ก <td> หรือ <th>
  • การรวมเซลล์ในแนวตั้ง (รวมหลายๆ หลายๆ แถวเข้าด้วยกัน)  ให้กำหนด rowspan ไปยังแท็ก <td> หรือ <th>

ต่อไปนี้คือตัวอย่างการรวม 3 เซลล์ในแนวนอน ให้กลายเป็นเซลล์เดียว

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

thaidemy-html-54

ตัวอย่างต่อไป คือการรวมหลายๆ เซลล์ในแนวตั้ง โดยกำหนดค่าให้กับ rowspan ซึ่งในตัวอย่างต่อไปนี้ ได้รวมเซลล์ 2 เซลล์ในแนวตั้ง ให้เหลือเพียงเซลล์เดียว

จากโค้ตด้านบน คอลัมน์แรกเราได้กำหนด <td rowspan=”2″> เพื่อรวมเซลล์ในแนวตั้ง 2 เซลล์ให้เป็นเซลล์เดียว ทำให้แถวแรกจะมีเซลล์ทั้งสิ้น 3 เซลล์ (มี <td></td> จำนวน 3 ชุด) ส่วนแถวที่สองจะมีเซลล์จำนวน 2 เซลล์ (มี <td></td> จำนวน 2 ชุด) และผลลัพธ์จากโค้ตด้านบนก็จะได้เป็น ดังรูป

thaidemy-html-55

ติดต่อเรา

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

Not readable? Change text. captcha txt
0

Start typing and press Enter to search