Skip to main content

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

Anonim

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

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

การจัดตำแหน่งข้อความภายในเซลล์ทำได้ดีที่สุดด้วย 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 {text-align: center;}

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

ห่อ

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