วิธีการเพิ่มเส้นภายใน (เส้นขอบ) ในตารางด้วย CSS

เรียนรู้วิธีสร้างเส้นขอบตาราง CSS ภายในเวลาเพียงห้านาที

คุณอาจเคยได้ยินว่าตาราง 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;
}

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

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

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

และเพื่อลบเส้นขอบออกจากด้านล่างของตารางคุณจะเพิ่มคลาสอีกครั้งลงในแท็ก tr:

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

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

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

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

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

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

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

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

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

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

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

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

class = "ชายแดน">

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

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

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

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

---

)

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

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

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

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