Jirayu 的个人资料Mr.Whisper照片日志列表更多 工具 帮助

日志


2007年11月

รู้จักกับ HTML ฉบับใช้เป็น #3

คราวนี้ผมจะเสนอเรื่องเกี่ยวกับกับมาตรฐานที่ใช้ออกแบบหน้าเว็บอย่างหนึ่งก็คือการใช้ตารางครับ  ซึ่งขอบอกก่อนว่าปัจจุบันฝรั่งเขาไม่นิยมใช้วิธีนี้กันแล้วครับถึงแม้มันจะโหลดได้เร็วและง่ายก็ตามที  เหตุผลน่ะเหรอ?  ฝรั่งเขาบอกว่าชื่อมันบอกว่าตาราง  ก็ควรจะให้มันทำหน้าที่เป็นตารางสิ  อ้าว - -"

มาตรฐานการจัดหน้าเว็บด้วย <table> ตอนที่ 1
การสร้างตารางนั้นจะแบ่งออกเป็น 3 แท็กย่อยๆลงไปนะครับ  ซึ่งการเขียนโครงสร้างตารางจะใช้ดังนี้ครับ


<table>
   <tr>
     <td>
       ...
      
เนื้อหา
       ...
     </td>
   </tr>
</table>

 

ซึ่งการสร้างตารางแบบนี้จะเป็นเพียงแค่โครงสร้างพื้นฐานครับ  output ออกมาไม่ค่อยงามนักหรอก  ซึ่งแท็กต่างๆสามารถอธิบายได้ดังนี้ครับ  คือ


<table> ... </table>   : ประกาศสร้างตาราง
 
<tr> ... </tr>         : สร้างแถวแนวนอน (row)
 <td> ... </td>         : สร้างแถวแนวตั้งหรือคอลัมน์ (column)

 

ซึ่งตารางที่ได้จากโค๊ดด้านบนนั้นจะไม่สวยงามนักอย่างที่บอกไป  ซึ่งเราสามารถกำหนดพารามิเตอร์เพิ่มเติมให้กับตารางได้อีกด้วย  เช่นขนาดเส้นขอบ  สีเส้นขอบ  สีพื้นหลัง  รูปภาพพื้นหลัง  ความกว้าง  ความสูง  หรือรูปแบบ(สไตล์)  รวมถึงระยะหว่างระหว่างเซลล์  และระยะห่างจากเซลล์อีกด้วยนะครับ

ส่วนพารามิเตอร์ที่เราจะใช้บ่อยๆนั้น  จะมีอยู่เพียงไม่กี่ตัวเท่านั้นครับ  คือ background , bgcolor , border , bordercolor , width , height , cellpadding , cellspacing , class และ style ครับ


background     : กำหนดภาพพื้นหลังของตาราง
bgcolor        : กำหนดสีพื้นหลังของตาราง(จะอยู่ใต้ภาพอีกทีหนึ่ง)
border         : กำหนดขนาดเส้นขอบ
bordercolor    : กำหนดสีเส้นขอบ
width          : กำหนดความกว้าง
height         : กำหนดความสูง
cellpadding    : กำหนดระยะห่างจากขอบเซลล์
cellspacing    : กำหนดพื้นทีว่างระหว่างเซลล์
class          : กำหนดคลาส(คลาสใน css)
style          : กำหนด style

 

ทีนี้จะเกิดคำถามกัน  ว่าแอตทริบิวต์ไหนใช้กับแท็กไหนบ้าง  ก็จะสามารถแยกได้ตามนี้ครับ(ตามที่ผมเคยใช้นะ)

  Table tr td
background / / /
bgcolor / / /
border /    
bordercolor /    
width / / /
height     /
cellpadding /    
cellspacing /    
class / / /
style / / /

คราวนี้ผมต้องขอจบเรื่องของตารางไว้แค่นี้ก่อนนะครับ  เดี๋ยววันหลังจะมาอัพต่อ  เพราะยังเหลือเรื่อง colspan และ cellspan อยู่อีก  ไม่ยาวมาก  แต่วันนี้ขี้เกียจแล้ว -*-  แล้วกันในตอนต่อไปครับ