วิธีผสานเซลล์ในแนวตั้งในตาราง html การรวมเซลล์ การรวมเซลล์ในแนวนอน

ยังคงพูดถึงคุณลักษณะที่น่าสนใจอย่างหนึ่ง ภาษา HTML- นี่แหละที่เรียกว่า การรวมเซลล์ตาราง ตัวอย่างที่ดีที่สุดที่ควรพิจารณาคือตารางอย่างง่าย รหัส HTML ที่แสดงในรายการ 5.10

รายการ 5.10

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

ทีนี้มาดูตารางในรูป 5.3.

ที่นี่เราได้รวมบางเซลล์เข้าด้วยกัน จะเห็นได้ว่าเซลล์ที่รวมกันดูเหมือนจะรวมเป็นหนึ่งเดียว วิธีการทำเช่นนี้?

โดยเฉพาะอย่างยิ่งสำหรับแท็กวัตถุประสงค์นี้และ สนับสนุนคุณลักษณะเสริมสองรายการที่โดดเด่นมาก เซลล์แรก - COLSPAN - รวมเซลล์ในแนวนอน ส่วนเซลล์ที่สอง - ROWSPAN - ในแนวตั้ง

ข้าว. 5.2.ตารางต้นฉบับที่เซลล์จะถูกรวมเข้าด้วยกัน

ข้าว. 5.3.ตารางที่แสดงในรูปที่. 5.2 หลังจากรวมเซลล์บางเซลล์แล้ว (เซลล์ที่ผสานจะถูกระบุโดยการบวกตัวเลข)

หากต้องการรวมหลายเซลล์ในแนวนอนเป็นเซลล์เดียว คุณต้องทำตามขั้นตอนเหล่านี้

1. ค้นหาในโค้ด แท็ก HTML

มาสร้างเซลล์ที่รวมกัน 4 + 5 และ 12 + 13 + 14 + 15 ในลักษณะเดียวกัน

การรวมเซลล์ในแนวตั้งทำได้ยากขึ้นเล็กน้อย นี่คือขั้นตอนที่คุณต้องปฏิบัติตามเพื่อทำสิ่งนี้

1. ค้นหาในโค้ด สตริง HTML(แท็ก) ซึ่งมีเซลล์แรกที่จะผสาน (หากคุณนับแถวจากบนลงล่าง)

2. ค้นหาแท็กในโค้ดของบรรทัดนี้

โปรดสังเกตว่าเราได้ลบแท็กที่สร้างเซลล์ที่หกออกจากแถวที่สอง เนื่องจากแท็กนั้นรวมเข้ากับเซลล์แรก

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

ฉันจะบอกรายละเอียดเกี่ยวกับวิธีผสานเซลล์ในแนวตั้งและแนวนอนในตาราง

ในบทความนี้เราจะไม่อธิบายหลักการต่างๆ การสร้าง htmlตาราง หากต้องการรับความรู้นี้ โปรดเข้าเรียนหลักสูตร HTML

หากต้องการรวมเซลล์ภายในตาราง มีสองแอตทริบิวต์ที่ตั้งค่าให้กับแท็ก เหล่านี้คือ colspan (การรวมในแนวนอน) และ rowspan (การรวมในแนวตั้ง)

บางคนมีปัญหาในการใช้คุณลักษณะเหล่านี้ ปัญหาในการรวมเซลล์

คุณลักษณะ colspan และ rowspan ยอมรับค่าจำนวนเต็มตั้งแต่ 0 ถึง 1,000 เป็นพารามิเตอร์ ต่อไปนี้คือตัวอย่างเล็กๆ น้อยๆ ของวิธีการผสานเซลล์ในตาราง

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

เราเสนอวิธีที่เป็นสากลและสะดวกมากในการรวมเซลล์

ในการเริ่มต้น ให้เตรียมเทมเพลตสำหรับตารางในอนาคตของคุณ โดยนำเสนอโดยแยกเซลล์ทั้งหมดออกจากกัน นี่อาจเป็นโต๊ะ 3x3, 6x10และอื่น ๆ เราจะให้แต่ละเซลล์มีหมายเลขของตัวเอง เริ่มจากซ้ายไปขวาและจากบนลงล่าง

มาดูการสร้างตารางที่แสดงด้านบนโดยใช้วิธีนี้กัน

นี่คือลักษณะของโค้ดสำหรับเทมเพลตของเราและตัวเทมเพลตเอง:

จำเป็นต้องรวมเซลล์ที่มีตัวเลข 1,2,3 ในแนวนอน เมื่อต้องการทำเช่นนี้ ในโค้ด เซลล์หมายเลข 1 ให้เพิ่มแอตทริบิวต์ colspan ด้วยค่า 3 และลบ องค์ประกอบที่มีหมายเลข 2 และ 3 เราเขียนหมายเลขของเซลล์ที่รวมกันในเซลล์ผลลัพธ์

ตอนนี้เราต้องรวมเซลล์ 9 และ 13 ในแนวตั้ง เราดำเนินการตามขั้นตอนที่คล้ายกัน - ตั้งค่าแอตทริบิวต์ rowspan ด้วยค่า 2 เป็นเซลล์หมายเลข 9 ลบเซลล์หมายเลข 13 เขียนหมายเลขของเซลล์ที่ประกอบด้วยลงในเซลล์ที่ผสาน

นี่คือวิธีที่รหัสของเราจะเปลี่ยนและ รูปร่างตาราง:

ยังคงรวมเซลล์ 11,12,15,16 เซลล์เข้าเป็นหนึ่งเดียว เมื่อต้องการทำเช่นนี้ ให้เขียนแอตทริบิวต์ colspan ="2" rowspan ="2" ไปที่เซลล์หมายเลข 11 เซลล์ 12,15,16 จะถูกลบออกจากโค้ด เราเขียนตัวเลข 11,12,13,14 ลงในเซลล์ที่รวมกัน

นี่คือวิธีที่โค้ดของเราและรูปลักษณ์ของตารางจะเปลี่ยนไป:

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

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

บทที่ 11

การรวมเซลล์ตาราง

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

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

คุณลักษณะเหล่านี้มีความซับซ้อนในการใช้งานมากกว่าคุณลักษณะอื่นๆ เล็กน้อย ด้วยเหตุนี้พวกเขาจึงได้รับบทเรียนแยกต่างหาก

แอตทริบิวต์ Colspan

คุณลักษณะ โคลสแปนใช้ในการรวมเซลล์ในแนวนอน ค่าแอตทริบิวต์ระบุจำนวนเซลล์ที่จะรวมเป็นเซลล์เดียว

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

ด้านล่างนี้เป็นรหัสที่เขียนอย่างถูกต้อง:
คำอธิบายสำหรับรหัส: สายบน<tr> <td>มีหนึ่งเซลล์ โคลสแปนซึ่งมีการระบุแอตทริบิวต์ไว้ 2 ด้วยความหมาย สายบน- ซึ่งหมายความว่าเซลล์นี้จะรวม 2 เซลล์เข้าด้วยกัน ตามลำดับ เซลล์นี้จะแทนที่ 2 เซลล์ บรรทัดที่สอง <td>.
มีเซลล์ปกติ 2 เซลล์

ปรากฎว่าในแถวบนสุดเรามีสองเซลล์เชื่อมต่อกันและในแถวล่างมีเซลล์ธรรมดาสองเซลล์ ตัวเลขเท่ากันซึ่งหมายความว่ารหัสเขียนถูกต้อง

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

ซึ่งหมายความว่าเซลล์หนึ่งนี้เข้ามาแทนที่สอง

คุณลักษณะ แอตทริบิวต์ rowspanช่วงแถว โคลสแปน.

ด้านล่างนี้เป็นรหัสที่เขียนอย่างถูกต้อง:
คำอธิบายสำหรับรหัส: สายบนใช้ในการรวมเซลล์ในแนวตั้ง หลักการทำงานเหมือนกับของแอตทริบิวต์ทุกประการ <td>มีสามเซลล์ แอตทริบิวต์ rowspanซึ่งมีการระบุแอตทริบิวต์ไว้ 3 โดยหนึ่งในนั้นจะมีการลงทะเบียนแอตทริบิวต์แล้ว สายบน- ซึ่งหมายความว่าเซลล์นี้จะรวม 3 เซลล์ (ซึ่งได้รับแอตทริบิวต์ + 2 เซลล์แนวตั้งด้านล่าง) อย่างที่ฉันบอกไปแล้ว แถวแรกมี 3 เซลล์ ซึ่งหมายความว่าสองแถวล่างสุดควรมีสามเซลล์ด้วย ดูโค้ดเราจะเห็นว่าสองบรรทัดล่างสุด <td>มีเพียงสองเซลล์ แต่อย่าลืมว่าเซลล์แรกบรรทัดบนสุด

เข้ามาแทนที่ + อีกแห่งของสองเซลล์ที่อยู่ข้างใต้ ซึ่งหมายความว่าจำนวนเซลล์ทั้งหมดในแต่ละแถวคือสามเซลล์

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

จากนั้นแต่ละเซลล์จะมีหนึ่งคอลัมน์ตามค่าเริ่มต้น หากต้องการรวมเซลล์ใน HTML คุณต้องเพิ่มเซลล์ในแถวให้น้อยกว่าแถวอื่นๆ และเพิ่มแอตทริบิวต์ colspan=" " ภายในแท็ก

เซลล์ที่ต้องการยืดออก

ขณะนี้เซลล์ในแถวบนสุดขยายสองคอลัมน์ เนื่องจากใช้พื้นที่สองเซลล์ จึงมีองค์ประกอบ td เพียงองค์ประกอบเดียวในแถวแรก

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

วิธีผสานเซลล์ในแนวตั้งในตาราง HTML: rowspan

แอตทริบิวต์ rowspan="" ช่วยให้คุณสามารถผสานเซลล์ในแนวตั้งได้

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

ลองดูตัวอย่างง่ายๆ ของตาราง HTML ที่มีสี่เซลล์แบ่งออกเป็นสองแถวและสองคอลัมน์ รหัส HTML:

หากต้องการผสานเซลล์ในแนวตั้งในตาราง HTML ให้เพิ่มแอตทริบิวต์ rowspan="2" ลงในเซลล์แรกในแถวบนสุด จากนั้นลบเซลล์ใดเซลล์หนึ่งในแถวล่าง ตอนนี้โค้ด HTML จะมีลักษณะดังนี้:

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

วิธีรวม rowspan และ colspan เพื่อสร้างตาราง HTML แบบกำหนดเองที่มีเซลล์ที่ครอบคลุมหลายแถวและคอลัมน์

การใช้เซลล์ที่ผสานในแนวตั้ง

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

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

การแปลบทความ « วิธีรวมเซลล์ในแนวนอนในตาราง HTML Colspan», « วิธีรวมเซลล์ในแนวตั้งในตาราง HTML: Rowspan» จัดทำโดยทีมงานโครงการที่เป็นมิตร

สวัสดี วันนี้ฉันจะบอกวิธีผสานเซลล์ในตารางในแนวนอนและแนวตั้งในรูปแบบ html

เราจะไม่กังวลมากเกินไป ฉันจะสร้างตารางง่ายๆ โดยมี 3 แถวและ 4 เซลล์ในแต่ละแถว มีการตั้งค่าสไตล์ที่ง่ายที่สุดเพื่อให้ทุกอย่างแสดงได้อย่างถูกต้อง

โต๊ะ(
ชายแดนยุบ: ยุบ;
}
ทีดี(
เส้นขอบ: 1px สีดำทึบ;
ความกว้าง: 60px;
ความสูง: 50px;
}

การรวมเซลล์ในแนวนอน

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

1. เรากำหนดแอตทริบิวต์ colspan = ให้กับเซลล์ที่ต้องการ “จำนวนเซลล์ที่จะรวม”
2. ลบเซลล์ที่ไม่จำเป็นทั้งหมด

ตัวอย่างเช่น:

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

หากไม่ได้ลบออก ก็จะเกิดเซลล์มากถึง 7 เซลล์ในแถวและแน่นอนว่ามันจะกว้างกว่าสองเซลล์ถัดไปมาก

ตอนนี้เราลบมันออกและเห็นว่าทุกอย่างชัดเจน

ผสานกันในแนวตั้ง

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

มารวมเซลล์สุดท้ายในแถว 2 และ 3 เข้าด้วยกัน โดยเขียน rowspan = “2” ลงในเซลล์สุดท้ายในแถว 2 ตอนนี้คุณต้องลบเซลล์สุดท้ายในแถวที่ 3 หากคุณไม่ทำเช่นนี้ เซลล์พิเศษจะปรากฏขึ้นอีกครั้ง ซึ่งจะทำให้รูปลักษณ์ของตารางของเราเสียไปอย่างมาก

ความสามัคคีทั้งสองฝ่าย

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

ในกรณีนี้เซลล์ในแถวที่สองจะได้รับแอตทริบิวต์ทั้งสองนี้ในแถวที่สองเซลล์ที่ตามมาจะถูกลบออกในเซลล์ที่สาม - สองเซลล์แรก

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

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