การสร้างตาราง ในภาษา HTML

posted on 16 Aug 2009 11:08 by mtbkzone
เราจะใช้คำสั่ง <TABLE> ..... </TABLE> ในการสร้างตาราง ส่วนการแสดงรายการ ในตารางจะใช้คำสั่งดังต่อไปนี้
  • <CAPTION> .... </CAPTION> ใช้ระบุชื่อหรือคำอธิบายของตาราง อาจมีส่วนขยาย ALIGN=TOP หรือ BOTTOM เพื่อ วางตำแหน่งไว้เหนือหรือใต้ตาราง
  • <TR> ... </TR> ใช้กำหนดแถว
  • <TD> ... </TD> ใช้กำหนดคอลัมน์
  • <TH> ... </TH> เป็นการเน้นตัวอักษรเข้มให้ตัวอักษรในช่องตารางที่กำหนด
ส่วนขยายของชุดคำสั่งตาราง

 

ชุดคำสั่งต่างๆที่ใช้ในเอกสาร HTML มักมีส่วนขยาย เพื่อเพิ่มคุณสมบัติของชุดคำสั่งนั้นๆ สำหรับชุดคำสั่งตารางมีส่วนขยายที่ควร ทราบดังนี้

ชุดคำสั่ง TABLE มีส่วนขยายที่สำคัญ ดังนี้

BGCOLOR ใช้สำหรับกำหนดสีพื้นตาราง [ bgcolor = " รหัสสี" ] หากไม่ได้กำหนดไว้ browser จะใช้สีเดียวกับสีพื้นของเอกสาร
BORDER สำหรับกำหนดขนาดของเส้นรอบนอกของตาราง [ border = ค่าตัวเลข ] โดยที่ ค่าตัวเลข คือ ความหนาของเส้น ปกติมีค่า = 0
WIDTH ใช้สำหรับกำหนดความกว้างของตาราง [ width = ค่าตัวเลขหรือกำหนดเป็นเปอร์เซ็นต์ ] หน่วยตัวเลขเป็น pixel หรือเป็นเปอร์เซ็นต์ของความกว้างที่มี
HEIGHT ใช้สำหรับกำหนดความสูงของตาราง [ height = ค่าตัวเลข หรือ เปอร์เซ็นต์ ] หน่วยเป็น pixel หรือเปอร์เซ็นต์ของความสูงที่มี
CELLSPACING ใช้สำหรับกำหนดขนาดของเส้นภายในตาราง [ cellspacing = ค่าตัวเลข ] ค่าตัวเลข คือ ความหนาของเส้นหน่วยเป็น pixel
CELLPADDING ใช้สำหรับกำหนดช่องว่าง (margin) ของแต่ละช่องตารางรอบข้อความ
[ cellpadding = ค่าตัวเลข ] หน่วยเป็น pixel

ชุดคำสั่ง TR มีส่วนขยายที่สำคัญ ดังนี้
BGCOLOR ใช้สำหรับกำหนดสีพื้นของแถวนั้นทั้งแถว [ bgcolor = รหัสสี ]
ALIGN ใช้สำหรับกำหนดชิดซ้าย ตรงกลาง หรือชิดขวาทั้งแถว [ align = left, center, right ] หากไม่ได้กำหนดเอาไว้ ข้อความจะชิดซ้ายเสมอ
VALIGN ใช้สำหรับกำหนดชิดบน ตรงกลาง ชิดขอบล่าง หรือชิดแนวหลักของทั้งแถว [ valign = top, middle, bottom, baseline ] หากไม่มีการกำหนดไว้จะจัดกึ่งกลางเสมอ

ชุดคำสั่ง TD มีส่วนขยายที่สำคัญ ดังนี้
BGCOLOR ใช้สำหรับกำหนดสีพื้นของช่องตาราง (เฉพาะช่องที่กำหนด) [ bgcolor = รหัสสี ] ถ้าไม่กำหนดสีพื้นไว้ browser จะใช้สีเดียวกับสีพื้นของเอกสาร
ALIGN ใช้กำหนดการชิดซ้าย กึ่งกลาง หรือชิดขวา มีผลเฉพาะช่องตารางที่กำหนดเท่านั้น
VALIGN ใช้กำหนดชิดขอบบน กึ่งกลาง ชิดขอบล่าง หรือตามแนวหลัก มีผลเฉพาะช่องตารางที่กำหนด
WIDTH ใช้กำหนดความกว้างของช่องตารางนั้น [ width = ค่าตัวเลข ] หน่วยเป็น pixel
ROWSPAN = n rowspan = ค่าตัวเลข
COLSPAN = n colspan = ค่าตัวเลข
COLSTART = n colstart = ค่าตัวเลข ใช้เพื่อระบุตำแหน่งช่องตารางร่วมกับคำสั่ง COLSPAN เมื่อ n คือ คอลัมน์ที่ต้องการวางข้อความหรือรูปภาพ

เช่น หากต้องการสร้างตารางขนาด 2 x 2 เราจะเขียนชุดคำสั่ง ดังนี้
<html>
<head>
<title>การสร้างตาราง</title>
</head>

<body>
<table border=1>
<tr>

<td> เนื้อหา </td>
<td> เนื้อหา </td>
</tr>
<tr>
<td> เนื้อหา </td>
<td> เนื้อหา </td>
</tr>
</table>
</body>
</html>

ซึ่งผลจากคำสั่งด้านบน จะได้ตารางเป็น

เนื้อหา เนื้อหา
เนื้อหา เนื้อหา

ข้อควรจำ

 

การเขียนภาษาไทยในตาราง จะต้องกำหนดชุดคำสั่ง <font face="ชื่อฟอนต์ภาษาไทย"> ... </font> ในทุกๆช่องตาราง TD การเขียนชุดคำสั่ง Font คร่อมตารางจะไม่มีผลใดๆภายในตารางทั้งสิ้น แต่ว่าเราสามารถกำหนดให้ตารางอยู่กึ่งกลาง ของหน้าจอได้โดยการกำหนด <Center> ..... </Center> คร่อมตาราง

 

Comment

Comment:

Tweet

big smile

#1 By Pr Master Pawit on 2013-09-12 09:16