การแสดงข้อมูลที่มีคามสัมพันธ์กันในลักษณะของแถวและคลลัมน์นั้น อาจต้องทำการแสดงข้อมูลในลักษณะของตาราง เพื่อที่จะทำให้สามารถเข้าใจกับข้อมูลที่ทำการแสดงผลนั้นให้สะดวกยิ่งขึ้น การแสดงข้อมูลในลักษณะนี้บนเว็บเพจก็เช่น เดียวกัน จำเป็นต้องใช้การแสดงผลข้อมูลแบบตาราง
การแสดงผลข้อมูลแบบตารางบนเว็บเพจนั้น สามารถประยุกต์ใช้งานได้หลายด้าน ตั้งแต่การแสดงผลเป็นตาราง ธรรมดาเพื่อแสดงค่าตัวเลขทางสถิติหรือ ตัวเลขที่มีความสัมพันธ์กันซึ่งสามารถทำให้เห็นการเปรียบเทียบได้ชัดเจน นอกจากนั้นยังมีการประยุกต์ใช้ตารางข้อมูลประเภทอื่น ๆ เช่น ข้อความหรือรูปภาพเพื่อช่วยออกแบบเว็บเพจซึ่งบางครั้งดูไม่ออกเลยว่าเป็นการใช้ตารางช่วยในการสร้างเว็บเพจ
โครงสร้างของตารางนั้นจะประกอบไปด้วยแถวและคอลัมถ์ โดยช่องที่อยู่ในแนวนอนเดียวกันก็คือแถว และช่อง
ข้อมูลที่อยู่ตรงกันในแนวตั้งคือคอลัมถ์นั่นเอง โดยใช้คำสั่งต่าง ๆ เป็นตัวกำหนดตำแหน่งของแถวและสดมภ์ โดย
รูปแบบของคำสั่งที่เกี่ยวกับตารางมีดังนี้
* TABLE กำหนดการสร้างตาราง และคำสั่งปิดคือ / TABLE
* CAPTION การกำหนดคำ หรือ ข้อความอธิบายตาราง และมีคำสั่งปิดคือ /CAPTION
* TR (Table Row) เป็นการกำหนดแถวของตาราง และคำสั่งปิดคือ /TR
* TH (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมถ์ และคำสั่งปิดคือ /TH
*TD (Table)เป็นการกำหนดข้อมูลในแต่ละสดมภ์ในตาราง และคำสั่งปิดคือ /TD
การใช้งานคำสั่ง ถ้าทำการเปิดด้วยคำสั่งใด ต้องทำการเปิดด้วยคำสั่งนั้นก่อนเช่นเดียวกับการเปิด/ปิดวงเล็บของ
องตารางข้างต้น สามารภสรุปจำนวนของแถวและสดมภ์ได้ คือ มีจำนวนแถวเท่ากับ 3
และมีจำนวนสดมภ์เท่ากับ 2
การกำหนดเส้นขอบของตาราง
โดยทั่วไปข้อมูลในตารางนั้นจะถูกแบ่งออกเป็นส่วนอย่างชัดเจนโดยมีเส้นกรอบล้อมรอบแต่ละช่องข้อมูลหรือ
เส้นของของตาราง ซึ่งบางครั้งเพื่อความสวยงามของเว็บเพจผู้ที่ทำการออกแบบเว็บเพจอาจเลือกที่จะไม่แสดงเส้น
กรอบนั้นได้เพื่อความสวยงาม โดยการกำหนดเส้นขอบของตารางสามารถกำหนดโดยใช้การกำหนดคุณลักษณะพิเศษ
(Attribute)ของคำสั่งTABLEโดยคำสั่งที่ใช้กำหนดลักษณะพิเศษเพิ่มเติมนั้น คือ Border ใช้ในการกำหนดขนาดของ
เส้นขอบและ Bordercolor ใช้ในการกำหนดสีของเส้นขอบ โดยมีรูปแบบการใช้งานคำสั่งดังนี้คือ
ตัวอย่าง การกำหนดเส้นขอบของตาราง
ตัวอย่าง การกำหนดสีเส้นขอบของตาราง
รูป แสดงการสร้างตารางโดยกำหนดขนาดเส้นสีของเส้นกรอบข้อมูล
การกำหนดความกว้างและความสูงของตาราง
การกำหนดความกว้างและความสูงของตารางนั้น สามารถทำได้โดยใช้คำสั่งสำหรับกำหนดคุณลักษณะพิเศษ
เพิ่มเติมที่อยู่ภายใต้คำสั่ง TABLEโดยคำสั่งที่ใช้สำหรับกำหนดคุณสมบัติเพิ่มเติมนั้น คือ WIDTH เพื่อใช้สำหรับกำหนด
ความกว้างของตารางและ HEIGHT สำหรับกำหนดความสูงของตาราง โดยสามารถกำหนดได้ 2 ลักษณะคือ กำหนดเป็น
เปอร์เซนต์ของจอภาพ และกำหนดเป็นจำนวนพิกเซล โดยมีรูปแบบการใช้งานคำสั่งนั้น
ตังอย่าง กำหนดความกว้างและความสูงของตาราง
การกำนดระยะเว้นขอบภายในเซลข้อมูล
การกำหนดระยะเว้นขอบภายใน(PAdding)ของเซลข้อมูลในตารางนั้น จะมีผลต่อการแสดงผลทำให้พื้นที่ช่องว่างสามารถ
ทำการกำหนดได้เป็นค่ของพิเซลและเปอร์เซนต์ โดยการกำหนดระยะเว้นขอบภาายในเซลนั้นสามารถทำการกำหนดได้
โดยใช้คำสั่งที่ใช้ำกำหนดคุณลักษณะพิเศษเพิ่มเติมของคำสั่ง TABLE โดยคำสั่งที่ใช้กำหนดคุณลักษณะพิเศษเพิ่มเติมนี้คือ
Cellpadding รูปแบบการใช้งานคำสั่งสามารถแสดงๆได้ดังนี้
ตัวอย่าง การกำหนดระยะเว้นขอบภายในเซลข้อมูล
การกำหนดตำแหน่งของตาราง
การกำหนดตำแหน่งของตารางที่แสดงผลบนหน้าจอของโปรแกรมเว็บเบราว์เซอร์ ว่าจะให้อยู่ที่ตำแหน่งกึ่งกลาง
ชิดซ้ายหรือชิดขวา สามารถทำได้โดยการใช้คำสั่ง TABLE โดยคำสั่งที่ใช้กำหนดคุณลักษณะเพิ่มเติมนี้คือ Align โดยต่อ
ด้วยส่วนขยายเพิ่ใเติมดังนี้คือ
* Left จัดวางตารางชิดว้ายของบรรทัด
* Right จัดวางตารางชิดด้านขวาของบรรทัด
* Center จัดวางตารางอยู่กึ่งกลางของบรรทัด
โดยมีรูปแบบการใช้งานคำสั่งดังนี้
ตัวอย่าง การกำหนดตำแหน่งของตาราง
การใส่รูปภาพลงในตาราง
การใส่รูปภาพในตารางก็คล้ายกับการใส่ข้อความไว้ในตาราง ฏดดยใช้คำสั่ง IMG SRC = "Image File" ไว้ในคำสั่ง TD
ตัวอย่าง การใส่รูปภาพในตาราง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น