วิธีกำหนดข้อความในเซลล์ตาราง

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

เริ่มต้นใช้งาน

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

นอกจากนี้คุณควรสร้าง สไตล์ชีตภายในไว้ ในส่วนหัวของเอกสารหรือแนบไปกับเอกสารเป็น สไตล์ชีตภายนอก คุณจะใส่สไตล์เพื่อวางแนวเซลล์ตารางไว้ในสไตล์ชีตนั้น

วิธีกำหนดเซลล์ทุกเซลล์ในตาราง

เพิ่มบรรทัดต่อไปนี้ลงในสไตล์ชีตของคุณ:

td, th {text-align: center; }

วิธีกำหนดเซลล์ทุกเซลล์ในตาราง

เพิ่มบรรทัดต่อไปนี้ลงในสไตล์ชีตของคุณ:

th {text-align: center; }

ศูนย์ทุกเซลล์ในหัวตาราง, ร่างกายหรือเท้า

คุณต้องเพิ่มแท็กตารางที่ไม่ได้ใช้เสมอเช่น , และ เพื่อรวมศูนย์เหล่านี้ จากนั้นคุณจะล้อมรอบเซลล์ในตารางของคุณด้วยแท็กเหล่านี้เพื่อระบุหัวโต๊ะร่างกายและเท้าโต๊ะ หลังจากนั้นคุณจะเพิ่มข้อมูลต่อไปนี้ลงในสไตล์ชีตของคุณ:

thead th, thead td {text-align: center; } tbody th, tbody td {text-align: center; } tfoot th, tfoot td {text-align: center; }

ลบสไตล์สำหรับพื้นที่ที่คุณไม่ต้องการให้เป็นศูนย์กลาง

วิธีกำหนดเซลล์หรือเซลล์ที่ต้องการในตาราง

เมื่อต้องการทำเช่นนี้คุณต้องตั้งค่าชั้นเรียนในเซลล์ที่คุณต้องการให้เป็นศูนย์กลาง

เพิ่มแอตทริบิวต์ต่อไปนี้ลงในเซลล์ตารางที่คุณต้องการให้เป็นศูนย์กลาง:

class = "centered-cell" >

จากนั้นเพิ่มข้อมูลต่อไปนี้ลงในสไตล์ชีตของคุณ:

.centered-cell {text-align: center; }

คุณสามารถเพิ่มคลาสนี้ลงในเซลล์ใดก็ได้ในตารางของคุณ

ห่อ

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