การสร้างตาราง

<TABLE BORDER = "2" > <CAPTION> การสร้างตาราง </CAPTION>     <TR> <TH> หัวเรื่อง 1 </TH>     <TH> หัวเรื่อง 2 </TH> </TR>     <TR> <TD> ข้อมูล 1 </TD>     <TD> ข้อมูล 2 </TD> </TR> </TABLE> ผลลัพธ์ที่ได้ การสร้างตาราง หัวเรื่อง 1 หัวเรื่อง 2 ข้อมูล 1 ข้อมูล 2

การสร้างตาราง ใช้คำสั่ง <TABLE> เป็นเริ่มและปิดท้ายด้วย </TABLE> ส่วน BORDER เป็นคำสั่งย่อยเพื่อใช้ กำหนดขนาดของเส้นตาราง ถ้ากำหนด = "0" จะหมายถึงไม่มีเส้น - คำสั่ง <CAPTION> และ< /CAPTION> เป็นคำสั่งแสดงข้อความอธิบายชื่อตาราง - คำสั่ง <TR> และ< /TR> เป็นคำสั่งเพื่อกำหนดแถวในตาราง - คำสั่ง <TH> และ< /TH> เป็นคำสั่งเพื่อกำหนดหัวเรื่อง ผลลัพธ์ที่ได้คือตัวอักษรจะหนากว่าปกติ (ดูตัวอย่างประกอบ) - คำสั่ง <TD> และ< /TD> เป็นคำสั่งแสดงข้อมูลปกติ ความหมายของคำสั่ง Table - TR หมายถึง Table Row - TH หมายถึง Table Head - TD หมายถึง Table Data

ขนาดของตาราง

กำหนดความกว้างและความสูงของตาราง <TABLE width = "50%" height = "60%" > <CAPTION> ขนาดของตาราง </CAPTION>     <TR> <TH> หัวเรื่อง 1 </TH>     <TH> หัวเรื่อง 2 </TH> </TR>     <TR> <TD> ข้อมูล 1 </TD>     <TD> ข้อมูล 2 </TD> </TR> </TABLE> ผลลัพธ์ที่ได้ การตกแต่งตาราง หัวเรื่อง 1 หัวเรื่อง 2 ข้อมูล 1 ข้อมูล 2 กำหนดความสูงของแถว (row) <TABLE width = "50%">     <TR> <TH> หัวเรื่อง 1 </TH>     <TH> หัวเรื่อง 2 </TH> </TR>     <TR> <TD> ข้อมูล 1 </TD>     <TD rowspan = "2" > ข้อมูล 2 </TD> </TR>     <TR> <TD> ข้อมูล 3 </TD> </TR> </TABLE> ผลลัพธ์ที่ได้ หัวเรื่อง 1 หัวเรื่อง 2 ข้อมูล 1 ข้อมูล 2 ข้อมูล 3 กำหนดความกว้างของคอลัมภ์ (column) <TABLE width = "50%">     <TR> <TH> หัวเรื่อง 1 </TH>     <TH> หัวเรื่อง 2 </TH> </TR>     <TR> <TD> ข้อมูล 1 </TD>     <TD> ข้อมูล 2 </TD> </TR>     <TR> <TD colspan = "2" > ข้อมูล 3 </TD> </TR> </TABLE> ผลลัพธ์ที่ได้ หัวเรื่อง 1 หัวเรื่อง 2 ข้อมูล 1 ข้อมูล 2 ข้อมูล 3 ตารางซ้อนตาราง <TABLE width = "50%">     <TR> <TH> หัวเรื่อง 1 </TH>     <TH> หัวเรื่อง 2 </TH> </TR>     <TR> <TD> ข้อมูล 1 </TD>     <TD> ข้อมูล 2 </TD> </TR>     <TR> <TD> ข้อมูล 3 </TD> <TABLE width = "50%">     <TR> <TD> ข้อมูล 4 </TD>     <TD> ข้อมูล 5 </TD> </TR> </TABLE> </TABLE> ผลลัพธ์ที่ได้ หัวเรื่อง 1 หัวเรื่อง 2 ข้อมูล 1 ข้อมูล 2 ข้อมูล 3 ข้อมูล 4 ข้อมูล 5 คำอธิบาย การทำตารางซ้อนตาราง มักจะใช้ในกรณีเพื่อ อธิบายรายละเอียดเพิ่มเติม ของข้อมูล

การตกแต่งตาราง ใช้คำสั่ง Width และ Height เป็นคำสั่งในการกำหนดขนาดของตาราง เปรียบเทียบกับ จอภาพ เช่น กำหนด Width = "50%" หมายถึง กำหนดความกว้างของตารางให้มีขนาด 50 % เมื่อวัดตามความกว้างของจอภาพ เป็นต้น โดยปกติเราจะกำหนดอย่างใดอย่างหนึ่ง เช่น <TABLE width = "50%" > คำสั่งเสริมเพิ่มเติม - rowspan เป็นคำสั่งในการกำหนดความสูงของแถวในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ) - colspan เป็นคำสั่งในการกำหนดความกว้างของคอลัมภ์ในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)

สีกับตาราง

สีฉากหลังของตาราง <TABLE width = "50%" bgcolor = "red" > <CAPTION> สีฉากหลังของตาราง </CAPTION>     <TR> <TH> หัวเรื่อง 1 </TH>     <TH> หัวเรื่อง 2 </TH> </TR>     <TR> <TD> ข้อมูล 1 </TD>     <TD> ข้อมูล 2 </TD> </TR> </TABLE> ผลลัพธ์ที่ได้ สีฉากหลังของตาราง หัวเรื่อง 1 หัวเรื่อง 2 ข้อมูล 1 ข้อมูล 2 กำหนดสีแต่ละช่องในตาราง <TABLE width = "50%">     <TR> <TH bgcolor = "brown" > หัวเรื่อง 1 </TH>     <TH bgcolor = "white"> หัวเรื่อง 2 </TH> </TR>     <TR> <TD bgcolor = "green" > ข้อมูล 1 </TD>     <TD bgcolor = "blue" > ข้อมูล 2 </TD> </TR> </TABLE> ผลลัพธ์ที่ได้ หัวเรื่อง 1 หัวเรื่อง 2 ข้อมูล 1 ข้อมูล 2 คำอธิบาย ถ้าต้องการใส่สีกรอบของตาราง สามารถเพิ่มคำ ดังนี้ <TABLE bgcolor = "red">

เราสามารถกำหนดสีของ background ของตารางได้ โดยสามารถกำหนดได้ทั้งตาราง หรือ กำหนดเป็นแต่ละช่องได้ คำสั่งเสริมเพิ่มเติม - bgcolor เป็นคำสั่งในการกำหนดสีในตาราง เป็นคำสั่งเสริมของคำสั่ง <Table> และสามารถใช้งานร่วมกับคำสั่ง <TH> หรือ <TD> ได้ด้วย (ดูตัวอย่างประกอบ) การกำหนดสีสามารถกำหนดเป็นรหัสสีได้ ซึ่งสามารถตรวจสอบได้จาก ตารางสี ตัวอย่างเช่น <TD bgcolor = " #3232CD" > หมายถึงสี Medium Bule เป็นต้น

แบ่งพื้นที่จอภาพ

<FRAMESET COLS or ROWS = "80%,*" > <FRAME SRC = "URL" หรือ ไฟล์รูปภาพ > <FRAME SRC = "URL" หรือ ไฟล์รูปภาพ > </FRAMESET> แบ่งจอภาพในแนวตั้ง <FRAMESET COLS = "80%,*" > <FRAME SRC = "main.html" > <FRAME SRC = "menu.gif" > </FRAMESET> 80% 20% คำอธิบาย แบ่งหน้าจอเป็น 2 ส่วน ในแนวตั้ง ส่วนทางซ้ายมีพื้นที่ 80% ของหน้าจอทั้งหมด ส่วนทางขวาคือพื้นที่ที่เหลือ (20%) จอทางขวาจะมีรูปภาพชื่อ menu.gif แบ่งจอภาพในแนวนอน <FRAMESET ROWS = "80%,*" > <FRAME SRC = "main.html" > <FRAME SRC = "menu.gif" > </FRAMESET> 20% 80% คำอธิบาย แบ่งหน้าจอเป็น 2 ส่วน ในแนวนอน ด้านบนพื้นที่ 20% ส่วนด้านล่างมีพื้นที่ 80% แบ่งจอภาพในแนวตั้งและแนวนอน <FRAMESET ROWS = "15%,*" >    <FRAME SRC = "top.html" >      <FRAMESET COLS = "20%,80%" >      <FRAME SRC = "left.html" >      <FRAME SRC = "right.html" >      </FRAMESET> </FRAMESET> 15% 20% 80% คำอธิบาย แบ่งหน้าจอทั้งหมดเป็น 3 ส่วน ด้านบนพื้นที่ 15% ส่วนด้านล่างมีพื้นที่ 85% ในพื้นที่ด้านล่างแบ่งออกเป็น 2 ส่วนด้านซ้าย 20% ด้านขวา 80% (เหมือนกับเวปเพจที่ท่านเห็นอยู่นี้)

การแบ่งพื้นที่จอภาพ สามารถแบ่งได้ทั้งแถวตั้ง และแนวนอน สามารถจะแบ่งเท่าไหร่ก็ได้ ขึ้นกับผู้เขียน แต่อย่างไรก็ตาม ควรมีการกำหนดสัดส่วนให้ตรงกับข้อมูล หรือรูปภาพที่นำมาลงในเวปด้วย... <FRAMESET> เป็นคำสั่งเริ่มต้นการแบ่งหน้าจอ และปิดท้ายด้วย </FRAMESET> คำสั่งนี้ จะมาแทนที่คำสั่ง <BODY> <FRAME SRC > เป็นคำสั่งย่อยของ FRAMESET เพื่อกำหนดการแสดงผลข้อมูลว่า จะแสดงเป็น HTML อีกไฟล์ หรือจะให้แสดงเป็นรูปภาพก็ได้ จากตัวอย่างด้านซ้าย เรากำหนดขนาดของจอภาพเป็นเปอร์เซ็นต์ 80%,* (เครื่องหมาย * หมายถึง ขนาดขอจอภาพที่เหลือ) นอกจากนี้เรายังสามารถกำหนดเป็น pixel ได้ด้วย เช่น 500,100 เป็นต้น คำสั่งเสริมเพิ่มเติม กำหนดตำแหน่งข้อความตามแนวนอน align = "left" align = "center" align = "right" กำหนดตำแหน่งข้อความตามแนวตั้ง valign = "top" valign = "middle" valign = "bottom" รูปแบบคำสั่ง <TR ALIGN= "CENTER" > หรือ <TR VALIGN= "TOP" > ตั้งชื่อพื้นที่ หลังจากมีการแบ่งพื้นที่จอภาพแล้ว อาจจำเป็นที่เราต้อง ตั้งชื่อพื้นที่ เนื่องจากการสร้างจุดลิงค์เพื่อให้แสดง ในพื้นที่ที่ต้องการ ดังตัวอย่างนี้ <FRAME SRC = "right.html" name = "show" > สร้างลิงค์ให้แสดงในพื้นที่ที่มีชื่อว่า show <a href = "page2.html" target = "show">