Create HTML Table in C#

HTML tables are a versatile and powerful way to display data on web pages. They can be used to create simple tables, such as a calendar, or more complex tables, such as a data grid. In this blog post, we will learn how to create an HTML table in C#, step by step. This guide will provide you with the knowledge and skills you need to effectively create HTML tables in C#.

This article covers the following topics:

  1. C# API to create HTML tables
  2. Create an HTML table in C#
  3. Create an HTML table with style attribute in C#
  4. HTML table with rowspan and colspan in C#
  5. Online HTML table generator
  6. Free learning resources

C# API to Create HTML Table

We will use the Aspose.HTML for .NET for creating HTML tables in C#. It allows developers to manipulate and work with HTML documents programmatically. It provides a wide range of features and capabilities for parsing, converting, editing, and rendering HTML documents within .NET applications.

Please either download the DLL of the API or install it using NuGet.

PM> Install-Package Aspose.Html

Create HTML Table in C#

We can create an HTML table by following the steps below:

  1. Create an instance of the HTMLDocument class.
  2. Optionally, create a style element and append it to the head element.
  3. Create <table>, <tbody>, <tr>, <th>, and <td> elements using the CreateElement() method.
  4. Append child elements to their parent elements using the AppendChild() method.
  5. After that, append the <table> element to the <body> element.
  6. Finally, call the Save() method to save the document at the given file path.

The following code sample shows how to create an HTML table in C#.

// Prepare a path for edited file saving
string savePath = "C:\\Files\\Table.html";
// Initialize an empty HTML document
var document = new HTMLDocument();
// Create a style element and assign the color border-style and border-color values for table element
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";
// Find the document head element and append style element to the head
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Declare a variable body that references the <body> element
var body = document.Body;
// Specify cols and rows
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;
// Create table element
var table = document.CreateElement("table");
// Create a table body
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Create a table header row
if (isFirstRowHeader)
{
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Create table header columns
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++)
{
// Create a table row
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Create table header cells
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++)
{
// Create a table row
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Create table cells
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);
}
}
}
// Append table to body
body.AppendChild(table);
// Save the document to a file
document.Save(savePath);
view raw create-html-table-in-csharp_create.cs hosted with ❤ by GitHub
Create HTML Table in C#

Create HTML Table in C#

Create HTML Table With Style Attribute in C#

We can create an HTML table by following the steps mentioned earlier. However, we need to set the <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.

The following code sample shows how to create an HTML table with style attributes in C#.

// Prepare a path for edited file saving
string savePath = "C:\\Files\\TableWithStyle.html";
// Initialize an empty HTML document
using var document = new HTMLDocument();
// Create a style element and assign the color border-style and border-color values for table element
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";
// Find the document head element and append style element to the head
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Declare a variable body that references the <body> element
var body = document.Body;
// Create table element
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");
// Create table body
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Create table header row
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Set style attribute with properties for the selected element
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");
// Create table header cell 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);
// Create table header cell 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);
// Create table header cell 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);
// Create table data row
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Create table data cell 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);
// Create table data cell 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);
// Create table data cell 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);
// Append table to body
body.AppendChild(table);
// Save the document to a file
document.Save(savePath);
view raw create-html-table-in-csharp_style.cs hosted with ❤ by GitHub
Create HTML Table in C#

Create HTML Table in C#

Create HTML Table with Rowspan and Colspan in C#

Similarly, we can also set <colspan> and <rowspan> attributes for table cells using the SetAttribute(string name, string value) method, as shown below:

// Prepare a path for edited file saving
string savePath = "C:\\Files\\ColSpanRowSpan.html";
// Initialize an empty HTML document
using var document = new HTMLDocument();
// Create a style element and assign the color border-style and border-color values for table element
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";
// Find the document head element and append style element to the head
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Declare a variable body that references the <body> element
var body = document.Body;
// Create table element
var table = document.CreateElement("table");
// Create table body
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Create table header row
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Create table header cell 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);
// Specify Colspan
th.SetAttribute("colspan", "2");
// Create table data row
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Create table header cell 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);
// Create table data cell 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);
// Create table data row
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Create table header cell
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);
// Specify Colspan
th.SetAttribute("rowspan", "2");
// Create table data cell
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);
// Create table data row
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Create table data cell
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);
// Append table to body
body.AppendChild(table);
// Save the document to a file
document.Save(savePath);
view raw create-html-table-in-csharp_colspan_rowspan.cs hosted with ❤ by GitHub
Create HTML Table with Rowspan and Colspan in C#

Create HTML Table with Rowspan and Colspan in C#

Get a Free License

You can get a free temporary license to try Aspose.HTML for .NET without evaluation limitations.

Online HTML Table Generator

You may use this free online HTML table generator web app, which is developed using this API.

Create HTML Table – Learning Resources

You can learn more about creating HTML documents with tables and explore various other features of the library using the resources below:

Conclusion

In this blog post, we have learned how to create HTML tables in C#. We have covered the basics of creating tables programmatically using Aspose.HTML for .NET. By following the steps and code samples provided in this article, you can easily develop your own customized solutions for working with HTML tables. In case of any ambiguity, please feel free to contact us on our free support forum.

See Also