บทเรียนเกี่ยวกับ HTML ผสานเซลล์

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

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

รู้เบื้องต้นเกี่ยวกับทฤษฎี

ใน HTML, ยูเนี่ยนของเซลล์ที่เกิดขึ้นโดยวิธีการของสองคุณลักษณะ: colspan และ rowspan พวกเขาจะระบุไว้สำหรับแท็กที

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

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

HTML-Table: ผสานเซลล์ในแนวตั้งและแนวนอน

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

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

บรรทัดล่างคือการที่คุณบอกเซลล์ว่าพื้นที่ที่จะใช้เวลา ค่าเริ่มต้นคือ 1

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

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

• แถว - แถว
• Col - คอลัมน์ / คอลัมน์
• Span - สมาคม

ผู้สร้างได้พยายามที่จะนำภาษาที่เป็นไปได้ที่จะมนุษย์เพื่อให้ได้โดยไม่ทราบว่ามันก็สามารถเข้าใจ

ใน HTML, ยูเนี่ยนของเซลล์ที่สามารถทำได้ในสองทิศทาง: แนวตั้งและแนวนอน การทำเช่นนี้เราระบุแอตทริบิวต์ทั้ง

ตัวเลขดังกล่าวข้างต้นเป็นเพียงที่และระบุว่าสมาคมฯ สามารถทำได้: แถวคอลัมน์หรือทั้งสองแถวและคอลัมน์

HTML: ผสานเซลล์ ตัวอย่าง

ขอให้เราพิจารณาตัวอย่างที่ซับซ้อนมากขึ้นก้าวบนโต๊ะขนาดใหญ่ ด้านล่างด้านซ้ายตั้งรุ่นเดิมของตารางปกติ ขวา - แตกต่างกับการรวมกันของสองเซลล์ในแถวที่สอง ดังนั้นชัดเจนและง่ายต่อการเปรียบเทียบ HTML โค้ด

นอกจากนี้คุณยังสามารถรวมสามในใจกลางของเซลล์ ในกรณีแรกแอตทริบิวต์ colspan ระบุเซลล์№1 นี่เป็นครั้งแรกที่จะมีการเปลี่ยนแปลงและที่สอง เพิ่มไปยัง colspan เท่ากับสาม

หากคุณต้องการที่จะผสานทุกเซลล์ในแถวที่จะเป็นหนึ่งเดียวแล้วเอา td สี่ในครั้งแรกที่บ่งชี้ colspan = '5'

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

ตารางที่เป็นกรอบเว็บไซต์

ใน HTML, ยูเนี่ยนของเซลล์ที่ไม่ได้ใช้เสมอสำหรับตารางปกติกับข้อมูล (ใน Word หรือ Excel) ออกแบบเว็บไซต์บ่อย แต่ก่อนการเลือกตั้งได้ใช้พวกเขาสำหรับรูปแบบของเว็บไซต์

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

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

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

ข้อสรุป

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

เมื่อได้รับประสบการณ์การดำเนินงานเหล่านี้คุณสามารถดำเนินการในหัวของคุณได้อย่างง่ายดาย