รูปแบบ
<TABLE>
<CAPTION> … </CAPTION>
<TR>
<TH> หัวตาราง </TH>
<TH> หัวตาราง </TH>
</TR>
<TR>
<TD> รายละเอียดย่อย </TD>
<TD> รายละเอียดย่อย </TD>
</TR>
...
</TABLE>
<TABLE> กำหนดการสร้างตาราง คำสั่งปิดคือ </TABLE>
<CAPTION> ข้อความอธิบายตาราง
<TR> (Table Row) กำหนดแถวของตาราง
<TH> (Table Head) หัวข้อของตาราง ข้อความที่อยู่คำสั่งนี้จะถูกจัดให้เป็นตัวหนาและกึ่งกลาง
<TD> (Table Data) รายละเอียดข้อมูลในตาราง
คุณสมบัติของตาราง
<TABLE>
ALIGN = align-type กำหนดตำแหน่งตาราง มีค่าดังนี้
LEFT กำหนดตารางให้อยู่ทางซ้าย
RIGHT กำหนดตารางให้อยู่ทางขวา
BACKGROUND = url ใส่ภาพกราฟิกเป็นพื้นหลังตาราง url เป็นตำแหน่งภาพ
BGCOLOR = color กำหนดสีให้ตาราง
BORDER = n เส้นขอบของตาราง ค่าความหนาของตาราง = n
BORDERCOLOR กำหนดสีให้ขอบตาราง โดยสัมพันธ์กับ BORDER
BORDER-STYLE ลักษณะของเส้นขอบ ได้แก่ solid
CELLPADDING = n กำหนดระยะห่างระหว่างตัวหนังสือและเส้นแบ่งตาราง
CELLSPACING = n กำหนดขนาดของเส้นตาราง
WIDTH = n กำหนดความกว้างของตาราง เป็นตัวเลขและ %
HEIGHT = n กำหนดความสูงของตาราง เป็นตัวเลขและ %
TEXT-ALIGN มีคุณสมบัติในการจัดข้อความในแนวนอน ได้แก่ left, right, center
VERTICAL-ALIGN มีคุณสมบัติในการจัดข้อความในแนวตั้ง ได้แก่ top, bottom, middle
<TR>
ALIGN = align-type กำหนดตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT = อยู่ทางซ้าย
CENTER = อยู่ตรงกลาง
RIGHT = อยู่ทางขวา
BACKGROUND = url ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็นตำแหน่งภาพ
BGCOLOR = color กำหนดสีที่เป็นฉากให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
VALIGN = align-type จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่บน
MIDDLE = จัดอยู่ตรงกลาง
BUTTOM = จัดอยู่ข้างล่าง
<TH>
ALIGN = align-type กำหนดตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT = อยู่ทางซ้าย
CENTER = อยู่ตรงกลาง
RIGHT = อยู่ทางขวา
BACKGROUND = url ใส่ภาพกราฟิกเป็นพื้นหลังตาราง url เป็นตำแหน่งภาพ
BGCOLOR = color กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
COLSPAN = n ปรับขนาดของคอลัมน์ให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอลัมน์ที่มี
ROWSPAN = n ปรับขนาดความสูงของแถวในตารางเป็น เท่า ของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN = align-type จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่บน
MIDDLE = จัดอยู่ตรงกลาง
BUTTOM = จัดอยู่ข้างล่าง
<TD>
ALIGN = align-type กำหนดตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT = อยู่ทางซ้าย
CENTER = อยู่ตรงกลาง
RIGHT = อยู่ทางขวา
BACKGROUND = url ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็นตำแหน่งภาพ
BGCOLOR = color กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
COLSPAN = n ปรับขนาดของคอลัมน์ให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุด เท่ากับจำนวนคอลัมน์ที่มี
ROWSPAN = n ปรับขนาดความสูงของแถวในตารางเป็นเท่า ของแถวปกติ สูงสุดเท่ากับจำนวนแถวที่มี
VALIGN = align-type จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่บน
MIDDLE = จัดอยู่ตรงกลาง
BUTTOM = จัดอยู่ข้างล่าง
รูปแบบของเส้นกรอบของตาราง
<TABLE FRAME="รูปแบบเส้นกรอบตารางที่ต้องการ">
มีรูปแบบดังนี้
void ไม่ขีดเส้นกรอบ
border มีเส้นทั้งสี่ด้าน
box มีเส้นเช่นเดียวกับ border
above ขีดเส้นเฉพาะเส้นกรอบด้านบน
below ขีดเส้นเฉพาะเส้นกรอบด้านล่าง
hsides กำหนดให้ขีดเส้นในแนวนอนคือด้านบนและด้านล่างของกรอบ
vsides กำหนดให้ขีดเส้นด้านซ้ายและด้านขวาของกรอบ
lhs ขีดเส้นเฉพาะกรอบด้านซ้าย
rhs ขีดเส้นเฉพาะกรอบด้านขวา
ตารางซ้อนตาราง
ทำได้โดยการแทรกแท็ก <TABLE> … </TABLE> ในช่องของตารางหลัก
ใส่รูปภาพลงในตาราง
สามารถนำรูปภาพที่มีอยู่บรรจุลงในตารางที่สร้างขึ้นได้โดยการใช้คำสั่ง <IMG SRC = รูปภาพ> เข้าไปเป็นส่วนหนึ่งของตาราง เช่น
<TABLE BORDER = “2” CELLPADDING = “5” CELLSPACING = “5” WIDTH = “60%”>
<TR>
<TD VALIGN = “BOTTOM” WIDTH = “30%”> <IMG SRC = “Aq.GIF” WIDTH = “108” HEIGHT = “108”> </TD>
<TD WIDTH = “30%”> <IMG SRC = “34.GIF” WIDTH = “20” HEIGHT = “20”> </TD>
</TR>
</TABLE>
การเชื่อมโยงข้อมูลในตาราง
ทำเหมือนกับข้อมูลที่อยู่นอกตาราง เช่น
<TABLE BORDER = “2” CELLPADDING = “5” CELLSPACING = “5” WIDTH = “60%”>
<TBODY>
<TR>
<TD WIDTH = “50%”> <A HREF = “…/index.asp”> <img height=20 src “34.gif” width=20 border=0> </A> </TD>
<TD WIDTH = “50%”> <a href = “…/index.asp”> กลับไปหน้าแรก </a> </td>
</TR>
</TBODY>
</TABLE>
ตอนต่อไป -> ลิงก์และรูปภาพ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น