Crear tabla HTML en C#

Las tablas HTML son una forma versátil y potente de mostrar datos en páginas web. Se pueden utilizar para crear tablas simples, como un calendario, o tablas más complejas, como una cuadrícula de datos. En esta publicación de blog, aprenderemos cómo crear una tabla HTML en C#, paso a paso. Esta guía le proporcionará el conocimiento y las habilidades que necesita para crear tablas HTML de forma eficaz en C#.

Este artículo cubre los siguientes temas:

  1. API de C# para crear tablas HTML
  2. Crear una tabla HTML en C#
  3. Crear una tabla HTML con atributo de estilo en C#
  4. Tabla HTML con intervalo de filas y colspan en C#
  5. Generador de tablas HTML en línea
  6. Recursos de aprendizaje gratuitos

API de C# para crear una tabla HTML

Usaremos Aspose.HTML for .NET para crear tablas HTML en C#. Permite a los desarrolladores manipular y trabajar con documentos HTML mediante programación. Proporciona una amplia gama de funciones y capacidades para analizar, convertir, editar y representar documentos HTML dentro de aplicaciones .NET.

Por favor descargue la DLL de la API o instálela usando NuGet.

PM> Install-Package Aspose.Html

Crear tabla HTML en C#

Podemos crear una tabla HTML siguiendo los pasos a continuación:

  1. Cree una instancia de la clase HTMLDocument.
  2. Opcionalmente, cree un elemento de estilo y agréguelo al elemento principal.
  3. Crear <table>,<tbody>,<tr>,<th>, y <td>elementos usando el método CreateElement().
  4. Agregue elementos secundarios a sus elementos principales utilizando el método AppendChild().
  5. Después de eso, agregue el <table> elemento al <body>elemento.
  6. Finalmente, llame al método Save() para guardar el documento en la ruta del archivo indicada.

El siguiente ejemplo de código muestra cómo crear una tabla HTML en C#.

// Prepare una ruta para guardar el archivo editado 
string savePath = "C:\\Files\\Table.html";

// Inicializar un documento HTML vacío
var document = new HTMLDocument();

// Cree un elemento de estilo y asigne los valores de estilo de borde de color y color de borde para el elemento de tabla
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";

// Busque el elemento del encabezado del documento y agregue el elemento de estilo al encabezado
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Declarar un cuerpo de variable que haga referencia al<body> elemento
var body = document.Body;

// Especificar columnas y filas
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;

// Crear elemento de tabla
var table = document.CreateElement("table");

// Crear un cuerpo de tabla
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Crear una fila de encabezado de tabla 
if (isFirstRowHeader)
{
    var tr = document.CreateElement("tr");
    tbody.AppendChild(tr);

    // Crear columnas de encabezado de tabla 
   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++)
    {
        // Crear una fila de tabla 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Crear celdas de encabezado de tabla
       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++)
    {
        // Crear una fila de tabla 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Crear celdas de tabla
       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);
        }
    }
}

// Agregar tabla al cuerpo
body.AppendChild(table);

// Guardar el documento en un archivo
document.Save(savePath);
Crear tabla HTML en C#

Crear tabla HTML en C#

Crear tabla HTML con atributo de estilo en C#

Podemos crear una tabla HTML siguiendo los pasos mencionados anteriormente. Sin embargo, necesitamos configurar el <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.

El siguiente ejemplo de código muestra cómo crear una tabla HTML con atributos de estilo en C#.

// Prepare una ruta para guardar el archivo editado 
string savePath = "C:\\Files\\TableWithStyle.html";

// Inicializar un documento HTML vacío
using var document = new HTMLDocument();

// Cree un elemento de estilo y asigne los valores de estilo de borde de color y color de borde para el elemento de tabla
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Busque el elemento del encabezado del documento y agregue el elemento de estilo al encabezado
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Declarar un cuerpo de variable que haga referencia al<body> elemento
var body = document.Body;

// Crear elemento de tabla
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");

// Crear cuerpo de tabla
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Crear fila de encabezado de tabla 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Establecer atributo de estilo con propiedades para el elemento seleccionado               
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");

// Crear la celda 1 del encabezado de la tabla
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);

// Crear la celda 2 del encabezado de la tabla
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);

// Crear la celda 3 del encabezado de la tabla
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);

// Crear fila de datos de la tabla 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Crear celda de datos de tabla 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Crear celda de datos de tabla 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);

// Crear celda de datos de tabla 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Agregar tabla al cuerpo
body.AppendChild(table);

// Guardar el documento en un archivo
document.Save(savePath);
Crear tabla HTML en C#

Crear tabla HTML en C#

Crear tabla HTML con Rowspan y Colspan en C#

De manera similar, también podemos configurar <colspan> y <rowspan>atributos para celdas de tabla usando el método SetAttribute(nombre de cadena, valor de cadena), como se muestra a continuación:

// Prepare una ruta para guardar el archivo editado 
string savePath = "C:\\Files\\ColSpanRowSpan.html";

// Inicializar un documento HTML vacío
using var document = new HTMLDocument();

// Cree un elemento de estilo y asigne los valores de estilo de borde de color y color de borde para el elemento de tabla
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Busque el elemento del encabezado del documento y agregue el elemento de estilo al encabezado
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Declarar un cuerpo de variable que haga referencia al<body> elemento
var body = document.Body;

// Crear elemento de tabla
var table = document.CreateElement("table");

// Crear cuerpo de tabla
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Crear fila de encabezado de tabla 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Crear la celda 1 del encabezado de la tabla
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);

// Especificar Colspan
th.SetAttribute("colspan", "2");

// Crear fila de datos de la tabla 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Crear la celda 1 del encabezado de la tabla
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);

// Crear celda de datos de tabla 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Crear fila de datos de la tabla 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Crear celda de encabezado de tabla
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);

// Especificar Colspan
th.SetAttribute("rowspan", "2");

// Crear celda de datos de tabla
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);

// Crear fila de datos de la tabla 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Crear celda de datos de tabla
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Agregar tabla al cuerpo
body.AppendChild(table);

// Guardar el documento en un archivo
document.Save(savePath);
Crear tabla HTML con Rowspan y Colspan en C#

Crear tabla HTML con Rowspan y Colspan en C#

Obtenga una licencia gratuita

Puede obtener una licencia temporal gratuita para probar Aspose.HTML for .NET sin limitaciones de evaluación.

Generador de tablas HTML en línea

Puede utilizar esta aplicación web gratuita en línea generador de tablas HTML, que se desarrolla utilizando esta API.

Crear tabla HTML – Recursos de aprendizaje

Puede obtener más información sobre la creación de documentos HTML con tablas y explorar otras características de la biblioteca utilizando los recursos a continuación:

Conclusión

En esta publicación de blog, hemos aprendido cómo crear tablas HTML en C#. Hemos cubierto los conceptos básicos de la creación de tablas mediante programación utilizando Aspose.HTML for .NET. Si sigue los pasos y los ejemplos de código proporcionados en este artículo, podrá desarrollar fácilmente sus propias soluciones personalizadas para trabajar con tablas HTML. En caso de cualquier ambigüedad, no dude en contactarnos en nuestro foro de soporte gratuito.

Ver también