Tạo bảng HTML trong C#

Bảng HTML là một cách linh hoạt và mạnh mẽ để hiển thị dữ liệu trên các trang web. Chúng có thể được sử dụng để tạo các bảng đơn giản, chẳng hạn như lịch hoặc các bảng phức tạp hơn, chẳng hạn như lưới dữ liệu. Trong bài đăng trên blog này, chúng ta sẽ tìm hiểu cách tạo bảng HTML trong C# theo từng bước. Hướng dẫn này sẽ cung cấp cho bạn kiến thức và kỹ năng cần thiết để tạo bảng HTML trong C# một cách hiệu quả.

Bài viết này bao gồm các chủ đề sau:

  1. API C# để tạo bảng HTML
  2. Tạo bảng HTML trong C#
  3. Tạo bảng HTML với thuộc tính style trong C#
  4. Bảng HTML có rowspan và colspan trong C#
  5. Trình tạo bảng HTML trực tuyến
  6. Tài nguyên học tập miễn phí

API C# để tạo bảng HTML

Chúng ta sẽ sử dụng Aspose.HTML for .NET để tạo bảng HTML trong C#. Nó cho phép các nhà phát triển thao tác và làm việc với các tài liệu HTML theo chương trình. Nó cung cấp nhiều tính năng và khả năng phân tích cú pháp, chuyển đổi, chỉnh sửa và hiển thị tài liệu HTML trong các ứng dụng .NET.

Vui lòng tải xuống DLL của API hoặc cài đặt nó bằng NuGet.

PM> Install-Package Aspose.Html

Tạo bảng HTML trong C#

Chúng ta có thể tạo bảng HTML bằng cách thực hiện theo các bước dưới đây:

  1. Tạo một thể hiện của lớp HTMLDocument.
  2. Bạn có thể tùy ý tạo một phần tử kiểu và nối nó vào phần tử đầu.
  3. Tạo <table> , <tbody> , <tr> , <th> , và <td> các phần tử sử dụng phương thức CreateElement().
  4. Nối các phần tử con vào phần tử cha của chúng bằng phương thức AppendChild().
  5. Sau đó, nối thêm <table> phần tử vào <body> phần tử.
  6. Cuối cùng, gọi phương thức Save() để lưu tài liệu vào đường dẫn file đã cho.

Mẫu mã sau đây cho biết cách tạo bảng HTML trong C#.

// Chuẩn bị đường dẫn để lưu file đã chỉnh sửa 
string savePath = "C:\\Files\\Table.html";

// Khởi tạo một tài liệu HTML trống
var document = new HTMLDocument();

// Tạo một phần tử kiểu và gán các giá trị color border-style và border-color cho phần tử bảng
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";

// Tìm phần tử đầu tài liệu và nối phần tử kiểu vào phần đầu
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Khai báo một thân biến tham chiếu đến<body> yếu tố
var body = document.Body;

// Chỉ định cột và hàng
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;

// Tạo phần tử bảng
var table = document.CreateElement("table");

// Tạo nội dung bảng
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Tạo hàng tiêu đề bảng 
if (isFirstRowHeader)
{
    var tr = document.CreateElement("tr");
    tbody.AppendChild(tr);

    // Tạo cột tiêu đề bảng 
   for (int j = 1; j < cols + 1; j++)
    {
        var th = document.CreateElement("th");
        var title = document.CreateTextNode("Column-" + j);
        th.AppendChild(title);
        tr.AppendChild(th);
    }

   for (int i = 0; i < rows - 1; i++)
    {
        // Tạo một hàng trong bảng 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Tạo ô tiêu đề bảng
       for (int j = 1; j < cols + 1; j++)
        {
            var td = document.CreateElement("td");
            var title = document.CreateTextNode("Data-" + j);
            td.AppendChild(title);
            dataTr.AppendChild(td);
        }
    }
} 
else
{
   for (int i = 0; i < rows; i++)
    {
        // Tạo một hàng trong bảng 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Tạo ô bảng
       for (int j = 1; j < cols + 1; j++)
        {
            var td = document.CreateElement("td");
            var title = document.CreateTextNode("Data-" + j);
            td.AppendChild(title);
            dataTr.AppendChild(td);
        }
    }
}

// Nối bảng vào nội dung
body.AppendChild(table);

// Lưu tài liệu vào một tập tin
document.Save(savePath);
Tạo bảng HTML trong C#

Tạo bảng HTML trong C#

Tạo bảng HTML với thuộc tính kiểu trong C#

Chúng ta có thể tạo bảng HTML bằng cách làm theo các bước được đề cập trước đó. Tuy nhiên, chúng ta cần đặt <style> attributes for the elements using the SetAttribute(string name, string value) method. It adds a new attribute for the element or updates the value if the attribute name is already present. We can set attributes for <table>, <tbody>, <tr>, <th>, and <td> elements.

Mẫu mã sau đây cho thấy cách tạo bảng HTML với các thuộc tính kiểu trong C#.

// Chuẩn bị đường dẫn để lưu file đã chỉnh sửa 
string savePath = "C:\\Files\\TableWithStyle.html";

// Khởi tạo một tài liệu HTML trống
using var document = new HTMLDocument();

// Tạo một phần tử kiểu và gán các giá trị color border-style và border-color cho phần tử bảng
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Tìm phần tử đầu tài liệu và nối phần tử kiểu vào phần đầu
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Khai báo một thân biến tham chiếu đến<body> yếu tố
var body = document.Body;

// Tạo phần tử bảng
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");

// Tạo thân bảng
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Tạo hàng tiêu đề bảng 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Đặt thuộc tính kiểu với các thuộc tính cho phần tử đã chọn               
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");

// Tạo ô tiêu đề bảng 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);

// Tạo ô tiêu đề bảng 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);

// Tạo ô tiêu đề bảng 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);

// Tạo hàng dữ liệu bảng 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Tạo ô dữ liệu bảng 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Tạo ô dữ liệu bảng 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);

// Tạo ô dữ liệu bảng 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Nối bảng vào nội dung
body.AppendChild(table);

// Lưu tài liệu vào một tập tin
document.Save(savePath);
Tạo bảng HTML trong C#

Tạo bảng HTML trong C#

Tạo bảng HTML với Rowspan và Colspan trong C#

Tương tự, chúng ta cũng có thể đặt <colspan> và <rowspan> thuộc tính cho các ô trong bảng bằng phương thức SetAttribution(tên chuỗi, giá trị chuỗi), như hiển thị bên dưới:

// Chuẩn bị đường dẫn để lưu file đã chỉnh sửa 
string savePath = "C:\\Files\\ColSpanRowSpan.html";

// Khởi tạo một tài liệu HTML trống
using var document = new HTMLDocument();

// Tạo một phần tử kiểu và gán các giá trị color border-style và border-color cho phần tử bảng
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Tìm phần tử đầu tài liệu và nối phần tử kiểu vào phần đầu
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Khai báo một thân biến tham chiếu đến<body> yếu tố
var body = document.Body;

// Tạo phần tử bảng
var table = document.CreateElement("table");

// Tạo thân bảng
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Tạo hàng tiêu đề bảng 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Tạo ô tiêu đề bảng 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);

// Chỉ định Colspan
th.SetAttribute("colspan", "2");

// Tạo hàng dữ liệu bảng 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Tạo ô tiêu đề bảng 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);

// Tạo ô dữ liệu bảng 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Tạo hàng dữ liệu bảng 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Tạo ô tiêu đề bảng
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);

// Chỉ định Colspan
th.SetAttribute("rowspan", "2");

// Tạo ô dữ liệu bảng
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);

// Tạo hàng dữ liệu bảng 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Tạo ô dữ liệu bảng
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Nối bảng vào nội dung
body.AppendChild(table);

// Lưu tài liệu vào một tập tin
document.Save(savePath);
Tạo bảng HTML với Rowspan và Colspan trong C#

Tạo bảng HTML với Rowspan và Colspan trong C#

Nhận giấy phép miễn phí

Bạn có thể nhận giấy phép tạm thời miễn phí để dùng thử Aspose.HTML for .NET mà không bị giới hạn về đánh giá.

Trình tạo bảng HTML trực tuyến

Bạn có thể sử dụng ứng dụng web trình tạo bảng HTML trực tuyến miễn phí này, được phát triển bằng API này.

Tạo bảng HTML – Tài nguyên học tập

Bạn có thể tìm hiểu thêm về cách tạo tài liệu HTML bằng bảng và khám phá nhiều tính năng khác của thư viện bằng cách sử dụng các tài nguyên bên dưới:

Phần kết luận

Trong bài đăng trên blog này, chúng ta đã học cách tạo bảng HTML trong C#. Chúng tôi đã trình bày những kiến thức cơ bản về tạo bảng theo chương trình bằng Aspose.HTML for .NET. Bằng cách làm theo các bước và mẫu mã được cung cấp trong bài viết này, bạn có thể dễ dàng phát triển các giải pháp tùy chỉnh của riêng mình để làm việc với các bảng HTML. Trong trường hợp có bất kỳ sự mơ hồ nào, vui lòng liên hệ với chúng tôi trên diễn đàn hỗ trợ miễn phí của chúng tôi.

Xem thêm