วิธีเพิ่มช่องว่างระหว่างคอลัมน์โดยไม่กระทบต่อแถวในตาราง HTML
คุณสมบัติการเติมด้านซ้ายและขวาใช้เพื่อเพิ่มระยะห่างระหว่างคอลัมน์โดยไม่กระทบกับเค้าโครงโดยรวมของตาราง คุณสมบัตินี้อนุญาตให้นักพัฒนาเพิ่มระยะห่างพิเศษ และการเว้นวรรคนี้ไม่ส่งผลกระทบต่อแถว
ทำตามขั้นตอนด้านล่าง:
ขั้นตอนที่ 1: สร้างโครงสร้างตาราง
สมมติว่ามีตารางในไฟล์ HTML ที่มีสี่แถวและสามคอลัมน์:
< โต๊ะ >
< ท >
< ไทย > ชื่อ < / ไทย >
< ไทย > ระดับ < / ไทย >
< ไทย > เมือง < / ไทย >
< / ท >
< ท >
< td > จอห์น < / td >
< td > BS เคมี < / td >
< td > ลอนดอน < / td >
< / ท >
< ท >
< td > อเล็กซานเดอร์ < / td >
< td > วท.ม < / td >
< td > โตเกียว < / td >
< / ท >
< ท >
< td > โจเซฟ < / td >
< td > บี.เอส.ซี < / td >
< td > นิวยอร์ก < / td >
< / ท >
< / โต๊ะ >
หลังจากดำเนินการหน้าเว็บโค้ดด้านบนจะมีลักษณะดังนี้:
ผลลัพธ์ยืนยันว่าโครงสร้างตารางถูกสร้างขึ้นแล้ว
ขั้นตอนที่ 2: ใช้ช่องว่างภายในแนวนอน
หากต้องการเพิ่มระยะห่างระหว่างคอลัมน์จากด้านซ้าย ให้ใช้ปุ่ม “ ช่องว่างภายในซ้าย คุณสมบัติ CSS หลังจากใช้คุณสมบัตินี้ ข้อมูลจะดูเหมือนการจัดตำแหน่งที่ถูกต้อง เหตุผลก็คือการเติมจะใช้จากด้านซ้ายเท่านั้น
ตอนนี้เลือกองค์ประกอบ 'td' ในส่วน CSS ของสไตล์ที่สามารถใช้โดยใช้วิธีอินไลน์ จากนั้นเพิ่มการเติมของ “ 50พิกเซล ” เพื่อเพิ่มระยะห่างและเพิ่มคุณสมบัติเส้นขอบเพื่อวัตถุประสงค์ในการแสดงภาพที่ดีขึ้น:
td {ช่องว่างภายในซ้าย: 50px;
ชายแดน : 2px สีแดงทึบ;
}
หลังจากรันโค้ดแล้ว หน้าเว็บจะมีลักษณะดังนี้:
ผลลัพธ์แสดงว่ามีการเพิ่มช่องว่างระหว่างคอลัมน์ของตาราง
ตอนนี้เพื่อตั้งค่าช่องว่างภายในจากด้านขวา ปุ่ม ' ช่องว่างภายในขวา ” ทรัพย์สินถูกนำไปใช้ ในลักษณะเดียวกัน แต่ตอนนี้ ข้อมูลเซลล์มีลักษณะ “ จัดชิดซ้าย '. รหัสคือ:
td {ช่องว่างภายในซ้าย: 50px;
ชายแดน : 2px สีแดงทึบ;
}
หลังจากรันโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
ผลลัพธ์ยืนยันว่าช่องว่างระหว่างคอลัมน์เพิ่มขึ้นโดยใช้การเติมทางด้านขวา
ขั้นตอนที่ 3: การรวมกันของช่องว่างภายในซ้ายและขวา
เช่นเดียวกับขั้นตอนข้างต้น ข้อมูลไม่ได้จัดกึ่งกลางในทั้งสองกรณี และทำให้ข้อมูลไม่เป็นมืออาชีพ เพื่อให้โดดเด่นโดยไม่ทำลายความรู้สึกของการออกแบบ สามารถใช้คุณสมบัติทั้งสองพร้อมกันได้ดังต่อไปนี้:
td {ช่องว่างภายในด้านขวา: 60px;
ช่องว่างภายในซ้าย: 60px;
ชายแดน : 2px สีแดงทึบ;
}
หลังจากรันโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
ผลลัพธ์ยืนยันว่ามีการเพิ่มช่องว่างระหว่างคอลัมน์และข้อมูลก็จัดกึ่งกลางด้วย
บทสรุป
สามารถเพิ่มช่องว่างระหว่างคอลัมน์ตารางได้ด้วยความช่วยเหลือของการเติมคุณสมบัติด้านซ้ายและขวา คุณสมบัติเหล่านี้เพิ่มพื้นที่พิเศษจากทิศทางขวาและซ้ายไปยังเซลล์ คุณสมบัติทั้งสองสามารถใช้พร้อมกันหรือแยกกันได้ บทความนี้ได้สาธิตวิธีการเพิ่มระยะห่างระหว่างคอลัมน์ของตารางโดยไม่กระทบกับแถว