As tabelas HTML são uma forma versátil e poderosa de exibir dados em páginas da web. Eles podem ser usados para criar tabelas simples, como um calendário, ou tabelas mais complexas, como uma grade de dados. Nesta postagem do blog, aprenderemos como criar uma tabela HTML em C#, passo a passo. Este guia fornecerá o conhecimento e as habilidades necessárias para criar tabelas HTML em C# com eficácia.
Este artigo cobre os seguintes tópicos:
- API C# para criar tabelas HTML
- Crie uma tabela HTML em C#
- Crie uma tabela HTML com atributo de estilo em C#
- Tabela HTML com rowspan e colspan em C#
- Gerador de tabela HTML online
- Recursos de aprendizagem gratuitos
API C# para criar tabela HTML
Usaremos o Aspose.HTML for .NET para criar tabelas HTML em C#. Ele permite que os desenvolvedores manipulem e trabalhem com documentos HTML de forma programática. Ele fornece uma ampla gama de recursos e capacidades para análise, conversão, edição e renderização de documentos HTML em aplicativos .NET.
Por favor baixe a DLL da API ou instale-a usando NuGet.
PM> Install-Package Aspose.Html
Criar tabela HTML em C#
Podemos criar uma tabela HTML seguindo as etapas abaixo:
- Crie uma instância da classe HTMLDocument.
- Opcionalmente, crie um elemento de estilo e anexe-o ao elemento head.
- Criar
<table>,<tbody>,<tr>,<th>, e<td>elementos usando o método CreateElement(). - Anexe elementos filhos aos seus elementos pais usando o método AppendChild().
- Depois disso, anexe o
<table>elemento para o<body>elemento. - Por fim, chame o método Save() para salvar o documento no caminho de arquivo fornecido.
O exemplo de código a seguir mostra como criar uma tabela HTML em C#.
// Prepare um caminho para salvar o arquivo editado
string savePath = "C:\\Files\\Table.html";
// Inicialize um documento HTML vazio
var document = new HTMLDocument();
// Crie um elemento de estilo e atribua os valores de cor border-style e border-color para o elemento table
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";
// Encontre o elemento principal do documento e anexe o elemento de estilo ao cabeçalho
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Declare um corpo variável que faça referência ao<body> elemento
var body = document.Body;
// Especifique colunas e linhas
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;
// Criar elemento de tabela
var table = document.CreateElement("table");
// Crie um corpo de tabela
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Crie uma linha de cabeçalho de tabela
if (isFirstRowHeader)
{
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Criar colunas de cabeçalho de tabela
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++)
{
// Crie uma linha da tabela
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Criar células de cabeçalho de tabela
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++)
{
// Crie uma linha da tabela
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Criar células de tabela
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);
}
}
}
// Anexar tabela ao corpo
body.AppendChild(table);
// Salve o documento em um arquivo
document.Save(savePath);
Criar tabela HTML em C#
Criar tabela HTML com atributo de estilo em C#
Podemos criar uma tabela HTML seguindo as etapas mencionadas anteriormente. No entanto, precisamos definir o <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.
O exemplo de código a seguir mostra como criar uma tabela HTML com atributos de estilo em C#.
// Prepare um caminho para salvar o arquivo editado
string savePath = "C:\\Files\\TableWithStyle.html";
// Inicialize um documento HTML vazio
using var document = new HTMLDocument();
// Crie um elemento de estilo e atribua os valores de cor border-style e border-color para o elemento table
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";
// Encontre o elemento principal do documento e anexe o elemento de estilo ao cabeçalho
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Declare um corpo variável que faça referência ao<body> elemento
var body = document.Body;
// Criar elemento de tabela
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");
// Criar corpo da tabela
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Criar linha de cabeçalho da tabela
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Defina o atributo de estilo com propriedades para o elemento selecionado
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");
// Criar célula de cabeçalho da tabela 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);
// Criar célula de cabeçalho de tabela 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);
// Criar célula de cabeçalho da tabela 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);
// Criar linha de dados da tabela
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Criar célula de dados da tabela 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);
// Criar célula de dados da tabela 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);
// Criar célula de dados da tabela 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);
// Anexar tabela ao corpo
body.AppendChild(table);
// Salve o documento em um arquivo
document.Save(savePath);
Criar tabela HTML em C#
Crie tabela HTML com Rowspan e Colspan em C#
Da mesma forma, também podemos definir <colspan> e <rowspan> atributos para células da tabela usando o método SetAttribute(string name, string value), conforme mostrado abaixo:
// Prepare um caminho para salvar o arquivo editado
string savePath = "C:\\Files\\ColSpanRowSpan.html";
// Inicialize um documento HTML vazio
using var document = new HTMLDocument();
// Crie um elemento de estilo e atribua os valores de cor border-style e border-color para o elemento table
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";
// Encontre o elemento principal do documento e anexe o elemento de estilo ao cabeçalho
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Declare um corpo variável que faça referência ao<body> elemento
var body = document.Body;
// Criar elemento de tabela
var table = document.CreateElement("table");
// Criar corpo da tabela
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Criar linha de cabeçalho da tabela
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Criar célula de cabeçalho da tabela 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);
// Especifique Colspan
th.SetAttribute("colspan", "2");
// Criar linha de dados da tabela
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Criar célula de cabeçalho da tabela 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);
// Criar célula de dados da tabela 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);
// Criar linha de dados da tabela
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Criar célula de cabeçalho de tabela
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);
// Especifique Colspan
th.SetAttribute("rowspan", "2");
// Criar célula de dados da tabela
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);
// Criar linha de dados da tabela
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Criar célula de dados da tabela
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);
// Anexar tabela ao corpo
body.AppendChild(table);
// Salve o documento em um arquivo
document.Save(savePath);
Crie tabela HTML com Rowspan e Colspan em C#
Obtenha uma licença gratuita
Você pode obter uma licença temporária gratuita para experimentar o Aspose.HTML for .NET sem limitações de avaliação.
Gerador de tabela HTML on-line
Você pode usar este aplicativo da web on-line gratuito gerador de tabela HTML, que é desenvolvido usando esta API.
Criar tabela HTML – Recursos de aprendizagem
Você pode aprender mais sobre como criar documentos HTML com tabelas e explorar vários outros recursos da biblioteca usando os recursos abaixo:
Conclusão
Nesta postagem do blog, aprendemos como criar tabelas HTML em C#. Abordamos os fundamentos da criação de tabelas programaticamente usando Aspose.HTML para .NET. Seguindo as etapas e os exemplos de código fornecidos neste artigo, você pode desenvolver facilmente suas próprias soluções personalizadas para trabalhar com tabelas HTML. Em caso de qualquer ambigüidade, sinta-se à vontade para nos contatar em nosso fórum de suporte gratuito.