บทที่ 9 [HTML]คำสั่ง <table>
หน้า 1 จาก 1
บทที่ 9 [HTML]คำสั่ง <table>
ในการสร้างเว็บเพจในปัจจุบัน ตารางถือว่าเป็นส่วนที่สำคัญมากในการสร้างเว็บเพจ เพราะนอกจากจะใช้ในการแสดงข้อมูลแบบปกติแล้ว ตารางแบบไม่มีเส้น ยังนิยมมาแบ่งส่วนเว็บไซต์ มากกว่าการใช้ frameset เสียอีก งั้นเรามาดูกันเลย ว่าตารางสร้างอย่างไร
ตารางจากภาษา HTML อาจจะดูยาก เมื่อเทียบกับ ตารางที่สร้างจากโปรแกรม Microsoft Office Word แต่หากเราเข้าใจ คำสั่งหลักของภาษา HTML ตารางนั้นก็สร้างได้ด้วยความสามารถของเราครับ
คำสั่งหลักๆของตาราง ได้แก่
<table> เป็นคำสั่งเพื่อ เริ่ม และหยุดใช้คำสั่งตาราง
<caption> เป็นคำสั่งใส่คำอธิบายที่หัวตาราง
<tr> เป็นคำสั่งสร้างแถว
<th> เป็นคำสั่งสร้างคอลัมภ์ ที่เป็นหัวเรื่อง โดยตัวอักษรภายใต้แท็กนี้ จะเป็นตัวหนา
<td> เป็นคำสั่งสร้างคอลัมภ์ทั่วๆไป
ตัวอย่างรูปแบบตาราง (ที่เว้นบรรทัด เพื่อป้องกันต่อการสับสน) สามารถเพิ่มแถว - คอลัมภ์ได้
<table>
<caption>อธิบายตาราง</caption>
<tr>
<th>หัวเรื่องช่องที่ 1</th>
<th>หัวเรื่องช่องที่ 2</th>
<th>หัวเรื่องช่องที่ 3</th>
</tr>
<tr>
<td>รายละเอียดที่ 1</th>
<td>รายละเอียดที่ 2</th>
<td>รายละเอียดที่ 3</th>
</tr>
<tr>
<td>รายละเอียดที่ 4</th>
<td>รายละเอียดที่ 5</th>
<td>รายละเอียดที่ 6</th>
</tr>
</table>
คำสั่งเพิ่มเติม (Anttribute) ของตาราง ผลจะขึ้นอยู่กับ ตำแหน่งที่นำไปใส่ เช่น <tr> ก็จะแสดงผลทั้งแถวที่ใส่ เป็นต้น บางคำสั่งก็ใส่ได้ทุกแท็ก บางคำสั่งก็ใส่ได้บางแท็ก ผู้ใช้เองก็ลองทดลองดูละกันครับ เพราะคำสั่งเพิ่มเติม มีจำนวนมาก
align = "left" กำหนดให้ชิดซ้าย align = "center" กำหนดให้อยู่กึ่งกลาง align = "right" กำหนดให้ชิดขวา
background = "url" กำหนดภาพ background แบบเดียวกับทำพื้นหลังเว็บ
bgcolor = "cccccc" กำหนดสีพื้นหลังของตาราง โดยต้องกำหนดเป็นรหัสเลขฐานสิบหก ทำแบบเดียวกับการกำหนดพื้นหลังเว็บ
border = "n" กำหนดความหนาของเส้นขอบเป็น n พิกเซล
bordercolor = "000000" กำหนดสีของเส้นขอบตาราง โดยต้องกำหนดเป็นรหัสเลขฐานสิบหก
cellpadding = "n" กำหนดระยะห่าง ระหว่างเนื้อหา กับเส้นขอบตาราง เป็น n พิกเซล
cellspacing = "n" กำหนดขนาดเส้นตาราง เป็น n พิกเซล
width = "n" กำหนดความกว้าง เป็น n พิกเซล
height = "n" กำหนดความสูง เป็น n พิกเซล
valign = "top" กำหนดทิศทางของข้อความในแนวตั้ง ให้ชิดขอบบน
valign = "middle" กำหนดทิศทางของข้อความในแนวตั้ง ให้อยู่กึ่งกลาง
valign = "bottom" กำหนดทิศทางของข้อความในแนวตั้ง ให้ชิดขอบล่าง
colspan = "n" กำหนดผสานเซลล์ ให้เป็น n ช่อง จากปกติ
rowspan = "n" กำหนดผสานแถว ให้เป็น n ช่อง จากปกติ
frame = "frame type" เป็นการกำหนดการขีดเส้นตาราง โดย เปลี่ยน frame type เป็น
void ไม่มีเส้นขอบ, border ขีดทุกเส้น, box ขีดเฉพาะกรอบสี่เหลี่ยมเท่านั้น, above ขีดเฉพาะด้านบน, below ขีดเฉพาะด้านล่าง, hsides ขีดเฉพาะแนวนอน, vsides ขีดเฉพาะแนวตั้ง, lhs ขีดเฉพาะขอบด้านซ้าย, rhs ขีดเฉพาะขอบด้านขวา
ตารางจากภาษา HTML อาจจะดูยาก เมื่อเทียบกับ ตารางที่สร้างจากโปรแกรม Microsoft Office Word แต่หากเราเข้าใจ คำสั่งหลักของภาษา HTML ตารางนั้นก็สร้างได้ด้วยความสามารถของเราครับ
คำสั่งหลักๆของตาราง ได้แก่
<table> เป็นคำสั่งเพื่อ เริ่ม และหยุดใช้คำสั่งตาราง
<caption> เป็นคำสั่งใส่คำอธิบายที่หัวตาราง
<tr> เป็นคำสั่งสร้างแถว
<th> เป็นคำสั่งสร้างคอลัมภ์ ที่เป็นหัวเรื่อง โดยตัวอักษรภายใต้แท็กนี้ จะเป็นตัวหนา
<td> เป็นคำสั่งสร้างคอลัมภ์ทั่วๆไป
ตัวอย่างรูปแบบตาราง (ที่เว้นบรรทัด เพื่อป้องกันต่อการสับสน) สามารถเพิ่มแถว - คอลัมภ์ได้
<table>
<caption>อธิบายตาราง</caption>
<tr>
<th>หัวเรื่องช่องที่ 1</th>
<th>หัวเรื่องช่องที่ 2</th>
<th>หัวเรื่องช่องที่ 3</th>
</tr>
<tr>
<td>รายละเอียดที่ 1</th>
<td>รายละเอียดที่ 2</th>
<td>รายละเอียดที่ 3</th>
</tr>
<tr>
<td>รายละเอียดที่ 4</th>
<td>รายละเอียดที่ 5</th>
<td>รายละเอียดที่ 6</th>
</tr>
</table>
คำสั่งเพิ่มเติม (Anttribute) ของตาราง ผลจะขึ้นอยู่กับ ตำแหน่งที่นำไปใส่ เช่น <tr> ก็จะแสดงผลทั้งแถวที่ใส่ เป็นต้น บางคำสั่งก็ใส่ได้ทุกแท็ก บางคำสั่งก็ใส่ได้บางแท็ก ผู้ใช้เองก็ลองทดลองดูละกันครับ เพราะคำสั่งเพิ่มเติม มีจำนวนมาก
align = "left" กำหนดให้ชิดซ้าย align = "center" กำหนดให้อยู่กึ่งกลาง align = "right" กำหนดให้ชิดขวา
background = "url" กำหนดภาพ background แบบเดียวกับทำพื้นหลังเว็บ
bgcolor = "cccccc" กำหนดสีพื้นหลังของตาราง โดยต้องกำหนดเป็นรหัสเลขฐานสิบหก ทำแบบเดียวกับการกำหนดพื้นหลังเว็บ
border = "n" กำหนดความหนาของเส้นขอบเป็น n พิกเซล
bordercolor = "000000" กำหนดสีของเส้นขอบตาราง โดยต้องกำหนดเป็นรหัสเลขฐานสิบหก
cellpadding = "n" กำหนดระยะห่าง ระหว่างเนื้อหา กับเส้นขอบตาราง เป็น n พิกเซล
cellspacing = "n" กำหนดขนาดเส้นตาราง เป็น n พิกเซล
width = "n" กำหนดความกว้าง เป็น n พิกเซล
height = "n" กำหนดความสูง เป็น n พิกเซล
valign = "top" กำหนดทิศทางของข้อความในแนวตั้ง ให้ชิดขอบบน
valign = "middle" กำหนดทิศทางของข้อความในแนวตั้ง ให้อยู่กึ่งกลาง
valign = "bottom" กำหนดทิศทางของข้อความในแนวตั้ง ให้ชิดขอบล่าง
colspan = "n" กำหนดผสานเซลล์ ให้เป็น n ช่อง จากปกติ
rowspan = "n" กำหนดผสานแถว ให้เป็น n ช่อง จากปกติ
frame = "frame type" เป็นการกำหนดการขีดเส้นตาราง โดย เปลี่ยน frame type เป็น
void ไม่มีเส้นขอบ, border ขีดทุกเส้น, box ขีดเฉพาะกรอบสี่เหลี่ยมเท่านั้น, above ขีดเฉพาะด้านบน, below ขีดเฉพาะด้านล่าง, hsides ขีดเฉพาะแนวนอน, vsides ขีดเฉพาะแนวตั้ง, lhs ขีดเฉพาะขอบด้านซ้าย, rhs ขีดเฉพาะขอบด้านขวา
Similar topics
» บทที่ 5 [HTML] คำสั่ง <ul> <ol>
» บทที่ 7 [HTML] คำสั่ง <img>
» บทที่ 11 [HTML]คำสั่ง <frameset>
» บทที่ 4 [HTML] คำสั่ง <body>
» บทที่ 6 [HTML] คำสั่ง <dl> <dir> <menu>
» บทที่ 7 [HTML] คำสั่ง <img>
» บทที่ 11 [HTML]คำสั่ง <frameset>
» บทที่ 4 [HTML] คำสั่ง <body>
» บทที่ 6 [HTML] คำสั่ง <dl> <dir> <menu>
หน้า 1 จาก 1
Permissions in this forum:
คุณไม่สามารถพิมพ์ตอบ
|
|