แอตทริบิวต์แท็ก cellpadding และ cellspacing เป็นสิ่งจำเป็นที่นี่เพื่อให้แน่ใจว่าไม่มี "ช่องว่าง" ระหว่างตาราง
ผลลัพธ์:

ระบุระยะห่างระหว่างเส้นขอบเซลล์ในตาราง คุณลักษณะ border-spacing ไม่ทำงานเมื่อตารางมีพารามิเตอร์ border-collapse ตั้งค่าให้ยุบ

ไวยากรณ์

ระยะห่างชายแดน: ค่า [ค่า]

ข้อโต้แย้ง

ค่าหนึ่งจะกำหนดระยะห่างทั้งแนวตั้งและแนวนอนระหว่างเส้นขอบเซลล์ หากมีอาร์กิวเมนต์สองข้อ ข้อโต้แย้งข้อแรกจะกำหนดระยะทางในแนวนอน และข้อโต้แย้งข้อที่สองจะกำหนดระยะทางในแนวตั้ง

ผลลัพธ์ ตัวอย่างนี้ไม่แสดงในรูปที่ 1.

ข้าว. 1. การใช้พารามิเตอร์ระยะห่างขอบ

บันทึก

ถ้าจะแท็ก.

ตาราง

เราจึงเรียนกับคุณมากที่สุด ขั้นตอนง่ายๆซึ่งสามารถทำได้โดยมีขอบเขตของตาราง และตอนนี้โต๊ะก็ดูสวยงามน่าพึงพอใจมากขึ้น อย่างไรก็ตาม การเติมเซลล์จะขึ้นอยู่กับขอบเขตโดยตรง ซึ่งสามารถแก้ไขได้ง่ายๆ เพียงเยื้องเซลล์ในตาราง HTML จากนั้นข้อความในเฟรมในเซลล์จะสามารถอ่านได้ง่ายขึ้น

หากต้องการเยื้องเซลล์ ให้ใช้แอตทริบิวต์ การหุ้มเซลล์สำหรับแท็ก

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

คุณสามารถระบุได้อย่างแน่ชัดว่าการเยื้องควรเป็นจำนวนพิกเซลเท่าใด ลองยกตัวอย่างว่าการเยื้องด้านล่างจะเป็นเช่นไร 20 พิกเซล และส่วนที่เหลือทั้งหมดจะเป็น 10 - เช่น ซีเอสเอส- โค้ดจะมีลักษณะดังนี้:

Td ( ช่องว่างภายใน: 10px; ช่องว่างด้านล่าง: 20px; )

ก รหัสเต็มสไตล์ในขั้นตอนนี้:

ตาราง ( เส้นขอบ: ทึบ 1px สีน้ำเงิน; ยุบขอบ: ยุบ; ) td ( เส้นขอบ: ทึบ 1px สีน้ำเงิน; ขยาย: 10px; ขยายด้านล่าง: 20px; )

ผลลัพธ์ในเบราว์เซอร์:

ช่องว่างระหว่างเซลล์

ตามกฎแล้ว ปัญหาที่เกี่ยวข้องกับการสร้างตารางสามารถแก้ไขได้โดยใช้แท็ก คุณลักษณะ และคุณสมบัติที่ช่วยให้คุณสามารถสร้างเฟรม เยื้องในเซลล์ และยังตั้งค่าสีพื้นหลังของเซลล์ได้ด้วย

การเยื้องในตารางไม่ได้พบเฉพาะภายในเซลล์เท่านั้น พวกมันอาจปรากฏอยู่ระหว่างเซลล์ด้วย

มีสองตัวเลือกในการเยื้องระหว่างเซลล์:

1. โดยใช้คุณลักษณะ ระยะห่างระหว่างเซลล์สำหรับแท็ก

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

ลองดูตัวอย่าง:

ตาราง ( เส้นขอบ: ทึบ 1px สีน้ำเงิน; ยุบขอบ: แยก; ระยะห่างชายแดน: 5px; ) td ( เส้นขอบ: ทึบ 1px สีน้ำเงิน; ขยาย: 10px; ขยายด้านล่าง: 20px; )

และผลลัพธ์ที่ได้ก็คือ:

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

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

เราได้พบแล้วว่าตาราง HTML มี กรอบแม้ว่าเบราว์เซอร์จะไม่แสดงตามค่าเริ่มต้นก็ตาม แต่นั่นไม่ใช่ทั้งหมด แต่ละเซลล์ของตารางยังมีเฟรมที่เรียกว่า เส้นขอบเซลล์- แต่นั่นไม่ใช่ทั้งหมด โดยใช้แอตทริบิวต์แท็กพิเศษ

กรอบตาราง HTML เส้นขอบเซลล์ ระยะห่างระหว่างเซลล์และช่องว่างภายใน

ดังนั้นสำหรับ การสร้างเฟรมตาราง HTML และ ขอบเขตของเซลล์ใช้แอตทริบิวต์แท็กเพียงรายการเดียวเท่านั้น

ที่จะเปลี่ยนแปลง ระยะห่างระหว่างเซลล์(เขตแดนของพวกเขา) และ จากเซลล์สู่เฟรมตารางในแท็ก

เพื่อติดตั้งภายใน การขยายจากขอบเซลล์ไปยังเนื้อหาจำเป็นในแท็ก

โปรดทราบว่าเบราว์เซอร์โดยค่าเริ่มต้นจะตั้งค่าขนาดเล็ก (สองพิกเซล) สำหรับ cellspacing และ cellpadding ดังนั้นหากต้องการลบระยะห่างทั้งหมดให้ตั้งค่าแอตทริบิวต์เป็นศูนย์ (0)

ตัวอย่างเส้นขอบตาราง HTML เฟรม และช่องว่างภายใน

ตารางที่มีเฉพาะเส้นขอบเซลล์และชุดเส้นขอบ:

ผลลัพธ์ในเบราว์เซอร์

ตารางที่มีการเยื้องและระยะทางที่แก้ไข:

โดยปกติแล้ว ไม่จำเป็นต้องวาดกรอบและเส้นขอบเซลล์บนโต๊ะเพื่อเปลี่ยนการเยื้องภายในและระยะห่างระหว่างเซลล์

ตามไวยากรณ์ HTML เบราว์เซอร์จะเพิ่มค่าการเว้นวรรคและค่าการเว้นวรรคในขนาดของตารางและเซลล์ ตัวอย่างเช่น หากคุณตั้งค่าความกว้างของเซลล์เป็น 100 พิกเซลและ cellpadding="10" - เบราว์เซอร์จะเพิ่มความกว้าง 20 พิกเซล (ด้านซ้ายและขวาอย่างละ 10 พิกเซล) และจะกลายเป็น 120 พิกเซล โดยทั่วไป คุณจะคิดออกเมื่อคุณไป

การพูดนอกเรื่องหรือวิธีลบการเยื้องตามขอบของหน้า

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

เมื่อถึงเวลาที่ป้าย มีคุณลักษณะสี่ประการที่กำหนดขนาดของระยะขอบเหล่านี้สำหรับแต่ละด้านของหน้า: ขอบบน (บน), ขอบขวา (ขวา), ขอบล่าง (ด้านล่าง) และขอบซ้าย (ซ้าย) ตอนนี้แอตทริบิวต์เหล่านี้ล้าสมัยแล้ว ดังนั้นเราจะใช้สไตล์ (CSS) ดังนั้น คุณสามารถเปลี่ยนระยะขอบตามขอบของหน้าได้หลายวิธี ฉันจะแสดงให้คุณดูสองวิธี และคุณจะได้เรียนรู้เกี่ยวกับวิธีที่สามหากคุณตัดสินใจที่จะเรียนรู้ CSS

วิธีที่หนึ่ง ในแท็ก ระบุแอตทริบิวต์ style ด้วยค่าต่อไปนี้:

style="margin:0" >...

- ลบการเยื้องออกจากทุกด้านของหน้า HTML ในคราวเดียว

สไตล์= "ขอบ: บนขวาล่างซ้าย">...

- ปรับขนาดการเยื้องแต่ละด้านตามเข็มนาฬิกา ตามกฎแล้ว จะใช้ขนาดเป็นพิกเซล เช่น: style= "ระยะขอบ:5px 3px 4px 5px" >...

วิธีที่สองและสะดวกกว่า ในแท็ก

การบ้าน.

ในบทนี้ฉันจะไม่อธิบายทุกอย่างโดยละเอียด - เฉพาะประเด็นทั่วไปเท่านั้น หากต้องการทำให้ภาพสมบูรณ์ ให้ดูผลลัพธ์ตัวอย่าง

1. สร้างตารางสามตาราง แต่ละตารางประกอบด้วยหนึ่งแถวและสามคอลัมน์ (คอลัมน์)
2. ในตารางแรกให้วางส่วนหัวหรือ "ส่วนหัว" ของหน้า (เพื่อไม่ให้สับสนกับ "ส่วนหัว" ของเอกสาร HTML) ในเมนูที่สอง - ซ้ายและขวารวมถึงเนื้อหาหลัก (เนื้อหา) ในส่วนที่สาม - ส่วนท้ายหรือ "ส่วนท้าย" ของหน้า
3. ปล่อยให้ความกว้างของคอลัมน์แรกและคอลัมน์สุดท้ายของแต่ละตารางคงที่
4. สำคัญ. ใช้แท็ก เพียงเพื่อสร้างปุ่มสี่ปุ่ม เมนูแนวนอนในส่วนหัวของหน้า ในกรณีอื่นๆ ปล่อยให้รูปภาพไปอยู่ในพื้นหลัง และในเซลล์ที่สองของตารางจะใช้เฉพาะสีเท่านั้น และในตารางแรกและตารางสุดท้ายคือ #99FF99
5. ปล่อยให้ข้อความเนื้อหาของหน้าจัดแนวทั้งสองด้านของเซลล์ตารางและชื่อเรื่องอยู่กึ่งกลาง
6. สำหรับระยะห่างระหว่างเซลล์ตารางตลอดจนการเยื้องเซลล์ ให้คิดด้วยตัวเองว่าควรเอาเซลล์ออกให้หมดตรงไหนและควรเพิ่มตรงไหน

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

ความแตกต่างกับรูปแบบบล็อก

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

นี่ดูเหมือนจะเป็นปัญหาเล็กๆ แต่โดยค่าเริ่มต้น เซลล์ในตารางไม่ได้อยู่ใกล้กัน แต่มีการเยื้องเล็กน้อยซึ่งไม่จำเป็นเสมอไป จะลบมันได้อย่างไร?

คุณสมบัติการเว้นระยะห่างชายแดน

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

จุดสำคัญ: จำเป็นต้องตั้งค่าระยะห่างเส้นขอบสำหรับทั้งตารางนั่นคือเช่นนี้:

โต๊ะ(
ระยะห่างขอบ: 0;
}

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

อาจเป็นเรื่องผิดปกติเล็กน้อยที่จะตั้งค่าคุณสมบัติบนตัวเลือกตาราง แต่เป็นคุณลักษณะของตาราง คุณเพียงแค่ต้องจำไว้ คุณสมบัติจะไม่ทำงานหากตารางถูกตั้งค่าเป็น border-collapse: allowance ในกรณีนี้ ขอบด้านนอกของเซลล์จะถูกลบออกโดยอัตโนมัติ และไม่จำเป็นต้องมีระยะห่างขอบ

วิธีที่ล้าสมัยในการกำหนดระยะขอบของเซลล์

ก่อนหน้านี้สำหรับแท็กนี้

ประเด็นก็คือการเยื้องหมายถึง รูปร่างองค์ประกอบและ html ไม่เหมาะสมโดยสิ้นเชิงสำหรับจุดประสงค์นี้ มาตรฐานระบุอย่างชัดเจนว่า CSS ควรรับผิดชอบในเรื่องนี้

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

เป็นที่นิยม:

วิธีโทรหาผู้ให้บริการ Beeline "สด" โดยตรง: หมายเลขโทรศัพท์โทรฟรี

Lineage II - Interlude: The Chaotic Throne จะไม่เริ่มต้นใช่ไหม วิธีเพิ่มหน้าปัดนาฬิกาใหม่บนนาฬิกาอัจฉริยะ Android Wear แผนภาษีที่ทำกำไรได้มากที่สุดในชีวิต เคส Galaxy S8 ทุกสี และอันไหนน่าซื้อกว่ากัน? การสร้างทางลัดบนเดสก์ท็อปสำหรับเพื่อนร่วมชั้น

ใหม่

วิธีฟื้นฟูรอบประจำเดือนหลังคลอดบุตร:

• หากรองเท้าไม่พอดีกับ Aliexpress: การกระทำที่ถูกต้องในกรณีนี้ ผลิตภัณฑ์ Aliexpress มีขนาดที่เหมาะสม
• ข้อพิพาทใน AliExpress เข้าร่วมข้อพิพาทใน AliExpress
• 3 ฐานข้อมูลแบบกระจาย
• ผู้จัดการเนื้อหา - ความรับผิดชอบ เงินเดือน การฝึกอบรม ข้อเสียและข้อดีของการทำงานเป็นผู้เชี่ยวชาญด้านเนื้อหา
• จะป้องกันตัวเองจากการขุดที่ซ่อนอยู่ในเบราว์เซอร์ของคุณได้อย่างไร?
• การกู้คืนรหัสผ่านใน Ask
• วิธีเปิดกล้องบนแล็ปท็อป
• ทำไมเพลงไม่เล่นบน VKontakte?
• วิธีเพิ่มขนาดของไดรฟ์ C โดยเสียค่าใช้จ่ายของไดรฟ์ D โดยไม่สูญเสียข้อมูล
• สาเหตุของการทำงานผิดพลาดบนเมนบอร์ด หากชิปเซ็ตบนเมนบอร์ดเกิดไฟไหม้

การใช้สไตล์ใน Excel วิธีสร้างสไตล์ใหม่ของคุณเอง หากคุณใช้ตัวเลือกเดียวกันนี้ในการจัดรูปแบบเซลล์ในเวิร์กชีตในสเปรดชีตของคุณอย่างสม่ำเสมอ ขอแนะนำให้สร้างสไตล์การจัดรูปแบบ...	เกิดข้อผิดพลาดอะไรระหว่างการติดตั้ง? หมายเหตุ: โปรแกรม AutoLISP สามารถทำงานได้บน AutoCAD เวอร์ชันเต็มเท่านั้น โดยจะไม่ทำงานภายใต้ AutoCAD LT (ไม่รวมกรณีโหลด...	สถานภาพทางสังคมของบุคคลในสังคม เสนอแนะสิ่งที่กำหนดการเลือกสถานะหลักของบุคคล การใช้ข้อความและข้อเท็จจริงของชีวิตทางสังคม ตั้งสมมติฐานสองข้อ และ...	การตีความข้อผิดพลาดแบบเต็ม มีผู้ใช้จำนวนไม่น้อยที่ต้องเผชิญกับปรากฏการณ์หน้าจอสีน้ำเงินแห่งความตาย จะทำอย่างไร (Windows 7 มักเกิดปัญหานี้บ่อยที่สุด)...

การตั้งค่าพีซี อัพเดต การบำรุงรักษา การตั้งค่า

อาร์เอสเอส