Webmaster Guide - www.it-guides.com

HTML Language
เรียนรู้การสร้าง web แบบมืออาชีพ

บทเรียนที่ 6 : การสร้างตาราง หรือ Table

Table คำสั่งสำคัญในการสร้าง Web page

ตารางหรือ table เป็นส่วนหนึ่งที่สำคัญอย่างมากในการสร้างเอกสาร HTML เพื่อให้เกิดความหลากหลายในหน้าตาของเอกสาร และเราสามารถนำรูปภาพมาใส่ในตาราง เพื่อให้สามารถควบคุมตำแหน่งของภาพได้ดียิ่งขึ้น ลองดูตัวอย่างการสร้างตารางได้เลยครับ

ตัวอย่างการสร้างตาราง

<HTML>
<HEAD>

<TITLE> โปรแกรมแรกของดิฉัน </TITLE>

</HEAD>
<BODY>

<table border = "1">
<caption> ข้อความส่วนบนของตาราง </caption>
<tr><th>คอลัมภ์ ที่ 1 </th><th> คอลัมภ์ที่ 2 </th></tr>
<tr><td>ข้อมูลแถว ที่ 1/1 </td><td>ข้อมูลแถวที่ 1/2 </td></tr>
<tr><td>ข้อมูลแถว ที่ 2/1 </td><td>ข้อมูลแถวที่ 2/2 </td></tr>
</table>

</BODY>
</HTML>

หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML

ผลการรันด้วย Internet Explorer

รายละเอียดความหมายของแต่ละคำสั่ง

<table> </table>
ความหมาย : - คำสั่งในการสร้างตาราง จะต้องใส่ tag "/" เสมอทุกครั้ง สำหรับคำสั่ง border คือคำสั่งในการกำหนดเส้นขอบของตารางว่ามีความหนาเท่าใด ถ้าใส่ "0" จะไม่แสดงขอบของตาราง
<captain> </captain>
ความหมาย : - คำสั่งในการแสดงข้อความ อธิบายเนื้อหาของตาราง เพื่อให้ผู้อ่านเข้าใจว่าเราต้องการแสดงเกี่ยวกับเรื่องอะไร (เราสามารถตัดคำสั่งนี้ caption ออกก็ได้)
<tr> <th>
ความหมาย : - คำสั่งในการกำหนดแถวในตาราง TR หมายถึง Table Row ส่วนคำสั่ง TH หมายถึง Table Head ใช้เพื่อกำหนดหัวเรื่องในแต่ละคอลัมภ์ในตาราง และที่สำคัญจะต้องมี tag "/" ปิดด้วยเสมอ ดูตัวอย่างประกอบให้ดี ๆ
<tr> <td>
ความหมาย : - คำสั่งในการกำหนดแถวในตาราง TR หมายถึง Table Row ส่วนคำสั่ง TD หมายถึง Table Data ใช้เพื่อกำหนดข้อมูลในตาราง และที่สำคัญจะต้องมี tag "/" ปิดด้วยเสมอ ดูตัวอย่างประกอบให้ดี ๆ

ยินดีด้วยค่ะ !
คำสั่งตารางที่เห็นอยู่นี้เป็นเพียงตัวอย่างหนึ่ง เท่านั้น ถ้าต้องทราบคำสั่งเพิ่มเติมสำหรับการสร้างตาราง (ซึ่งมีอีกมากมาย) ให้ศึกษาจาก รายละเอียดคำสั่งของเอกสาร HTML ได้ค่ะ เรามั่นใจว่าหลังจากที่คุณศึกษาถึงจุดนี้แล้ว คงจะทำให้คุณได้มีความเข้าใจในภาษา HTML มากยิ่งขึ้น บทต่อไป บทเรียนที่ 7 - : การสร้างแบบฟอร์ม ตอนที่ 1

Always Online