Sax Knowledge : Share Your Knowledge
ยินดีต้อนรับเข้าสู่ Sax Knowledge : Share your knowledge

กรุณาล็อคอิน เพื่อใช้งานได้อย่างเต็มรูปแบบ เพราะมีบางบอร์ดถูกล็อคอยู่

บทที่ 9 [HTML]คำสั่ง <table>

อ่านหัวข้อก่อนหน้า อ่านหัวข้อถัดไป Go down

บทที่ 9 [HTML]คำสั่ง <table>

ตั้งหัวข้อ  Admin on Mon 16 May 2011, 8:09 am

ในการสร้างเว็บเพจในปัจจุบัน ตารางถือว่าเป็นส่วนที่สำคัญมากในการสร้างเว็บเพจ เพราะนอกจากจะใช้ในการแสดงข้อมูลแบบปกติแล้ว ตารางแบบไม่มีเส้น ยังนิยมมาแบ่งส่วนเว็บไซต์ มากกว่าการใช้ 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 ขีดเฉพาะขอบด้านขวา
avatar
Admin
Admin
Admin

จำนวนข้อความ : 150
Join date : 11/05/2011

ดูข้อมูลส่วนตัว http://saxknowledge.thai-forum.net

ขึ้นไปข้างบน Go down

อ่านหัวข้อก่อนหน้า อ่านหัวข้อถัดไป ขึ้นไปข้างบน


 
Permissions in this forum:
คุณไม่สามารถพิมพ์ตอบ