ตารางวิธีที่ดีที่สุดในการดูสิ่งนี้คือการใช้ตารางอย่างง่าย ซึ่งเป็นโค้ด HTML ที่แสดงในรายการ 5.10
นี่คือตารางปกติซึ่งมีการเรียงลำดับเซลล์ซึ่งจะทำให้ง่ายขึ้นสำหรับเราในอนาคต ในรูป รูปที่ 5.2 แสดงลักษณะที่ปรากฏบนหน้าต่างเว็บเบราว์เซอร์
ทีนี้มาดูตารางในรูป 5.3.
ที่นี่เราได้รวมบางเซลล์เข้าด้วยกัน จะเห็นได้ว่าเซลล์ที่รวมกันดูเหมือนจะรวมเป็นหนึ่งเดียว วิธีการทำเช่นนี้?
โดยเฉพาะอย่างยิ่งสำหรับแท็กวัตถุประสงค์นี้และ
หากต้องการรวมหลายเซลล์ในแนวนอนเป็นเซลล์เดียว คุณต้องทำตามขั้นตอนเหล่านี้
1. ค้นหาแท็ก (
2. ป้อนแอตทริบิวต์ COLSPAN ลงไปและกำหนดจำนวนเซลล์ที่จะผสานรวมถึงเซลล์แรกด้วย
3. ลบแท็ก (
มารวมเซลล์ 2 และ 3 ของตารางกัน (ดูรายการ 5.10) ข้อมูลโค้ดที่แก้ไขซึ่งสร้างแถวแรกของตารางนี้จะแสดงอยู่ในรายการ 5.11
มาสร้างเซลล์ที่รวมกัน 4 + 5 และ 12 + 13 + 14 + 15 ในลักษณะเดียวกัน
การรวมเซลล์ในแนวตั้งทำได้ยากขึ้นเล็กน้อย นี่คือขั้นตอนที่คุณต้องปฏิบัติตามเพื่อทำสิ่งนี้
1. ค้นหาบรรทัด (แท็ก) ในโค้ด HTML ที่มีเซลล์แรกที่จะรวม (ถ้าคุณนับบรรทัดจากบนลงล่าง)
2. ค้นหาแท็ก (
3. ป้อนแอตทริบิวต์ ROWSPAN ลงไปและกำหนดจำนวน เซลล์ที่ผสานรวมถึงคนแรกด้วย
4. ดูบรรทัดถัดไปและลบแท็กออกจากบรรทัด (
เราได้ออกไปแล้ว ผสานเซลล์ 1 และ 6 ของตารางของเรา รายการ 5.12 ประกอบด้วยส่วนที่ถูกต้องของโค้ด HTML (การแก้ไขจะส่งผลต่อบรรทัดแรกและบรรทัดที่สอง)
โปรดสังเกตว่าเราได้ลบแท็กที่สร้างเซลล์ที่หกออกจากแถวที่สอง เนื่องจากแท็กนั้นรวมเข้ากับเซลล์แรก
ปัจจุบันนี้ไม่ได้ใช้บ่อยนัก อย่างไรก็ตาม ก่อนหน้านี้ ในช่วงรุ่งเรืองของการออกแบบเว็บแบบตาราง เป็นเรื่องยากที่จะหาโต๊ะที่ไม่มี เซลล์ที่ผสาน- ไม่ทางใดก็ทางหนึ่งการรู้เกี่ยวกับเขาไม่ใช่เรื่องเสียหาย
ตอนนี้ให้ใส่ใจอย่างใกล้ชิดในขณะที่เราไปยังหัวข้อที่ยากที่สุดซึ่งเกี่ยวข้องกับการสร้างตาราง เรากำลังพูดถึงวิธีการรวมเซลล์ในตาราง HTML
เมื่อคุณแก้ไขปัญหาที่คล้ายกันในโปรแกรมแก้ไขข้อความบางตัว ปัญหาที่พบบ่อยที่สุดคือ Word มันจะทำทุกอย่างด้วยตัวเอง คุณเพียงแค่ต้องกดปุ่มที่เหมาะสม แต่ถ้าเราพูดถึงการแก้ปัญหานี้ด้วย HTML ทุกอย่างจะแตกต่างออกไป และถ้าคุณตั้งใจ งานก็จะไม่ดูล้นหลามนัก
การรวมเซลล์เป็นแถว
ก่อนอื่น เราจะบอกวิธีรวมแถวในตารางในรูปแบบ HTML คุณลักษณะจะช่วยในเรื่องนี้ โคลสแปนซึ่งใช้งานได้กับแท็กเช่น
ตัวอย่างเช่น คุณกำหนดค่าให้กับแอตทริบิวต์นี้ 2 - เป็นผลให้เซลล์ที่มีแท็กเพิ่มขึ้นในทิศทางแนวนอนอย่างแน่นอน 2 ครั้งแทนที่เพื่อนบ้าน แต่เซลล์ที่ถูกแทนที่ไม่ได้ไปที่ใดเลย แต่มีอยู่ในตารางเฉพาะในคอลัมน์ใหม่ทั้งหมดที่ต้องลบออก
มาฝึกวิธีนี้กัน มาเริ่มกันเลย มาลองสร้างตารางดังนี้:
ตามกฎที่อธิบายไว้ข้างต้น เราจำเป็นต้องสร้างแถว เพิ่มเซลล์ธรรมดาหนึ่งเซลล์ จากนั้นในแถวเดียวกันให้เพิ่มเซลล์ที่จะเข้ามาแทนที่เซลล์ธรรมดาสองเซลล์
ในบรรทัดถัดไปเราจำเป็นต้องเพิ่มเซลล์ธรรมดาสามเซลล์เท่านั้น ฟังดูง่าย มาใส่ความคิดของเราลงในโค้ดกันดีกว่า:
| 1 | 2 | |
| 3 | 4 | 5 |
แค่นั้นแหละ! ไม่มีเรื่องใหญ่เลย!
การรวมเซลล์ในคอลัมน์
การรวมเซลล์ในแนวตั้งจะยากกว่าการรวมเซลล์ในแนวนอนเล็กน้อย ปัญหานี้แก้ไขได้โดยใช้แอตทริบิวต์ ช่วงแถวซึ่งถูกกำหนดให้กับแท็ก
หากแอตทริบิวต์นี้ถูกตั้งค่าเป็น 2 จากนั้นเซลล์จะเพิ่มขนาดในแนวตั้งและขยายไปยังแถวถัดไป เซลล์ที่อยู่ด้านล่างเซลล์ที่ขยายขนาดขึ้นจะไปทางด้านขวา ซึ่งจะสร้างคอลัมน์เพิ่มเติมขึ้นมาอีกครั้ง และหากต้องการลบออก คุณเพียงแค่ต้องลบเซลล์ออก
ตอนนี้เรามาสร้างตารางต่อไปนี้:
ลองคิดดูว่าเราต้องทำอะไร เราจำเป็นต้องเพิ่มเซลล์ที่ใช้พื้นที่แนวตั้งมากกว่าเซลล์ธรรมดาถึง 2 เท่า จากนั้นเพิ่มเซลล์ธรรมดาสองเซลล์ในบรรทัดเดียวกัน
เรามาต่อกันที่บรรทัดถัดไปกันเลย ที่นี่เรามีพื้นที่ว่างโดยเซลล์ด้านบนทันที มาดูส่วนถัดไปกันดีกว่าและดูว่าสิ่งที่เราต้องทำในบรรทัดนี้คือการเพิ่มเซลล์ธรรมดาสองเซลล์ มาใส่ไว้ในโค้ด:
| 1 | 2 | 3 |
| 4 | 5 |
อีกครั้งไม่มีอะไรซับซ้อน
การรวมแนวตั้งและแนวนอนพร้อมกันในตารางเดียว
ในสถานการณ์จริง ตารางประเภทนี้จะพบบ่อยมาก ลองด้วยตัวเองโดยใช้เหตุผลที่เราแนะนำเพื่อสร้างตารางต่อไปนี้โดยใช้โค้ด HTML:
หากยังไม่ได้ผล นี่คือคำตอบ:
| สินค้า | อัตราภาษี | ||
|---|---|---|---|
| ตั้งแต่ 01.01 ถึง 31.01.2558 | ตั้งแต่ 01.01 ถึง 31.01.2016 | ตั้งแต่วันที่ 01/01/2558 | |
| น้ำมันดีเซล | 3450 ถู สำหรับ 1 ตัน | 4150 ถู สำหรับ 1 ตัน | 3950 ถู สำหรับ 1 ตัน |
สวัสดี วันนี้ฉันจะบอกวิธีผสานเซลล์ในตารางในแนวนอนและแนวตั้งในรูปแบบ html
เราจะไม่กังวลมากเกินไป ฉันจะสร้างตารางง่ายๆ โดยมีสามแถวและสี่เซลล์ในแต่ละแถว มีการตั้งค่าสไตล์ที่ง่ายที่สุดเพื่อให้ทุกอย่างแสดงได้อย่างถูกต้อง
ตาราง ( ยุบขอบ: ยุบ; ) td ( ขอบ: 1px สีดำทึบ; ความกว้าง: 60px; ความสูง: 50px; )
การรวมเซลล์ในแนวนอน
มาเริ่มกันที่ข้อนี้เลยเพราะเทคนิคนี้ง่ายกว่า สมมติว่าคุณต้องการรวมสี่เซลล์ให้เป็นเซลล์เดียวในแถวแรก ซึ่งสามารถทำได้โดยใช้แอตทริบิวต์ colspan:
- เรากำหนดแอตทริบิวต์ colspan = ให้กับเซลล์ที่ต้องการ "จำนวนเซลล์ที่จะรวม"
- ลบเซลล์ที่ไม่จำเป็นทั้งหมด
ตัวอย่างเช่น:
ดูโค้ดชิ้นนี้สิ เนื่องจากเซลล์แรกในแถวมี colspan เท่ากับ 4 จึงจะแทนที่เซลล์สี่เซลล์ ซึ่งหมายความว่าต้องลบ 3 เซลล์ถัดไปในแถวออกไป เพราะตอนนี้ไม่จำเป็นต้องใช้แล้ว
หากไม่ได้ลบออก ก็จะเกิดเซลล์มากถึง 7 เซลล์ในแถวและแน่นอนว่ามันจะกว้างกว่าสองเซลล์ถัดไปมาก
ตอนนี้เราลบมันออกและเห็นว่าทุกอย่างชัดเจน
ผสานกันในแนวตั้ง
สิ่งนี้ซับซ้อนกว่าเล็กน้อยและดำเนินการโดยใช้เทคโนโลยีเดียวกัน มีการใช้เฉพาะแอตทริบิวต์ที่เรียกว่า rowspan และคุณต้องลบเซลล์ที่จำเป็นในคอลัมน์ ไม่ใช่แถว ซึ่งทำให้งานซับซ้อนขึ้นเล็กน้อย แต่ในความเป็นจริง ทุกอย่างเป็นเรื่องง่ายถ้าคุณเข้าใจสาระสำคัญอย่างรวดเร็ว
มารวมเซลล์สุดท้ายในแถว 2 และ 3 เข้าด้วยกัน โดยเขียน rowspan = "2" ลงในเซลล์สุดท้ายในแถว 2 ตอนนี้คุณต้องลบเซลล์สุดท้ายในแถวที่ 3 หากคุณไม่ทำเช่นนี้ เซลล์พิเศษจะปรากฏขึ้นอีกครั้ง ซึ่งจะทำให้รูปลักษณ์ของตารางของเราเสียไปอย่างมาก
ความสามัคคีทั้งสองฝ่าย
คุณสามารถตั้งค่าแอตทริบิวต์ทั้งสองเป็นเซลล์เดียวได้ เรามาดูกันว่ามันทำงานอย่างไร มารวม 2 เซลล์แรกของแถวที่ 2 ให้เป็นเซลล์เดียว และสองเซลล์แรกของแถวที่ 3 รวมแล้ว เราจะรวม 4 เซลล์เป็นเซลล์เดียว
ชั้น = "eliadunit">
หากจำเป็น Excel สามารถรวมข้อมูลจากหลายเซลล์เป็นเซลล์เดียวได้ คุณสามารถผสานทั้งข้อมูลประเภทเดียวกัน (ตัวเลข + ตัวเลข) และข้อมูลประเภทต่างกัน (ตัวเลข + คำ) การดำเนินการเหล่านี้ดำเนินการโดยใช้สูตร SPECIFY (หรือใน CONCATENATE เวอร์ชันภาษาอังกฤษ) ความคล้ายคลึงกับสูตรนี้คือการใช้เครื่องหมายที่เรียกว่าเครื่องหมายและ (&) วิธีที่ดีที่สุดในการเรียนรู้วิธีใช้การต่อข้อมูลใน Excel คือผ่านตัวอย่างในชีวิตจริง
ตัวอย่างแรก: การใช้การรวมคำลงในเซลล์เดียวใน Excel (เช่น เมื่อเขียนโฆษณาใน Yandex Direct) งาน: เพิ่มคำว่า “โทรหาฉัน!” ลงในข้อความโฆษณา และ “โทรเลย!” คอลัมน์ B มีข้อความโฆษณา คอลัมน์ C มีคำว่า “โทร” และคอลัมน์ถัดไป: “!” หรือ “เดี๋ยวนี้!”:
เพื่อวัตถุประสงค์ของการรวมขนาดใหญ่ เราจะแทรกสูตรในคอลัมน์ A (เครื่องหมายแอมเปอร์แซนด์ถูกแทรกด้วยเค้าโครงภาษาอังกฤษ Shift+7):
=เชื่อมต่อ(B1;" ";C1;D1)
=B2&" "&C2&D2
=เชื่อมต่อ(B3;" ";C3;D3)
=B4&" "&C4&D4
ชั้น = "eliadunit">
เครื่องหมายคำพูดมีอักขระเว้นวรรค คุณสามารถแทรกคำหรือประโยคได้ด้วยวิธีนี้ เป็นผลให้เราได้รับรูปภาพต่อไปนี้ใน Excel:
โดยทั่วไปแล้ว ชุดดังกล่าวจะใช้สำหรับข้อความ และดังนั้น สูตร CONCATENATE จึงใช้กับข้อความ แต่ใช้กับตัวเลขได้ด้วย นี่คือตัวอย่าง:
ควรให้ความสนใจกับความจริงที่ว่าคุณสามารถทำงานกับผลลัพธ์ที่ได้รับเช่นเดียวกับตัวเลข รวม คูณ หาร ฯลฯ แต่คุณไม่สามารถใช้มันในสูตรตัวเลขได้ ตัวอย่างเช่น ถ้าคุณป้อนสูตร =SUM (A2:A5) ในเซลล์ผลรวม การคำนวณจะเป็น 0
ต่อไป มาดูตัวอย่างเมื่อคุณต้องการรวมข้อความและเซลล์เข้ากับตัวเลขซึ่งใช้รูปแบบการแสดงผลบางรูปแบบ (วันที่ การเงิน ฯลฯ) หากคุณใช้เฉพาะเครื่องหมายและหรือสูตร CONCATENATE ค่าที่ต้องการจะแสดงไม่ถูกต้อง (คอลัมน์ A):
หากต้องการแสดงอย่างถูกต้อง (คอลัมน์ B) คุณต้องใช้สูตร TEXT ไวยากรณ์ของมันมีดังนี้: ข้อความ(หมายเลขเซลล์หรือค่า ;« รูปแบบค่าตัวเลข »). รูปแบบสามารถพบได้ในเมนู Excel ในแท็บ "หน้าแรก" ส่วน "หมายเลข"
เมื่อมีความรู้ข้างต้นแล้ว คุณสามารถรวมค่าต่างๆ ลงในเซลล์เดียวใน Microsoft Excel ได้อย่างชำนาญ
หากต้องการรวมสองเซลล์ขึ้นไปเป็นเซลล์เดียว ให้ใช้แอตทริบิวต์ colspan และ rowspan ของแท็ก
ตัวอย่างที่ 12.3 การรวมเซลล์ไม่ถูกต้อง
| เซลล์ 1 | เซลล์ 2 | |
| เซลล์ 3 | เซลล์ 4 | |
ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 12.5.
ข้าว. 12.5. ลักษณะของเซลล์เพิ่มเติมในตาราง
บรรทัดแรกของตัวอย่างระบุสามเซลล์ โดยสองเซลล์รวมกันโดยใช้แอตทริบิวต์ colspan แต่บรรทัดที่สองเพิ่มเพียงสองเซลล์ ด้วยเหตุนี้ เซลล์เพิ่มเติมจึงปรากฏขึ้นซึ่งแสดงในเบราว์เซอร์ จะเห็นได้ชัดเจนในรูป. 12.5.
การใช้แอตทริบิวต์ colspan และ rowspan อย่างถูกต้องแสดงให้เห็นในตัวอย่างที่ 12.4
ตัวอย่างที่ 12.4 การรวมเซลล์ในแนวตั้งและแนวนอน
| เบราว์เซอร์ | อินเทอร์เน็ตเอ็กซ์พลอเรอร์ | โอเปร่า | ไฟร์ฟอกซ์ | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| รองรับ | เลขที่ | ใช่ | เลขที่ | ใช่ | ใช่ | ใช่ | ใช่ |
ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 12.6.
ข้าว. 12.6. ตารางที่มีเซลล์ที่ผสาน
ตารางนี้มีแปดคอลัมน์และสามแถว เซลล์บางเซลล์ที่มีคำจารึกว่า "Internet Explorer", "Opera" และ "Firefox" จะรวมกันในบางตำแหน่งด้วยสองเซลล์และในบางเซลล์มีสามเซลล์ เซลล์ชื่อ "Browser" มีการใช้การผสานแนวตั้ง
