:: เมนูหลัก
 แบบทดสอบก่อนเรียน
 หน่วยที่ 1 โลกของเว็บเพจและเว็บไซต์
 หน่วยที่ 2 เริ่มต้นกับ HTML
 หน่วยที่ 3 การจัดการข้อความ
 หน่วยที่ 4 การใช้ลิสต์สร้างรายการ
 หน่วยที่ 5 การแทรกภาพ
 หน่วยที่ 6 การสร้างตาราง
 แบบทดสอบก่อนเรียน
เริ่มสร้างตาราง
 การปรับขนาดตาราง
 การกำหนดความกว้างของคอลัมน์
 การใส่หัวเรื่องให้กับตาราง
 การใส่ข้อความกำกับตาราง
 การกำหนดระยะห่างของช่องเซลล์
 การผสานเซลล์
 การใส่พื้นหลังให้กับตาราง
 การจัดตำแหน่งตารางและข้อมูล
 การใส่รูปภาพในตาราง
 การแบ่งส่วนตาราง
 แบบฝึกหัด
 แบบทดสอบหลังเรียน
 หน่วยที่ 7 การเชื่อมโยงเว็บเพจด้วยลิงค์
หน่วยที่ 8 การใช้งานไฟล์วีดีโอและเสียง
 หน่วยที่ 9 การสร้างฟอร์ม
 แบบทดสอบหลังเรียนเรียน
:: หน่วยที่ 6 การสร้างตาราง (Table)
เริ่มสร้างตาราง


หากต้องการนำเสนอข้อมูลที่มีปริมาณมากๆ หรือข้อมูลที่ต้องมีการเปรียบเทียบกันการนำเสนอข้อมูลในรูปแบบของตารางจะช่วยทำให้ข้อมูลประเภทนี้ดูง่ายยิ่งขึ้นและเป็นระเบียบเรียบร้อยอ่านได้ง่ายกว่าปกติ การสร้างตารางในเอกสาร HTML มีอยู่หลายรูปแบบแล้วแต่ผู้เขียนโปรแกรมจะกำหนดโดยใช้คำสั่งต่าง ๆ แท็กในการสร้งตาราง มีดังนี้ <table> , <tr> และ <td>

Tag
ชื่อแท็ก table , tr และ td
ตำแหน่งแท็ก table อยู่ภายในแท็ก <body>...</body> 
tr อยู่ภายในแท็ก <table>...</table>
td อยู่ภายในแท็ก <tr>...</tr>
รูปแบบการใช้แท็ก <table>
    <tr><td>ข้อมูล</td><td>ข้อมูล</td></tr>
    <tr><td>ข้อมูล</td><td>ข้อมูล</td></tr>
    ...
</table>

จำนวนแท็ก <tr>...</tr> เป็นการกำหนดจำนวนแถวในตาราง และจำนวนแท็ก <td>...</td> เป็นการกำหนดจำนวนคอลัมน์ในแต่ละแถว ตัวอย่างต่อไปนี้เป็นการสร้างตาราง 2 แถว 2 คอลัมน์ ส่วนข้อมูลที่อยู่ในตารางจะใส่ในแท็ก <td>...</td> สำหรับตัวอย่างนี้จะยังไม่ใส่ข้อมูลลงไปในตารางแต่จะใส่แท็ก &nbsp; ลงไปเพื่อให้ตารางแสงผลลัพธ์ได้



ตัวอย่างการใช้งาน
<body>
<table>
    <tr> <td>เซลล์ที่ 1</td> <td>เซลล์ที่ 2</td> </tr>
    <tr> <td>เซลล์ที่ 3</td> <td>เซลล์ที่ 4</td> </tr>
</table>

</body>

การแสดงผล

จากการทดลองสร้างตารางจะเห็นได้ว่าข้อมูลจะเรียงกันเป็นแถว แต่จะไม่แสดงเส้นตารางซึ่งในการแสดงเส้นตาราง จะต้องกำหนดแอททริบิวต์ให้แสดงเส้นตาราง


การการกำหนดเส้นตาราง


ในการสร้างตารางปกติถ้าไม่ได้กำหนดขนาดเส้นตาราง จะทำให้ไม่สามารถมารถมองเห็นหรือแสดงเป็นเส้นตาราง การำหนดให้แสดงเ้ส้นตารางจะใ้ช้ แอททริบิวท์ border

Attribute
ชื่อแอททริบิวท์ border
ตำแหน่งแท็ก อยู่ในแท็กเปิด <table>
รูปแบบการใช้แท็ก <table border="value">... </table>
value ค่ากำหนดเป็นตัวเลข เช่น 1 2 3

ตัวอย่างการใช้งาน
<body >
<table border="1">
    <tr> <td>เซลล์ที่ 1</td> <td>เซลล์ที่ 2</td> </tr>
    <tr> <td>เซลล์ที่ 3</td> <td>เซลล์ที่ 4</td> </tr>
</table>
</body>

การแสดงผล

 


วีดีโอ