พื้นฐาน HTML

Table จัดข้อมูลให้อยู่ในรูปแบบตาราง

คำสั่ง Table สำหรับแสดงตัวเลขหรือค่าต่างๆที่ต้องการจัดให้อยู่ในรูปแบบตาราง

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

1. ลองสร้างตารางดู
ตารางจะแบ่งออกเป็น 2 ส่วน คือ

1. แถว คือจำนวนตารางในแนวนอน
2. หลัก คือจำนวนตารางในแนวตั้ง

รูปแบบของคำสั่งตาราง

<table>
    <tr>
        <td></td>
    </tr>
</table>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


2. เส้นขอบตาราง
เมื่อพูดถึงตารางก็ต้องพูดถึงเส้นขอบของตาราง ซึ่งในบทนี้จะพูดถึงการกำหนดเส้นขอบของตาราง โดยขอบของตารางเราจะใช้ Attibute คำสั่ง border ในการควบคุม

รูปแบบของคำสั่ง border

<table border="ขนาดเส้นของขอบ"> 
    <tr>
        <td></td>
    </tr> 
</table>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


3. หัวข้อตาราง
ปรกตินั้นถ้าเราจะเขียนส่วนที่เป็นหัวข้อเราจะใช้ h tag หรือ <b> เพื่อเน้นส่วนที่เป็นหัวข้อ แต่ในส่วนของตารางมีคำสั่งให้เราใช้กันอยู่แล้ว นั่นคือ th

รูปแบบของคำสั่ง border

<table> 
    <tr>
        <th></th>
    </tr> 
</table>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


4. ใส่ช่องว่างให้ตาราง
ถ้าเรามีตาราง 6 ช่อง แต่มีข้อมูลอยู่เพียง 5 ชิ้น เมื่อเราเขียนข้อมูลใส่ตารางจะพบว่าตารางแสดงผลมีเส้นขาดหายไปดังนั้นเราจึงต้องใส่ค่าว่างไปให้ตารางเพื่อแสดงผลเส้นที่ขาดหายไป ด้วยการใช้ & nbsp ;

การใช้ช่องว่าง

<table> 
    <tr>
        <td> & nbsp ; </td>
    </tr> 
</table>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


5. การผสานตาราง
ถ้าข้อมูลเขาเรา มี 1 หัวข้อใหญ่แต่มีข้อมูล ย่อยๆ 2 ชนิด ทำให้เราต้องทำการผสานตารางตามตัวอย่าง โดยมีหลักดังนี้

1.ผสานในหลักให้ใช้คำสั่ง colspan = "จำนวนช่องที่ต้องการผสาน"

2.ผสานในแถวให้ใช้คำสั่ง rowspan = "จำนวนช่องที่ต้องการผสาน"

คลิกเพื่อทดลองเขียนด้วยตัวเอง


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

คลิกเพื่อทดลองเขียนด้วยตัวเอง



7. กำหนดระยะห่างของช่อง

ในตัวอย่างจะเป็นการแสดงการใช้งาน cellpadding และ cellspacing โดยทั้ง 2 อย่างมีการใช้งานดังนี้

1. cellpadding ใช้กำหนดระยะห่างระหว่างข้อมูล กับเส้นขอบตาราง

2. cellspacing ใช้กำหนดระยะห่างระหว่างเส้นตารางภายนอก และภายใน ให้ลองสังเกตุจากตัวอย่างดู จะเห็นว่าแตกต่างจากการใช้ border

คลิกเพื่อทดลองเขียนด้วยตัวเอง



8. ใส่พื้นหลังให้ตาราง

ในบทนี้จะใส่พื้นหลังให้กับตาราง และช่องของตาราง โดยพื้นหลังมี 2 แบบคือ

1.แบบที่เป็นสี ใช้คำสั่ง bgcolor

2.แบบที่เป็นรูปภาพ ใช้คำสั่ง background

คลิกเพื่อทดลองเขียนด้วยตัวเอง



9. ขนาดตาราง

ขนาดของตารางกำหนดได้โดย Attibute คำสั่ง width และความสูงใช้คำสั่ง height ซึ่งเราจะกำหนดหน่วยเป็น % หรือ px(pixel) แล้วแต่จุดประสงค์

1.แบบเปอร์เซนต์ (%) ขนาดจะเปลี่ยนตามขนาดหน้าต่างของ web browser ที่เปลี่ยนแปลง

2.แบบ pixel (px) ขนาดจะเท่าที่เรากำหนดตลอดไม่มีการเปลี่ยนแปลง ถ้าเราไม่กำหนดหน่วยเป็น % ตัวของ html จะกำหนดให้เป็น px เสมอ

คลิกเพื่อทดลองเขียนด้วยตัวเอง


10. การจัดเรียงตัวอักษรในช่องของตาราง
ในบทนี้จะเป็นเรื่องของ การจัดเรียงตัวอักษร หรือ รูปภาพ ในช่องของตารางให้ชิดซ้าย หรือชิดขวา หรือจัดเข้ากึ่งกลาง ซึ่งจะทำให้ตารางข้อมูลดูได้ง่ายขึ้น ซึ่งเราจะใช้ Attibute คำสั่ง Align

คลิกเพื่อทดลองเขียนด้วยตัวเอง


11. การกำหนดขอบของตาราง
ขอบของตารางเราสามารถกำหนดได้ว่าจะให้มีขอบที่ด้านใดบ้าง โดยใช้ Attibute คำสั่ง frame ซึ่งมีค่าที่ใส่ให้ frame ตามข้อมูลด้านล่าง

BORDER แสดงเส้นกรอบทุกด้านของช่องตาราง
VOID ลบเส้นกรอบทุกด้านของตาราง
HSIDES แสดงเส้นด้านบนและด้านล่างของช่อางตาราง
ABOVE แสดงเส้นด้านบนของช่องตาราง
BELOW แสดงเส้นด้านล่างของช่องตาราง
VSIDES แสดงเส้นด้านซ้ายและด้านขวาของช่องตาราง
LHS แสดงเส้นด้านซ้ายของช่องตาราง
RHS แสดงเส้นด้านขวาของช่องตาราง


คลิกเพื่อทดลองเขียนด้วยตัวเอง


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


เลื่อนขึ้นด้านบน