หลายคนกำลังรอคอยเรื่องการใช้ตารางแบบ xhtml อยู่ แต่ความแตกต่าง ระหว่าง html 4.0 กับ xhtml 1.0 มันก็ไม่มีอะไรมากมายนักหรอกครับ แต่ว่า เขาพัฒนาให้มันเฉพาะเจาะจงมากยิ่งขึ้นนั่นเอง เช่นว่า ตารางที่คุณกำลังเขียนนั้นเอาไว้ใช้กับข้อมูลอะไร ย้ำนะครับว่า เอาไว้แสดงผลข้อมูล ไม่ได้แสดงผลกราฟฟิคเลย์เอ้าท์
การเขียนโค้ดตารางทั่วไปเช่น ผมต้องการเขียนตารางเพื่อให้แสดงผล การแข่งขันฟุตบอล คู่ระหว่าง อาเซน่อลกับลิเวอร์พูล ที่เจอกันใน 3 ถ้วย 3 นัด ที่ผ่านมา ปกติทั่วไปต้องคิดก่อนว่า จะให้แสดงแถว และคอลัมน์ อะไรกันมั่ง ถ้า 3 นัดก็ 3 แถว ส่วนคอลัมน์ นั้น ไปดูกันเลยครับ
1. html ธรรมดา ที่คุ้นเคย
<table width="500">
<tr>
<td colspan="5">ตารางแสดงผลการแข่งขันฟุตบอลระหว่าง ลิเวอร์พูล VS อาเซน่อล
ฤดูกาล 2006-2007</td>
</tr><
<tr>
<td>นัดที่</td>
<td>ถ้วย/เวที</td>
<td>ลิเวอร์พูล</td>
<td>อาเซน่อล</td>
<td>ผล</td>
</tr>
<tr>
<td>1</td>
<td>พรีเมียร์ชิพ</td>
<td>0</td>
<td>3</td>
<td>อาเซน่อลชนะ</td>
</tr>
<tr>
<td>2</td>
<td>เอฟเอคัพ</td>
<td>1</td>
<td>3</td>
<td>อาเซน่อลชนะ</td>
</tr>
<tr>
<td>3</td>
<td>มิคกี้เมาส์</td>
<td>3</td>
<td>6</td>
<td>อาเซน่อลชนะ</td>
</tr>
</table>
2. XHTML
<table summary="นี่เป็นตารางแสดงผลการแข่งขันฟุตบอลทุกถ้วย ระหว่าง
ลิเวอร์พูลกับอาเซน่อล ของทุกถ้วยในฤดูการ 2006-2007 อิอิ หนึ่งโหลที่หงษ์แดงโดนยิง
ดูเด็ค ฝากมาบอกว่า ....หนูขอโทษ...." style="width: 500px;">
<caption>ตารางแสดงผลการแข่งขันฟุตบอลระหว่าง
ลิเวอร์พูล VS อาเซน่อล ฤดูกาล 2006-2007</caption>
<tr>
<th>นัดที่</th>
<th>ถ้วย/เวที</th>
<th>ลิเวอร์พูล</th>
<th>อาเซน่อล</th>
<th>ผล</th>
</tr>
<tr>
<td>1</td>
<td>พรีเมียร์ชิพ</td>
<td>0</td>
<td>3</td>
<td>อาเซน่อลชนะ</td>
</tr>
<tr>
<td>2</td>
<td>เอฟเอคัพ</td>
<td>1</td>
<td>3</td>
<td>อาเซน่อลชนะ</td>
</tr>
<tr>
<td>3</td>
<td>มิคกี้เมาส์</td>
<td>3</td>
<td>6</td>
<td>อาเซน่อลชนะ</td>
</tr>
</table>ซึ่งสิ่งที่เพิ่มเข้ามามากกว่าตารางแบบ html ธรรมดาก็คือ summary, caption, th
Summary คือ แอตทริบิ้ว ที่เป็นตัวอธิบายว่า ตารางนี้ ใช้กับข้อมูลอะไรอยู่ และไม่แสดงผลออกมาทางหน้าบราวเซอร์ แต่จะเห็นในฝั่งโค้ด เพื่อเป็นการอธิบายตารางเอาไว้ครับ
Caption คือ หัวเรื่องของตารางนั่นเอง ใช้แทน colspan ของ td ในกรณีที่ตารางมี พาดหัว
Th คือ หัวข้อของแต่ละคอลัมน์ ครับ
ตารางไม่ใช่มีแค่นี้นะครับ ยังมีอีกเยอะ ไม่ว่าจะเป็น thead, tbody, tfoot แต่เป็นแอตทริบิ้วที่ไม่ค่อยนำมาใช้งาน เขาเลยไม่ได้เรียงลำดับความสำคัญเป็นเรื่องหลักๆ ครับ
ปล. ข้อมูลที่แสดงในตาราง ไม่ได้มีเจตนา อื่นใดแอบแฝงแต่อย่างใด ลูกกลมๆ อะไรก็เกิดได้ครับ บางวัน ปืนใหญ่ก็ห่วยเกินบรรยาย แต่ เจอหงษ์ แล้วไซร้ “เราชอบเป้าบินครับ”
น่านะ นานนาน จะได้ยิ้มอย่างนี้ซะที เดี๋ยวมันก็ไปตกม้าตายกับทีมเล็กๆ
ชอบในความรู้ครับ แต่ไม่ปลื้มในตัวอย่างข้อมูล T T
รู้สึกว่าข้อมูลจะลำเอียง
12 เม็ดขำ ๆ
อ้าว แรกๆก็ใช้อยู่หรอก th หลังๆไม่ค่อยได้ใช้ เพิ่งรู้นะเนี่ย มันต่างจริงๆ !! ฮ่าๆๆ
เราพูดตามความเป็นจริง นะครับ ใช่มั้ยท่านโดม อิอิ น่านะ นินินอยนอย
แล้วใน xhtml แอทริบิวท์ ที่ใช้กับ table ยังคงใช้งานได้อย่างเดิมหรือเปล่าครับ พวก cellpadding, cellspacing หรือ border เนี่ย ผมว่าน่าจะมีบทความเกี่ยวกับพวก thead, tbody, tfoot ด้วยนะครับเพราะใน joomla ใช้บ่อยพอสมควรเลยอ่ะครับ
เออ แต่ ท่านโดม
เราโดนเอาคืนแล้วนี่
โดนพี่คล้าว สอยคนเดียว 3 ลูก
แพ้เขาซะ หมดรูปเลย
สำหรับ cellpadding, cellspacing หรือ border ไม่สามารถเอามาใช้งานได้ครับ
ให้ใช้คำสั่งจาก CSS ทั้งหมด
นะ
ขออธิบายเพิ่มเติมเกี่ยวกับ summary ของตารางนิดหนึ่งนะครับ จริง ๆ แล้ว attribute ตัวนี้มีขึ้นมาก็เพราะเรื่อง Web Accessibility (เว็บที่ทุกคนเข้าถึง) ต้องบอกไว้ก่อนนิดหนึ่งนะครับว่า XHTML กับ CSS นั้นไปเกี่ยวกับเรื่อง Web Accessibility ของคนพิการด้วย เพราะว่าองค์กร W3C นั้นต้องการทำมาตรฐานเว็บที่ทุกคนเข้าถึงได้โดยใช้หลักการของ Universal Design (การออกแบบสำหรับทุกคน) เพราะฉะนั้น XHTML, CSS กับ Web Accessibility (ซึ่งอยู่ในรูปของ WCAG และ WAI) จึงเข้ามาเกี่ยวกันอย่างเลี่ยงไม่ได้
summary ทำมาเพื่ออธิบายภาพโดยรวมของตารางนั้น ๆ ให้คนตาบอดครับ แม้ว่าเราจะไม่เห็นในบราวเซอร์ แต่คนตาบอดที่ใช้โปรแกรมอ่านหน้าจอ (เช่น โปรแกรม JAWS) จะสามารถอ่านข้อมูลนี้ได้ เมื่อทราบข้อมูลโดยรวมแล้วจะทำให้เข้าใจตารางได้มากขึ้น
จะทำ XHTML กับ CSS โดยละทิ้ง Web Accessibility ไม่ได้ครับ เพราะมันถูกพัฒนามาด้วยกัน ที่เมืองนอกเมืองนาเขาก็ไปกันไกลแล้วเรื่องนี้ จนกระทั่งบางประเทศมีกฎหมายบังคับ หรือบางบริษัทถูกคนพิการฟ้องเพราะทำเว็บที่เข้าถึงไม่ได้มาแล้ว แต่เมืองไทยจะมองคนพิการในฐานะที่เป็นพลเมืองชั้น 2 หรือแย่กว่านั้น อยากให้เราคำนึงถึงตรงนี้ด้วย เพราะความต้องการในการเข้าถึงข้อมูลข่าวสารนั้นเป็นความต้องการพื้นฐานของทุกคน
ป.ล. ไม่ได้มาป่วนนะครับ แต่ที่โพสต์ไว้ค่อนข้างหลายกระทู้เพราะดีใจครัีบ ที่มีคนสนใจ ตัวผมเองก็เก็บความรู้เรื่องนี้ไว้เยอะ แต่ไม่ค่อยมีที่เผยแพร่ พอมาเจออย่างนี้ก็เลยเบรกแตกนิดนึง
เยี่ยมเลยพี่ 1 สุดยอด คนพิการก้อคนเนอะ
ใจเขาใจเราดีดีสุ้ๆครับ
ขอบคุณความรู้ พี่ๆๆ ทุกท่านครับ