ใช้ CSS เพื่อเพิ่มเส้นขอบภายในในตาราง HTML

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

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

ตาราง CSS ของ CSS

เมื่อคุณใช้ CSS เพื่อเพิ่มเส้นขอบในตารางจะเพิ่มเฉพาะเส้นขอบรอบด้านนอกของตารางเท่านั้น ถ้าคุณต้องการเพิ่มเส้นภายในลงในแต่ละเซลล์ของตารางคุณต้องเพิ่มเส้นขอบกับองค์ประกอบ CSS ภายใน คุณสามารถใช้แท็ก HR เพื่อเพิ่มเส้นภายในเซลล์แต่ละเซลล์

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

ก่อนที่คุณจะเริ่ม

กำหนดตำแหน่งที่คุณต้องการให้เส้นปรากฏในตาราง คุณมีหลายทางเลือก ได้แก่ :

• ล้อมรอบเซลล์ทั้งหมดเพื่อสร้างตาราง
• การจัดตำแหน่งเส้นระหว่างเฉพาะคอลัมน์
• เพียงระหว่างแถว
• ระหว่างคอลัมน์หรือแถวเฉพาะ

คุณสามารถวางตำแหน่งเส้นรอบ ๆ เซลล์แต่ละเซลล์หรือภายในเซลล์แต่ละเซลล์

วิธีเพิ่มเส้นรอบ ๆ เซลล์ทั้งหมดในตาราง

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

td, th {ขอบ: ทึบ 1px ดำ;}

วิธีการเพิ่มเส้นระหว่างเพียงคอลัมน์ในตาราง

หากต้องการเพิ่มเส้นระหว่างคอลัมน์เพื่อสร้างเส้นแนวตั้งที่ทำงานจากบนลงล่างในคอลัมน์ของตารางเพิ่มข้อมูลต่อไปนี้ลงในสไตล์ชีท:

td, th {border-left: แข็ง 1px สีดำ;}

หากคุณไม่ต้องการให้เส้นแนวตั้งปรากฏในคอลัมน์แรกคุณเพิ่มคลาสลงใน TH และ td เซลล์. ในตัวอย่างนี้ถือว่าชั้นเรียนของ ไม่มีพรมแดน บนเซลล์เหล่านั้นและลบเส้นขอบด้วยกฎ CSS ชั้น HTML ที่คุณใช้คือ:

class = "ไม่มีพรมแดน">

จากนั้นเพิ่มสไตล์ต่อไปนี้ในสไตล์ชีต:

.no-border {border-left: none;}

วิธีการเพิ่มเส้นระหว่างเพียงแถวในตาราง

เช่นเดียวกับการเพิ่มเส้นระหว่างคอลัมน์คุณสามารถเพิ่มเส้นแนวนอนระหว่างแถวที่มีสไตล์เรียบง่ายเข้ากับสไตล์ชีทดังนี้:

tr {ด้านล่าง: สีทึบ 1px สีดำ;}

หากต้องการนำเส้นขอบออกจากด้านล่างของตารางคุณจะเพิ่มคลาสอีกครั้ง

แท็ก:

class = "ไม่มีพรมแดน">

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

.no-border {ด้านล่าง: ไม่มี;}

วิธีเพิ่มเส้นระหว่างคอลัมน์เฉพาะหรือแถวในตาราง

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

class = "ด้านพรมแดน">

การเพิ่มบรรทัดระหว่างแถวทำได้ง่ายกว่าเพราะคุณสามารถเพิ่มคลาสลงในแถวที่คุณต้องการให้บรรทัด

class = "ขอบล่าง">

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

ฝั่งชายแดน {border-left: แข็ง 1px สีดำ;}. border-bottom {ด้านล่าง: สีทึบ 1px สีดำ;}

วิธีเพิ่มเส้นรอบ ๆ เซลล์ส่วนบุคคลในตาราง

เมื่อต้องการเพิ่มเส้นรอบ ๆ เซลล์แต่ละเซลล์คุณจะต้องเพิ่มคลาสลงในเซลล์ที่คุณต้องการให้มีเส้นขอบรอบ:

class = "ชายแดน">

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

. border {ขอบ: ทึบ 1px ดำ;}

วิธีการเพิ่มเส้นภายในเซลล์ส่วนบุคคลในตาราง

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

เคล็ดลับที่เป็นประโยชน์

ถ้าคุณสังเกตเห็นช่องว่างในเส้นขอบของคุณตรวจสอบให้แน่ใจว่ารูปแบบ border-collapse ถูกตั้งค่าไว้ในตาราง เพิ่มข้อมูลต่อไปนี้ในสไตล์ชีตของคุณ:

ตาราง {ยุบยุบ: ยุบ;}

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