CHAPTER 4

1. CHAPTER 4 • Table

2. Chapter 4 • การสร้างตาราง • Attribute สำหรับ Table • Cellpadding and Cellspacing • Width and Height • การจัดตำแหน่งของข้อความในตาราง Align และ Valign • การปรับแต่งสีพื้นหลังและภาพพื้นหลัง • Colspan และ Rowspan

3. การสร้างตาราง • < TABLE > ใช้สร้างตาราง ซึ่งในเว็บเพจส่วนใหญ่หรือเกือบทุกเว็บเพจมักใช้แท็กนี้กันทั้งนั้น ด้วยเหตุผลที่ว่าตารางสามารถประยุกต์ใช้งานได้หลาย แบบตั้งแต่ใช้เป็นตารางธรรมดาเพื่อแสดงค่าตัวเลขทางสถิติหรือตัวเลขที่มีความสัมพันธ์กัน ซึ่งการใช้ตารางนำเสนอข้อมูลแบบนี้ทำให้เห็นการเปรียบเทียบ ที่ชัดเจน ต่อมามีการประยุกต์ใช้ตารางกับข้อมูลประเภทอื่นๆ เช่น ข้อความ หรือรูปภาพเพื่อช่วยออกแบบโฮมเพจ (คือเว็บเพจแรกที่จะแสดงให้เห็นเมื่อเข้าสู่ เซิร์ฟเวอร์นั้น) หรือเว็บเพจทั่วๆ ไปด้วย จนบางครั้งดูไม่ออกว่าเป็นตาราง ในบทนี้จะค่อยๆ อธิบายจากการทำตารางง่ายๆ ไปจนถึงการใช้ตารางช่วยออกแบบเว็บเพจ

4. การสร้างตาราง • โครงสร้างของตาราง • โครงสร้างตารางโดยทั่วไปจะประกอบไปด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่ในแนวนอนเดียวกันก็คือแถว Row และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์นั่นเอง Column • หลักการในการสร้างตาราง • ประกาศ <TABLE> ก่อน จากนั้นจะเริ่มสร้างจาก Row <TR> โดยทิศทางจะเป็น ซ้าย --> ขวา แล้วค่อยๆ สร้าง Cell , ช่องในแต่ละ Column ต่อมา <TD>

5. การสร้างตาราง – ตัวอย่าง <TABLE> <TR>                <TD>.........</TD><TD>.........</TD></TR><TR><TD>.........</TD>          <TD>.........</TD> </TR> <TR><TD>.........</TD><TD>.........</TD> </TR> <TABLE> ผลลัพธ์ที่ได้คือ ตารางขนาด 3 แถว แถวละ 2 คอลัมน์นั่นเอง

6. การสร้างตาราง – Tag ที่เกี่ยวข้อง • <TABLE> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </TABLE> • <TR> (Table Row) เป็นการกำหนดแถวของตาราง และมีคำสั่งปิดคือ </TR> • <TD> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิดคือ </TD> • นอกจากนี้ยังมี Tag อื่นๆ ที่ช่วยในการสร้างตาราง คือ • <CAPTION> เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ </CAPTION> • * <TH> มีค่าเท่ากับ <TD> เพียงแต่ทำให้ข้อมูลที่อยู่ในนี้เป็นตัวหนาและจัดรูปแบบให้อยู่ตรงกลาง

7. การสร้างตาราง – การกำหนดเส้นขอบ BORDER • การกำหนดเส้นของตาราง • โดยทั่วไปแล้วข้อมูลในตารางจะถูกแบ่งออกเป็นส่วน ๆ อย่างชัดเจนโดยมีเส้นกรอบล้อมรอบแต่ละช่องข้อมูล แต่บางครั้งเพื่อความสวยงามแล้ว นักออกแบบเว็บเพจอาจเลือกที่จะไม่แสดงเส้นกรอบที่ทำให้รกหูรกตานั้นได้ โดยเฉพาะในกรณีที่นักออกแบบให้แท็ก <TABLE> ในการตกแต่งเว็บเพจ การกำหนดว่าจะแสดงหรือไม่แสดงกรอบทำได้โดยใช้แอตทริบิวต์ BORDER และ BORDERCOLOR ที่ Tag <TABLE> เท่านั้น • ตัวอย่าง <TABLE BORDER="ค่าตัวเลข" BORDERCOLOR="#RGB หรือชื่อสี" > • หมายเหตุ โดยปกติถ้าไม่ใส่ Attribute นี้ จะไม่มีเส้นขอบขึ้นมาให้

8. การสร้างตาราง – การกำหนดเส้นขอบ BORDER <TABLE BORDER=1> <TR> <TD>data</TD> <TD>data</TD> </TR> <TR> <TD>data</TD> <TD>data</TD> </TR> </TABLE> <TABLE> <TR> <TD>data</TD> <TD>data</TD> </TR> <TR> <TD>data</TD> <TD>data</TD> </TR> </TABLE>

9. ข้อมูล ข้อมูล Cellpadding Cellspacing Attribute สำหรับ Table - Cellpadding และ Cellspacing • โดยปกติเมื่อมีการใส่ข้อความลงไปใน Cell หรือ <TD> จะมีช่องว่างต่างๆ เกิดขึ้น เราสามารถกำหนดให้ค่าของช่องว่างเรานี้มากขึ้นหรือน้อยลงก็ได้ • Cellpadding = ช่องว่างระหว่างข้อมูลกับกรอบภายใน Cell • Cellspacing = ช่องว่างระหว่าง Cell กับ Cell • Cellpadding กับ Cellspacing จะเป็น Attribute ที่ใส่ไว้ใน <TABLE> โดยกำหนดค่าเป็นตัวเลข Pixel เช่นเดียวกับ Attribute Border

10. Attribute สำหรับ Table – Width และ Height • การใช้แอตทริบิวต์ WIDTH และ HEIGHT เพื่อกำหนดขนาดของช่องข้อมูลและตำแหน่งของข้อมูลในแต่ละช่อง • โดยการกำหนดทั้ง WIDTH และ HEIGHT สามารถกำหนดเป็นแบบ Percent หรือ ว่ากำหนดเป็น Pixel ก็ได้ • สามารถกำหนดได้ใน Tag ใดก็ได้ ไม่ว่าจะเป็น <TABLE> , <TR>, <TD> แต่ต้องให้มีความสัมพันธ์กัน เช่น ถ้าในแถวเดียวกันกำหนด Height ไว้เท่าไร ในแถวนั้นถ้ามี <TD> ใดกำหนดสูงกว่า ก็จะให้ผลลัพธ์เท่ากับค่าที่สูงสุดในแถวนั้น • เช่นเดียวกันกับ Column ถ้าใน Column มีการกำหนด Width ไว้ ตารางจะนับค่าที่มากที่สุดแทนค่าอื่นๆ ที่กำหนดเอาไว้

11. Attribute สำหรับ Table – Width และ Height เลือกเอา Height ที่มากที่สุด เลือกเอา Width ที่มากที่สุด

12. Attribute สำหรับ Table – การจัดตำแหน่ง • เราสามารถกำหนดตำแหน่งให้กับข้อมูลที่อยู่ในตารางได้ โดยการใช้ Attribute • Align = กำหนดตำแหน่ง Left , Center , Right (ซ้าย กลาง ขวา) • Valign = กำหนดตำแหน่ง Top , Middle , Bottom (บน กลาง ล่าง) • ซึ่งเราสามารถใส่ Attribute Align , Valign ได้ที่ TAG <TR>, <TD> • ถ้ากำหนด Align ไว้ที่ <TABLE> จะเป็นการจัดตำแหน่งของ Table กับจอภาพแทน • ที่สำคัญคือ ถ้าหากว่าเรากำหนดไว้ใน <TR> แล้วไปกำหนดต่อใน <TD> จะนับจากส่วนที่ย่อยสุดเป็นหลักก่อน คือ ดูตามค่า ใน <TD> แล้วค่อยไปดูใน <TR>

13. Attribute สำหรับ Table – การจัดตำแหน่ง ตัวอย่างเช่น <TABLE> <TR ALIGN=RIGHT> <TD>x</TD> <TD ALIGN=LEFT>x</TD> </TR> <TR> <TD ALIGN=CENTER>x</TD> <TD>x</TD> </TR> </TABLE> จัดตาม <TR> จัดตาม <TD> จัดตาม Default จัดตาม <TD>

14. Attribute สำหรับ Table – การจัดตำแหน่ง สรุปการกำหนดตำแหน่ง

15. Attribute สำหรับ Table – สีพื้นหลังและภาพพื้นหลัง • เราสามารถใส่สีให้กับช่องของตารางหรือ Cell ได้โดยการเพิ่ม Attribute BGCOLOR เข้าไป (เหมือนกับ <BODY> ) ช่องก็จะมีสีตามที่เรากำหนดไว้ • สามารถกำหนดได้ใน Tag ใดก็ได้ ไม่ว่าจะเป็น <TABLE> , <TR>, <TD> แต่มีหลักการเหมือนกันกับ Align คือ ถ้าหากว่าเรากำหนดไว้ใน <TABLE> แล้วไปกำหนดต่อใน <TR> หรือ <TD> จะนับจากส่วนที่ย่อยสุดเป็นหลักก่อน คือ ดูตามค่า ใน <TD> แล้วค่อยไปดูใน <TR> แล้วจึงไปดูค่าใน <TABLE> ต่อไป

16. Attribute สำหรับ Table – สีพื้นหลังและภาพพื้นหลัง เช่น <TABLE BGCOLOR=“blue” BORDER=1> <TR> <TD>&nbsp;</TD> <TD>&nbsp;</TD> </TR> <TR> <TD BGCOLOR=“Yellow”>&nbsp;</TD> <TD>&nbsp;</TD> </TR> </TABLE>

17. Attribute สำหรับ Table – สีพื้นหลังและภาพพื้นหลัง • นอกจากนี้เรายังสามารถใส่ภาพเป็น Background ให้กับตารางได้ด้วย โดยใช้ Attribute Background=“ที่อยู่รูปภาพ/ชื่อรูปภาพ” โดยหลักการใช้เหมือนๆ กับ BACKGROUND ของ <BODY> เช่น • <TABLE BORDER=1> • <TR> • <TD>&nbsp;</TD> • <TD>&nbsp;</TD> • </TR> • <TR> • <TD BACKGROUND=“j002.jpg”>&nbsp;</TD> • <TD>&nbsp;</TD> • </TR> • </TABLE>

18. ข้อควรระวังในการใช้ Table • ระวังการใช้ HTML จัดรูปแบบอักษรกับ TABLE • ถ้าต้องการกำหนดรูปแบบอักษรให้กับข้อความทุกข้อความในตาราง ไม่สามารถใช้คำสั่ง เช่น <B><I>…..</I></B> ระบุครอบตาราง ดูตัวอย่าง วิธีที่ถูก <table> <tr><td> <B><I>ข้อความ</I></B></td></tr> </table> วิธีที่ผิด <B><I>…..<table> ..... </table> </I></B>

19. Colspan และ Rowspan • ในตอนสร้างตารางครั้งแรก จะเห็นได้ว่า ตารางที่สร้างขึ้นมาได้นั้นเป็นรูปแบบสี่เหลี่ยมที่มีช่องแต่ละ Row แต่ละ Column เท่าๆกัน แต่ว่าในการใช้งานจริงอาจไม่เป็นอย่างนั้น จึงจำเป็นที่จะต้องมีการปรับตารางขึ้นมา • การปรับแต่งตารางให้มีรูปร่างที่แตกต่างกันไปในแต่ละช่อง เช่นการขยายตามแนวนอน หรือการขยายตามแนวตั้งนั้นสามารถทำได้โดยการเพิ่ม Attribute Colspan หรือ Rowspan เข้าไปที่ <TD> • COLSPAN = การขยายช่องตามแนวตั้ง (Column) ออกไปทางด้านขวามือของช่องตารางนั้น • ROWSPAN = การขยายช่องตามแนวนอน (Row) ลงไปทางด้านล่างของช่องตารางนั้น

20. Colspan และ Rowspan • ตัวอย่าง COLSPAN • <TABLE> • <TR> • <TD COLSPAN=2>…</TD> • </TR> • <TR> • <TD>…</TD> • <TD>…</TD> • </TR> • </TABLE> จะเห็นว่า Row ที่ 1 จะมีแค่ Cell เดียวเท่านั้น และ Cell นั้นก็จะมีการขยาย Column ออกไป 2 Column ทางด้านขวา * ดูได้ง่ายๆ คือ บรรทัดไหนมีกี่ช่อง ก็จะมี <TD> ตามที่กำหนด และดูได้อีกว่าช่องนั้นขยายไปกี่ Column จากจำนวนช่องด้านบนหรือช่องด้านล่างของช่องที่ขยาย ว่าขยายไปเท่าไร

21. Colspan และ Rowspan • ตัวอย่าง ROWSPAN • <TABLE> • <TR> • <TD ROWSPAN=2>…</TD> • <TD>…</TD> • </TR> • <TR> • <TD>…</TD> • </TR> • </TABLE> • จะเห็นว่า Row ที่ 1 จะมี Cell 2 Cell และ Cell แรกก็จะมีการขยาย Row ลงไป 2 Row ทางด้านล่าง • ดูได้ง่ายๆ คือ ช่องนั้นขยายไปกี่ Row จากจำนวนช่องข้างซ้ายหรือช่องด้านขวาของช่องที่ขยาย ว่าขยายไปเท่าไร • ถ้าบรรทัดนั้นมีช่องที่ถูกขยายมาจากนั้นบน บรรทัดนั้นจะนับจำนวนช่องเฉพาะที่ไม่ได้ถูกขยายมา เช่น จากรูป แถวที่ 2 จะมีแค่ช่องเดียวหรือ <TD> เดียวเท่านั้นเอง