จัดตารางอย่างไร ให้ดูดี

15 สิงหาคม 2010 ผู้ชม: 6187

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

การจัดตารางนั้น เป็นปัญหาปวดหัวของใครหลาย ๆ คนที่จำเป็นต้องใช้ เพราะมักจะโดนฝังรากมากับ MS Word แต่ไหนแต่ไร พอมาใช้ใน Editor นี้ล่ะก็ มันดันไม่เป็นอย่างใจนึกซะนี่ ลองไปดูครับ อะไรบ้างที่เป็นปัญหาระหว่างใช้ตาราง แล้ว จะแก้อย่างไร , กรณีนี้เราใช้ JCE Editor ในการทดสอบอีกครับ (แหม่ ผมติดใจกับ Editor ตัวนี้จริง ๆ สิ)

จัดตาราง ให้อยู่กลาง Page

ปัญหานี้ สุดคลาสสิค ที่ทุกคนอาจจะมองว่ามันง่ายมาก ก็กดปุ่มจัดกึ่งกลางสิ , แหม ถ้ามันไร้ปัญหา ผมก็คงไม่เอามาให้อ่านกันหรอก ถ้าคิดแบบนั้นแสดงว่ายังไม่เคยพบเจอกับตัวเอง ลองดูนะครับว่า จะเกิดอะไรขึ้น

มันไม่มาครับ กดไปสิกึ่งกลาง บางคนเคยเจอ แต่บางคนก็ไม่เคยเจอ

วิธีแก้ไข :

ถ้าจะจัดกึ่งกลาง คุณต้องใช้ Table Property ครับ แล้วกำหนด Alignment ครับ

ต้องทำการแก้ไขตารางที่ใช้อยู่ครับ โดยเลือก Alignment ให้อยู่กึ่งกลางครับ แล้วคุณก็จะได้

จัดข้อความในตาราง

นี่ก็คลาสสิคอีกปัญหาหนึ่งครับ ปกติการจัดข้อความ เราก็จะกดปุ่มจัดกึ่งกลางแบบง่าย ๆ แต่เมื่อเป็นการจัดข้อความในตางราง คุณจะต้องใช้ Style ในการจัดข้อความครับ จึงจะไม่กระทบกับตาราง ลองมาดูครับว่า ถ้าผมกดปุ่มกึ่งกลางจะเกิดอะไรขึ้น

ไฮไลท์ข้อความทั้งหมดเพื่อจัดกึ่งกลาง

อ้าว ไรเนี่ย ทำไมมันเด้งไปอยู่ซ้ายสุด ผมกดปุ่มจัดกึ่งกลางจริง ๆ นะครับเนี่ย แต่มันดันหาว่าเราไปกดปุ่มจัดชิดซ้ายซะงั้น

นี่แหล่ะครับ บางทีกดจัดกึ่งกลางไป ตารางมันก็เด้งไปซ้ายสุดเองเลย แถมบางทีข้อความในตารางก็เบี้ยวอีก คุณก็ต้องมาเสียเวลาจัดกันใหม่อีก เอ้อ ผมก็เจอมาแล้วครับ ตอนแรกปวดหัวมาก เพราะคิดว่ามันก็คงง่าย ๆ นี่แหล่ะ

วิธีแก้ไข :

คุณจะต้องใส่ Attribute ให้กับ Cell นั้น ๆ โดยเฉพาะครับ เหมือนกับการจัดบทความที่แล้ว ซึ่งการทำแบบนี้ค่อนข้างเสียเวลา แต่มันก็ลดผลกระทบกับตารางอื่น ๆ ได้ดีทีเดียวครับ ลองมาดูกัน , เริ่มจากคลิกตรงหน้าข้อความที่ต้องการก่อน แล้วกดปุ่ม Insert Attribute ครับ

แล้วก็ใส่ text-align: center; ลงไปแทนการกดปุ่มจัดกึ่งกลาง

ความสูงของแต่ละ Cell ไม่เท่ากัน

จากภาพที่ผ่าน ๆ มา หากสังเกตแล้วก็จะพบว่า บางแถว หรือบางช่องของตารางนั้น จะมีความสูงไม่เท่ากัน สาเหตุเพราะ แถว aa นั้น เมื่อมองในรูปแบบ HTML จะได้แบบนี้ครับ

<td style="text-align: center><strong>aa</strong></td>

แต่แถว bb นั้น จะได้แบบนี้

<td style="text-align: center ><p><strong>bb</strong></p></td>

ความแตกต่างก็คือ มีแทก P แทรกเข้ามาในแถว bb ครับ ซึ่งแทก P นี่แหล่ะ จะทำให้ถูกมองว่าเป็นบรรทัด Paragraph ครับ

วิธีแก้ไข :

ดังนั้น หากเราไม่อยากให้ความสูงของแถวนั้น ชิดแคบเกินไป ก็เพียงแค่เคาะ Enter 1 ครั้งครับ จะทำให้แถวนั้นได้แทก P ขึ้นมาแล้ว ผมจะเริ่มทำจากแถว aa ครับ

แล้วผมก็เคาะ Enter 1 ครั้ง

อะครับ มันอาจจะโดดมานิดนึง ไม่เป็นไร ให้กดปุ่ม Backspace เพื่อให้มันถอยกลับขึ้นไปอีกครั้งนึง

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

ผมว่า เพียงเท่านี้ ก็น่าจะช่วยลดปัญหาเรื่องการจัดข้อความในตารางได้บ้างแล้วครับ เพียงแต่เราต้องรู้ที่มา ที่ไปของภาษา HTML เพื่อที่จะได้ทราบสาเหตุครับ ตารางของเราก็จะออกมาได้ดั่งใจ