- วิธีเพิ่มเส้นขอบด้านล่างให้กับแถวตาราง
- ตั้งค่า border-bottom เป็น Table Row
Element - องค์ประกอบตารางสไตล์
- สไตล์องค์ประกอบ 'td'
- สไตล์องค์ประกอบ 'tr'
วิธีเพิ่มเส้นขอบด้านล่างให้กับแถวตาราง
การเพิ่มเส้นขอบด้านล่างของแถวตารางจะเพิ่มเส้นขอบให้กับทั้งแถวเพื่อสร้างประสบการณ์การมองเห็นที่ดีขึ้นและเพื่อดึงดูดความสนใจของผู้ใช้
ตัวอย่างโดยละเอียดของการเพิ่มเส้นขอบด้านล่างของแถวตาราง
แสดงให้เห็นด้านล่าง:
กำหนดเส้นขอบด้านล่างเป็นแถวตาราง
สร้างตารางอย่างง่ายที่มี 3 แถวและ 3 คอลัมน์ในไฟล์ HTML ซึ่งสร้างโดยใช้องค์ประกอบ
, และ :
< โต๊ะ >
< ท ระดับ = 'แถว' >
< ไทย > ชื่อ < / ไทย >
< ไทย > สถานะ < / ไทย >
< ไทย > เบอร์ห้อง < / ไทย >
< / ท >
< ท ระดับ = 'แถว' >
< td > ฟาคาร์ < / td >
< td > นักเรียน < / td >
< td > 05 < / td >
< / ท >
< ท ระดับ = 'แถว' >
< td > โอมาร์ < / td >
< td > นักเรียน < / td >
< td > 05 < / td >
< / ท >
< / โต๊ะ >ในตัวอย่างโค้ดข้างต้น เราได้กำหนดคลาสของ 'row' ให้กับแถวของตาราง
เพื่อให้สามารถเข้าถึงได้ในภายหลังใน CSS
หน้าเว็บจะมีลักษณะดังนี้:
องค์ประกอบตารางสไตล์
ในส่วน CSS เลือกองค์ประกอบตารางและจัดข้อความให้อยู่กึ่งกลาง หลังจากนั้นให้ใช้ปุ่ม “ ยุบชายแดน ” คุณสมบัติเพื่อตั้งค่าให้ยุบ:
โต๊ะ
{
ยุบชายแดน: ยุบ;
จัดข้อความ: กึ่งกลาง;
}สไตล์องค์ประกอบ 'td'
เพื่อการแสดงภาพที่ดีขึ้น ให้เราเพิ่มขนาด 20px ให้กับข้อมูลตาราง “
” และองค์ประกอบส่วนหัวของตาราง “ ”: td
{
ช่องว่างภายใน: 20px;
}
ไทย
{
ช่องว่างภายใน: 20px;
}ผลลัพธ์มีลักษณะดังนี้:
เอาต์พุตด้านบนแสดงการเติม 20px และจัดข้อความให้อยู่กึ่งกลาง
สไตล์องค์ประกอบ 'tr'
ในไฟล์ CSS ให้เพิ่มคุณสมบัติ border-bottom ใต้ตัวเลือก 'tr' กำหนดให้กับทุกแถวของตารางรวมถึงแถวหัวเรื่อง ตัวอย่างเช่น ตั้งค่าเป็น 2px solid darkcyan:
ท {
ขอบด้านล่าง: 2px darkcyan ทึบ;
}หลังจากรันโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
นั่นคือทั้งหมดที่เกี่ยวกับวิธีเพิ่มเส้นขอบที่ด้านล่างของทุกแถวของตาราง”
'. บทสรุป
หากต้องการเพิ่มเส้นขอบที่ด้านล่างขององค์ประกอบ
ให้ตั้งค่าคุณสมบัติ CSS border-collapse เพื่อยุบและใช้คุณสมบัติ border-bottom ในองค์ประกอบ “ ” อนุญาตให้คุณสมบัติ CSS ใช้เส้นขอบบนโต๊ะ นั่นคือวิธีที่คุณสามารถเพิ่ม border-bottom ให้กับทุกแท็ก “
” - ตั้งค่า border-bottom เป็น Table Row