|
เทคนิคการสร้างตาราง
การสร้างตาราง(Table)
<TABLE>
</TABLE> เป็นคำสั่งการสร้างตาราง
การแสดงรายการในตารางจะใช้คำสั่ง
<CAPTION
>
</CAPTION>ใช้ระบุชื่อหรือคำอธิบายของตาราง
อาจมีส่วนขยาย ALIGN=TOP
หรือ BOTTOM เพื่อวางตำแหน่งไว้เหนือหรือใต้ต่อตัวตาราง
<TR>
</TR>
จัดการส่วนของแถว
<TD>
</TD>
จัดการในส่วนของคอลัมน์
<TH>
</TH>
เป็นการเน้นตัวอักษรเข้มให้ตัวอักษรในช่องตารางที่กำหนด
ส่วนขยายของชุดคำสั่งตาราง
ชุดคำสั่งต่างๆที่ใช้ในเอกสาร
HTML มักจะมีส่วนขยาย เพื่อเพิ่มคุณสมบัติของชุดคำสั่งนั้นๆ สำหรับชุดคำสั่งตารางมีส่วนขยายที่ควรรู้ดังนี้ชุดคำสั่ง
TABLE มีส่วนขยายที่สำคัญ ดังนี้
BGCOLOR ใช้สำหรับกำหนดสีพื้นตาราง
[bgcolor=รหัสสี] ถ้าไม่กำหนดสีพื้นไว้ browser จะใช้สีเดียวกับสีพื้นของเอกสาร
BORDER สำหรับกำหนดขนาดของเส้นรอบนอกของตาราง
[border=ค่าตัวเลข] ค่าตัวเลขคือความหนาของเส้น ถ้ามีค่า = 0 หมายถึงไม่เห็นเส้นตารางที่เห็นนี้
WIDTH ใช้สำหรับกำหนดความกว้างของตาราง
HEIGHT ใช้สำหรับกำหนดความสูงของตาราง(height=ค่าตัวเลขหรือเปอร์เซนต์)หน่วยเป็น
pixel หรือเปอร์เซ็นต์ความสูงที่มี
CELLSPACING สำหรับกำหนดขนาดของเส้นภายในของตาราง
[cellspaceing=ค่าตัวเลข]ค่าตัวเลขคือค่าความหนาของเส้นหน่วยเป็น pixel
CELLPADDING ใช้สำหรับกำหนดช่องว่าง(margin)ของแต่ละช่องตารางรอบข้อความ[cellpadding=ค่าตัวเลข]หน่วยเป็น
pixel
ชุดคำสั่ง
TR สำหรับกำหนดแถวในตาราง มีส่วนขยายที่สำคัญดังนี้
ALIGN ใช้สำหรับกำหนดชิดซ้าย
ตรงกลาง หรือชิดขวาของทั้งแถว [align=left,center,light]ถ้าไม่มีการกำหนดจะจัดชิดซ้ายเสมอ
BGCOLOR ใช้สำหรับกำหนดพื้นสีของแถวทั้งแถว
[bgcolor=รหัสสี]
VALIGN ใช้สำหรับกำหนดชิด
บน กลาง ชิดล่าง หรือชิดแนวหลักของทั้งแถว[valign=top,middle,bottom,baseline]
ถ้าไม่มีการกำหนดจะจัดกึ่งกลางเสมอ
ชุดคำสั่ง
TD สำหรับกำหนดช่องตารางในแต่ละแถว มีส่วนขยายที่สำคัญดังนี้
BGCOLOR ใช้สำหรับกำหนดสีพื้นของช่องตาราง(เฉพาะที่กำหนด)[bgcolor=รหัสสี]ถ้าไม่มีการกำหนด
Browser จะใช้สีเดียวกับสีพื้นของเอกสาร
ALIGN ใช้กำหนดการชิดซ้าย
กึ่งกลางหรือชิดขวา มีผลเฉพาะช่องตารางที่กำหนด VALIGN ใช้กำหนดชิดบน
กึ่งกลาง ชิดล่าง หรือตามแนวหลัก มีผลเฉพาะช่องตารางที่กำหนด WIDTH ใช้กำหนดความกว้างของช่องตารางนั้น
[width=ค่าตัวเลข]หน่วยเป็น pixel (ระวัง อย่ากำหนดเป็นเปอร์เซนต์เพราะ
IE จะใช้การกำหนดเป็น pixel เท่านั้น
ROWSPAN=n
[rowspan=ค่าตัวเลข]
ตามที่เห็นนี้ช่องแรกกำหนด rowspan=2 COLSPAN=n
: ด้วยการใช้ colspan=2 ทำให้แถวที่เห็นนี้ มีช่องตารางเดียว แต่ขยายเท่ากันสองช่อง
COLSTART=n
: ใช้เพื่อระบุตำแหน่งช่องตารางร่วมกับคำสั่ง COLSPAN เมื่อ n คือคอลัมน์ที่ต้องการวางข้อความหรือรูปภาพ
ข้อควรจำ
: การเขียนภาษาไทยในตาราง จะต้องกำหนดชุดคำสั่ง <FONT FACE
= ตัวอักษรไทย>
</FONT> ในทุกๆช่องตาราง TD การเขียนชุดคำสั่ง
FONT คล่อมตารางทั้งตาราง ทำไม่ได้
|
