在 C# 中创建 HTML 表格

HTML 表格是一种在网页上显示数据的通用且强大的方式。它们可用于创建简单的表(例如日历)或更复杂的表(例如数据网格)。在这篇博文中，我们将逐步学习如何在 C# 中创建 HTML 表格。本指南将为您提供在 C# 中有效创建 HTML 表格所需的知识和技能。

本文涵盖以下主题：

  1. 用于创建 HTML 表格的 C# API
  2. 在 C# 中创建 HTML 表格
  3. 在C#中创建带有样式属性的HTML表格
  4. C# 中具有 rowspan 和 colspan 的 HTML 表格
  5. 在线 HTML 表格生成器
  6. 免费学习资源

用于创建 HTML 表的 C# API

我们将使用 Aspose.HTML for .NET 在 C# 中创建 HTML 表格。它允许开发人员以编程方式操作和使用 HTML 文档。它提供了广泛的特性和功能，用于在 .NET 应用程序中解析、转换、编辑和呈现 HTML 文档。

请下载 API 的 DLL 或使用 NuGet 安装它。

PM> Install-Package Aspose.Html

在 C# 中创建 HTML 表格

我们可以按照以下步骤创建 HTML 表格：

  1. 创建 HTMLDocument 类的实例。
  2. (可选)创建一个样式元素并将其附加到 head 元素。
  3. 创建<table> ,<tbody> ,<tr> ,<th> 、和<td> 使用 CreateElement() 方法的元素。
  4. 使用 AppendChild() 方法将子元素追加到其父元素。
  5. 之后，附加<table> 元素到 <body> 元素。
  6. 最后，调用 Save() 方法将文档保存在给定的文件路径中。

以下代码示例演示如何在 C# 中创建 HTML 表。

// 准备编辑文件保存路径 
string savePath = "C:\\Files\\Table.html";

// 初始化一个空的 HTML 文档
var document = new HTMLDocument();

// 创建样式元素并为表格元素分配颜色 border-style 和 border-color 值
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";

// 找到文档头元素并将样式元素附加到头部
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// 声明一个引用的变量体<body>元素
var body = document.Body;

// 指定列和行
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;

// 创建表格元素
var table = document.CreateElement("table");

// 创建表体
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// 创建表格标题行 
if (isFirstRowHeader)
{
    var tr = document.CreateElement("tr");
    tbody.AppendChild(tr);

    // 创建表标题列 
   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++)
    {
        // 创建表行 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // 创建表格标题单元格
       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++)
    {
        // 创建表行 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // 创建表格单元格
       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);
        }
    }
}

// 将表格附加到正文
body.AppendChild(table);

// 将文档保存到文件
document.Save(savePath);
在 C# 中创建 HTML 表格

在 C# 中创建 HTML 表格

在 C# 中创建带有样式属性的 HTML 表

我们可以按照前面提到的步骤创建一个 HTML 表格。但是，我们需要设置 <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.

以下代码示例演示如何在 C# 中创建具有样式属性的 HTML 表。

// 准备编辑文件保存路径 
string savePath = "C:\\Files\\TableWithStyle.html";

// 初始化一个空的 HTML 文档
using var document = new HTMLDocument();

// 创建样式元素并为表格元素分配颜色 border-style 和 border-color 值
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// 找到文档头元素并将样式元素附加到头部
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// 声明一个引用的变量体<body>元素
var body = document.Body;

// 创建表格元素
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");

// 创建表体
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// 创建表标题行 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// 使用所选元素的属性设置样式属性               
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");

// 创建表头单元格 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);

// 创建表头单元格 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);

// 创建表头单元格 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);

// 创建表数据行 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// 创建表格数据单元格1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// 创建表格数据单元格2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);

// 创建表数据单元格 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// 将表格附加到正文
body.AppendChild(table);

// 将文档保存到文件
document.Save(savePath);
在 C# 中创建 HTML 表格

在 C# 中创建 HTML 表格

在 C# 中使用 Rowspan 和 Colspan 创建 HTML 表

同样，我们也可以设置<colspan> 和 <rowspan> 使用 SetAttribute(string name, string value) 方法为表格单元格设置属性，如下所示：

// 准备编辑文件保存路径 
string savePath = "C:\\Files\\ColSpanRowSpan.html";

// 初始化一个空的 HTML 文档
using var document = new HTMLDocument();

// 创建样式元素并为表格元素分配颜色 border-style 和 border-color 值
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// 找到文档头元素并将样式元素附加到头部
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// 声明一个引用的变量体<body>元素
var body = document.Body;

// 创建表格元素
var table = document.CreateElement("table");

// 创建表体
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// 创建表标题行 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// 创建表头单元格 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);

// 指定列跨度
th.SetAttribute("colspan", "2");

// 创建表数据行 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// 创建表头单元格 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);

// 创建表格数据单元格2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// 创建表数据行 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// 创建表格标题单元格
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);

// 指定列跨度
th.SetAttribute("rowspan", "2");

// 创建表格数据单元格
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);

// 创建表数据行 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// 创建表格数据单元格
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// 将表格附加到正文
body.AppendChild(table);

// 将文档保存到文件
document.Save(savePath);
在 C# 中使用 Rowspan 和 Colspan 创建 HTML 表

在 C# 中使用 Rowspan 和 Colspan 创建 HTML 表

获取免费许可证

您可以获得免费的临时许可证来尝试 Aspose.HTML for .NET，而不受评估限制。

在线 HTML 表格生成器

您可以使用这个免费的在线 HTML 表格生成器 网络应用程序，它是使用此 API 开发的。

创建 HTML 表 – 学习资源

您可以了解有关使用表格创建 HTML 文档的更多信息，并使用以下资源探索该库的各种其他功能：

结论

在这篇博文中，我们学习了如何在 C# 中创建 HTML 表格。我们已经介绍了使用 Aspose.HTML for .NET 以编程方式创建表的基础知识。通过遵循本文中提供的步骤和代码示例，您可以轻松开发自己的自定义解决方案来使用 HTML 表格。如有任何疑问，请随时通过我们的免费支持论坛与我们联系。

也可以看看