Make your own free website on Tripod.com

วันที่สาม: ตารางและการประยุกต์ใช้

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

ชุดแท๊กของตาราง
ตารางเกิดจากคู่แท็กหลายๆคู่ซ้อนเรียงกัน ภายในคู่แท็กหลัก <TABLE> โดยมีข้อกำหนดเบื้องต้น ดังนี้

  1. คู่แท็กหลักคือ <TABLE> ... </TABLE>
  2. <TR> ... </TR> คือคู่แท็กกำหนดแถวจะต้องอยู่ภายในคู่แท็ก <TABLE> เสมอ
  3. <TD> ... </TD> คือคู่แท็กกำหนดคอลัมน์ จะต้องอยู่ภายในคู่แท็ก <TR> เสมอ
จากข้อกำหนดเบื้องต้นสามข้อ เราพอจะสร้างตารางง่ายๆได้ ดังตัวอย่าง
แถว1 คอลัมน์ที่1แถว1 คอลัมน์ที่2แถว1 คอลัมน์ที่3
แถว2 คอลัมน์ที่1แถว2 คอลัมน์ที่2แถว2 คอลัมน์ที่3
แถว3 คอลัมน์ที่1แถว3 คอลัมน์ที่3แถว3 คอลัมน์ที่3
ตารางนี้สร้างจากคู่แท็กตามรูปนี้
ส่วนขยายของชุดแท็กตาราง
แท็กต่างๆที่ใช้ในเอกสาร HTML มักจะมีส่วนขยาย เพื่อเพิ่มคุณสมบัติของแท็กนั้นๆ สำหรับชุดแท็กตารางมีส่วนขยายที่ควรรู้ ดังนี้
แท็ก TABLE มีส่วนขยายที่สำคัญ ดังนี้
BGCOLOR ใช้สำหรับกำหนดสีพื้นตาราง [bgcolor = รหัสสี] รหัสสีเลือกได้จาก เครื่องมือเลือกสีที่ homesite มีให้ใช้ ที่เห็นนี้กำหนดสี = #008080 ถ้าไม่กำหนดสีพื้นไว้ บร๊าวเซอร์จะใช้ สีเดียวกับสีพื้นของเอกสาร
BORDER สำหรับกำหนดขนาดของเส้นรอบนอกของตาราง [border = ค่าตัวเลข] ค่าตัวเลขคือความหนาของเส้น ถ้ามีค่า = 0 หมายถึงไม่เห็นเส้น ตารางที่เห็นนี้ กำหนด border=10
WIDTH ใช้สำหรับกำหนดความกว้างของตาราง [width = ค่าตัวเลข หรือเปอร์เซนต์] หน่วยตัวเลขเป็นพิกเซล หรือเปอร์เซนต์ของความกว้างที่มี ตารางที่เห็นนี้กำหนด width=600
HEIGHT ใช้สำหรับกำหนดความสูงของตาราง [height = ค่าตัวเลข หรือเปอร์เซนต์] หน่วยเป็นพิกเซล หรือเปอร์เซนต์ของความสูงที่มี
CELLSPACING สำหรับกำหนดขนาดของเส้นภายในของตาราง [cellspacing = ค่าตัวเลข] ค่าตัวเลขคือความหนาของเส้นหน่วยเป็นพิกเซล ตารางที่เห็นนี้กำหนด cellspacing=5
CELLPADDING ใช้สำหรับกำหนดช่องว่าง(margin)ของแต่ละช่องตารางรอบข้อความ [cellpadding = ค่าตัวเลข] หน่วยเป็นพิกเซล ตารางที่เห็นนี้กำหนด cellpadding=10
แท็ก TR สำหรับกำหนดแถวในตาราง มีส่วนขยายที่สำคัญ ดังนี้
BGCOLOR ใช้สำหรับกำหนดสีพื้นของแถวนั้นทั้งแถว [bgcolor = รหัสสี] รหัสสีเลือกได้จาก เครื่องมือเลือกสีที่ homesite มีให้ใช้ แถวที่เห็นนี้กำหนดสี = #808080
ALIGN ใช้สำหรับกำหนดชิดซ้าย ตรงกลาง หรือชิดขวาของทั้งแถว
[align = left,center,right] แถวที่เห็นนี้กำหนด align = right ถ้าไม่มีการกำหนดจะชิดซ้ายเสมอ
VALIGN ใช้สำหรับกำหนดชิดบน ตรงกลาง ชิดล่าง หรือชิดแนวหลักของทั้งแถว
[valign = top,middle,bottom,baseline] แถวนี้กำหนด valign=bottom ถ้าไม่มีการกำหนดจะจัดกึ่งกลางเสมอ
แท็ก TD สำหรับกำหนดช่องตารางในแต่ละแถว มีส่วนขยายที่สำคัญ ดังนี้
BGCOLOR ใช้สำหรับกำหนดสีพื้นของช่องตาราง(เฉพาะช่องที่กำหนด) [bgcolor = รหัสสี]
ช่องตารางนี้กำหนดสี = #808000 ถ้าไม่กำหนดสีพื้นไว้ บร๊าวเซอร์จะใช้ สีเดียวกับสีพื้นของเอกสาร
ALIGN ใช้กำหนดการชิดซ้าย กึ่งกลาง หรือชิดขวา มีผลเฉพาะช่องตารางที่กำหนด
VALIGN ใช้กำหนดชิดบน กึ่งกลาง ชิดล่าง หรือตามแนวหลัก มีผลเฉพาะช่องตารางที่กำหนด
WIDTH ใช้กำหนดความกว้างของช่องตารางนั้น [width = ค่าตัวเลข] หน่วยเป็นพิกเซล (*ระวัง! อย่ากำหนดเป็นเปอร์เซนต์ เพราะ IE จะใช้การกำหนดเป็นพิกเซลเท่านั้น)
ROWSPAN ใช้สำหรับการขยายแถว ให้สูงคล่อมตามจำนวนแถวที่หนด
[rowspan = ค่าตัวเลข] ตามที่เห็นนี้ช่องแรกกำหนด rowspan=2
COLSPAN : ด้วยการใช้ colspan=2 ทำให้แถวที่เห็นนี้ มีช่องตารางเดียว แต่ขยายเท่ากับสองช่อง
ข้อควรจำ : การเขียนภาษาไทยในตาราง จะต้องกำหนดคู่แท็ก <FONT FACE = ฟ้อนต์ไทย> ..... </FONT> ในทุกๆช่องตาราง TD การเขียนแท็ก Font คล่อมตารางทั้งตาราง ทำไม่ได้จ๊ะ

แท็กอื่นๆของตาราง
ยังมีคู่แท็กที่เกี่ยวข้องกับตารางอีกจำนวนหนึ่ง ลุงจะไม่นำมาแสดงในแบบเรียนนี้ เนื่องจากอาจสร้าง ความสับสนได้ง่าย ชุดแท็กตาราง ที่นำมาเสนอในวันนี้ เพียงพอต่อการนำไปประยุกต์ใช้ และที่สำคัญ แท็กเหล่านี้ แสดงผลได้ตรงกันในบร๊าวเซอร์ ยอดนิยมทั้งสองตัวจ๊ะ หากสนใจแท็กอื่นๆเพิ่มเติม ลุงขอแนะนำให้ศึกษาได้จาก HTML Reference Library ที่เคยให้ดาวน์โหลด ไปประกอบการเรียนรู้ ตั้งแต่ต้นแล้ว

ตัวอย่างการนำตารางมาประยุกต์ใช้

คลิกตรงนี้หากต้องการปรึกษาลุงเปี๊ยก

HTML page