สร้างตาราง HTML ใน C#

สร้างตาราง HTML ด้วย .NET API

Aspose.HTML for .NET มีคลาส DOM สำหรับตารางโดยเฉพาะเพื่อสร้าง HTML ที่มีโครงสร้างใน C# เริ่มจาก HTMLDocument สร้าง HTMLTableElement แทรกแถวและเซลล์ แล้วเพิ่มตารางที่เสร็จสมบูรณ์ลงในเอกสารก่อนบันทึก

สร้างตาราง HTML พร้อมสไตล์ใน C#

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

using Aspose.Html;

using HTMLDocument document = new HTMLDocument();

// Create and style the table
HTMLTableElement table = (HTMLTableElement)document.CreateElement("table");
table.Style.SetProperty("border-collapse", "collapse");
table.Style.SetProperty("width", "100%");

// Add rows and cells through the table DOM API
for (int rowIndex = 0; rowIndex < 3; rowIndex++)
{
    HTMLTableRowElement row = (HTMLTableRowElement)table.InsertRow(table.Rows.Length);

    for (int columnIndex = 0; columnIndex < 2; columnIndex++)
    {
        HTMLTableCellElement cell = (HTMLTableCellElement)row.InsertCell(row.Cells.Length);
        cell.TextContent = $"Row {rowIndex + 1}, Column {columnIndex + 1}";
        cell.Style.SetProperty("border", "1px solid #808080");
        cell.Style.SetProperty("padding", "8px");
    }
}

document.Body.AppendChild(table);
document.Save("table.html");

ขั้นตอนการสร้างตาราง HTML ใน C#

1. สร้างเอกสารใหม่ด้วยตัวสร้าง HTMLDocument หรือโหลดไฟล์ HTML ที่มีอยู่เมื่อต้องเพิ่มตารางลงในเนื้อหาเดิม
2. สร้างองค์ประกอบ <table> ด้วย CreateElement() และแปลงชนิดเป็น HTMLTableElement
3. เพิ่มแถวด้วย InsertRow() และเพิ่มเซลล์ข้อมูลด้วย InsertCell()
4. กำหนด TextContent ของแต่ละเซลล์ ใช้สไตล์ CSS และเพิ่มตารางที่เสร็จสมบูรณ์ลงใน body ของเอกสาร
5. เรียก Save() เพื่อเขียนผลลัพธ์ไปยัง table.html

ตัวเลือกสำหรับสร้างตาราง HTML

• สร้างส่วนของตารางตามความหมาย สร้าง <thead>, <tbody> และ <tfoot> แยกกันเมื่อหัวตาราง ข้อมูล และแถวสรุปมีหน้าที่ต่างกัน
• ควบคุมตำแหน่งของตาราง เพิ่มตารางลงใน document.Body หรือเลือกคอนเทนเนอร์ที่ต้องการก่อนแทรกลงในเอกสารที่มีอยู่
• กำหนดรูปแบบด้วย CSS ตั้งค่าเส้นขอบ ระยะห่าง ความกว้าง การจัดแนว สี และเลย์เอาต์ที่ตอบสนองผ่าน Style ขององค์ประกอบหรือสไตล์ชีต
• เพิ่มตัวระบุและเมทาดาทา กำหนด ID คลาส แอตทริบิวต์ data-* และแอตทริบิวต์ DOM อื่นเมื่อต้องเลือกหรือประมวลผลตารางในภายหลัง
• ดำเนินการต่อด้วยเวิร์กโฟลว์ที่เกี่ยวข้อง ใช้ แก้ไขตาราง HTML สำหรับเนื้อหาที่มีอยู่ แยกข้อมูลตาราง สำหรับค่าที่มีโครงสร้าง หรือ ตัวสร้างตาราง HTML สำหรับการสร้างตารางแบบโต้ตอบ

เอกสารประกอบตาราง HTML และ DOM

ดู แก้ไขเอกสาร HTML สำหรับเวิร์กโฟลว์ DOM ทั่วไปที่ใช้สร้าง แทรก อัปเดต และลบองค์ประกอบ HTML ส่วนเอกสารอ้างอิง API อธิบายคลาสเฉพาะสำหรับตาราง ส่วน แถว และเซลล์ รวมถึงเมธอด DOM ที่ใช้เพิ่มองค์ประกอบเหล่านี้ลงในเอกสาร

ติดตั้ง Aspose.HTML for .NET

ติดตั้ง Aspose.HTML for .NET จาก NuGet ด้วย .NET CLI:

dotnet add package Aspose.HTML

คุณยังสามารถใช้หน้าต่าง NuGet Package Manager หรือเรียกใช้ Install-Package Aspose.HTML ใน Package Manager Console ได้ ดูรายละเอียดการตั้งค่าใน คู่มือการติดตั้ง หรือขอ ใบอนุญาตชั่วคราว เพื่อประเมิน API โดยไม่มีข้อจำกัดของเวอร์ชันทดลอง

คำถามที่พบบ่อยเกี่ยวกับการสร้างตาราง HTML

1. เหตุใดหัวตารางจึงควรใช้ <th> แทน <td>?

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

2. ฉันสามารถเพิ่มตารางใหม่ลงในไฟล์ HTML ที่มีอยู่ได้หรือไม่?

ได้ เริ่มต้น HTMLDocument ด้วยพาธของไฟล์เดิม สร้างตาราง เพิ่มลงใน body หรือคอนเทนเนอร์ที่เลือก แล้วบันทึกผลลัพธ์เป็นไฟล์ HTML ใหม่หรือเขียนทับไฟล์เดิม

3. ฉันสามารถสร้างแถวของตารางจากคอลเลกชัน C# ได้หรือไม่?

ได้ วนซ้ำคอลเลกชัน แทรก HTMLTableRowElement หนึ่งรายการต่อหนึ่งเรคคอร์ด และสร้างเซลล์ที่ต้องการจากค่าของเรคคอร์ด API ไม่ได้บังคับแหล่งที่มาของข้อมูล

4. ควรใช้แอตทริบิวต์ HTML border, align และ width หรือไม่?

ควรใช้ CSS สำหรับการนำเสนอ กำหนดเส้นขอบ ความกว้าง ระยะขอบ และการจัดแนวผ่าน Style หรือสไตล์ชีต เพื่อไม่ให้ตารางที่สร้างขึ้นพึ่งพาแอตทริบิวต์ HTML สำหรับการนำเสนอที่ล้าสมัย

5. จะทำให้เซลล์หนึ่งกินพื้นที่หลายแถวหรือหลายคอลัมน์ได้อย่างไร?

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