How to Edit HTML Table using Aspose.HTML

HTML tables serve as an important component for organizing and presenting data on the web. However, there are times when you need to customize and modify existing tables to suit your needs better. The Aspose.HTML for .NET library facilitates this process, offering a robust set of tools for manipulating HTML content. Let’s explore how to edit HTML tables using C#.

First, make sure you have Aspose.HTML for .NET installed in your project. The installation process of this library is quite simple. Open the NuGet package manager, search for Aspose.HTML, and install. You may also use the following command from the Package Manager Console:


Install Aspose.HTML for .NET

Install-Package Aspose.HTML



Edit Table Structure and Style in C#

Aspose.HTML for .NET provides a generic API for manipulating HTML documents. The following C# example shows how to find a table in an HTML document and edit it by adding rows and cells and changing the table style:


Edit HTML table – C# Code Example

using Aspose.Html;
using System.Linq;
using System.IO;
...

    // Create an instance of an HTML document
    using (var document = new HTMLDocument("document-with-tables.html"))
    {
        // Find the first <table> element
        var table = (HTMLTableElement)document.GetElementsByTagName("table").First();

        // Add html rows & columns
        for (int i = 0; i < 3; i++)
        {
            var row = (HTMLTableRowElement)table.InsertRow(table.Rows.Length);
            for (int j = 0; j < 4; j++)
            {
                var cell = (HTMLTableCellElement)row.InsertCell(row.Cells.Length);
                cell.TextContent = $"Added Row: {i + 1}, Column {j + 1}";
            }
        }

        // Set the style attribute and assign the border-style, border-color, and width values for the first <table> element
        table.SetAttribute("style", "border-style:solid; border-color:rgb(255, 0, 0); width: 40%");
        
        // Save the modified document
        document.Save("document-with-edited-tables.html");
    }



Steps to Edit HTML Table

In the example, we add rows and columns and apply a custom style to the first HTML table in the document. To edit HTML table, follow these steps:

  1. Use the HTMLDocument() constructor to initialize an HTML document. Pass the path of the source HTML file as a parameter to the constructor.
  2. Use the GetElementsByTagName() method to find the first <table> element within the HTML document.
  3. Use the InsertRow() and InsertCell() methods to add rows and cells to the first HTML table in the document.
  4. Use the SetAttribute() method of the Element class to set a style attribute for the table. The style attribute includes CSS properties such as border-style, border-color, and width.
  5. Call the Save() method to save the modified HTML document.

To learn more about Aspose.HTML API, please visit our documentation guide. The Edit HTML Document documentation article gives you basic information on how to read or edit the Document Object Model using Aspose.HTML for .NET API. You will explore how to create HTML elements and how to work with them – modify the document by inserting new nodes, removing, or editing the content of existing nodes.



HTML Table Generator – Online App

Aspose.HTML offers the HTML Table Generator is an online application for creating tables with customizable options. It’s free and clear to use. Just fill in all required options and get a result! The HTML Table Generator automatically creates the HTML table code. This tool was designed to let you get a required HTML table and put it online as quickly as possible.