How to ตกแต่งนิยาย / ไอดี

ลำดับตอนที่ #23 : ตาราง ฉบับ html ของคนทำเว็บ

เห็นหลายคนงงเรื่องตาราง เลยจับแยกมาให้เป็นอีกหัวข้อเลย ไม่รู้จะงงอีกรึเปล่าน้า ความจริงเรื่องนี้แม้อาจจะไม่จำเป็นสำหรับการแต่งไอดีกับนิยายสักเท่าไหร่ แต่ก็เป็นพื้นฐานที่เอาไปสร้างเว็บเพจเป็นของตนเองได้ แล้วก็เป็นพื้นฐานสำหรับการจัดหน้าให้สวยงามด้วยค่ะ รู้ไว้ใช่ว่าเนอะ เพื่ออนาคตจะทำเว็บของตัวเอง ^^


คำชี้แจงเล็กๆน้อยๆ บางคนอาจคิดว่า รู้ html ไปทำไมในเมื่อปัจจุบันมีโปรแกรมเขียนเว็บสำเร็จให้อยู่แล้ว สำหรับมือสมัครเล่น เราคิดว่าโอเค ไม่จำเป็นต้องรู้ก็ได้ แต่สำหรับคนมุ่งมั่นจะเป็นมืออาชีพ (พวกเว็บโปรแกรมเมอร์ ฯลฯ) มันคือสิ่งที่ขาดไม่ได้เลยล่ะค่ะ


ส่วนประกอบของตาราง ก็มีดังรูป



แนวนอนจะเรียกว่า "แถว" หรือ row ส่วนแนวตั้งจะเรียกว่า column หรือ "คอลัมม์" (ขอทับศัพท์) ส่วนช่องแต่ละช่องเรียกว่าเซลล์ cell
cellpadding, cellspacing มันคือระยะเว้นของตาราง ดูจากรูปละกัน อธิบายไม่ถูก
นอกจากนี้ยังมีเส้นขอบ (border) และคุณสมบัติอื่นๆ อีกมากมาย จะทยอยบอกทีหลังค่ะ


มาดูแท็ก html ที่สร้างตารางนี้ขึ้นมากันดีกว่า

<table width="50%" border="1" cellspacing="10" cellpadding="20">
  <tr>
    <td>test1</td>
    <td>test2</td>
    <td>test3</td>
  </tr>
  <tr>
    <td>test4</td>
    <td>test5</td>
    <td>test6</td>
  </tr>
</table>

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


สิบปากว่าไม่เท่าตาเห็น ลองสังเกตการเรียงของแท็ก เทียบกับรูปดูเองนะคะ แล้วก็ลองเขียนดู รับรองว่าไม่ยากอย่างที่คิดแน่ค่ะ ^^