Skapa HTML-tabell i C#

HTML-tabeller är ett mångsidigt och kraftfullt sätt att visa data på webbsidor. De kan användas för att skapa enkla tabeller, till exempel en kalender, eller mer komplexa tabeller, till exempel ett datanät. I det här blogginlägget kommer vi att lära oss hur man skapar en HTML-tabell i C#, steg för steg. Den här guiden ger dig de kunskaper och färdigheter du behöver för att effektivt skapa HTML-tabeller i C#.

Den här artikeln tar upp följande ämnen:

  1. C# API för att skapa HTML-tabeller
  2. Skapa en HTML-tabell i C#
  3. Skapa en HTML-tabell med stilattribut i C#
  4. HTML-tabell med radspann och kolspann i C#
  5. Online HTML-tabellgenerator
  6. Gratis läranderesurser

C# API för att skapa HTML-tabell

Vi kommer att använda Aspose.HTML for .NET för att skapa HTML-tabeller i C#. Det tillåter utvecklare att manipulera och arbeta med HTML-dokument programmatiskt. Den tillhandahåller ett brett utbud av funktioner och möjligheter för att analysera, konvertera, redigera och rendera HTML-dokument i .NET-applikationer.

Vänligen antingen ladda ned API:ets DLL eller installera den med NuGet.

PM> Install-Package Aspose.Html

Skapa HTML-tabell i C#

Vi kan skapa en HTML-tabell genom att följa stegen nedan:

  1. Skapa en instans av HTMLDocument-klassen.
  2. Du kan eventuellt skapa ett stilelement och lägga till det i huvudelementet.
  3. Skapa <table> , <tbody> , <tr> , <th> , och <td> -element med metoden CreateElement().
  4. Lägg till underordnade element till sina överordnade element med metoden AppendChild().
  5. Efter det lägger du till <table> element till <body> element.
  6. Till sist, anropa metoden Save() för att spara dokumentet på den givna sökvägen.

Följande kodexempel visar hur man skapar en HTML-tabell i C#.

// Förbered en sökväg för att spara redigerade filer 
string savePath = "C:\\Files\\Table.html";

// Initiera ett tomt HTML-dokument
var document = new HTMLDocument();

// Skapa ett stilelement och tilldela färggräns-stil- och kantfärgvärdena för tabellelementet
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";

// Hitta dokumenthuvudelementet och lägg till stilelement till huvudet
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarera en variabelkropp som refererar till<body> element
var body = document.Body;

// Ange kolor och rader
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;

// Skapa tabellelement
var table = document.CreateElement("table");

// Skapa en tabellkropp
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Skapa en tabellrubrikrad 
if (isFirstRowHeader)
{
    var tr = document.CreateElement("tr");
    tbody.AppendChild(tr);

    // Skapa tabellrubrikkolumner 
   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++)
    {
        // Skapa en tabellrad 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Skapa tabellrubrikceller
       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++)
    {
        // Skapa en tabellrad 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Skapa tabellceller
       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);
        }
    }
}

// Bifoga tabellen till kroppen
body.AppendChild(table);

// Spara dokumentet i en fil
document.Save(savePath);
Skapa HTML-tabell i C#

Skapa HTML-tabell i C#

Skapa HTML-tabell med stilattribut i C#

Vi kan skapa en HTML-tabell genom att följa stegen som nämnts tidigare. Vi måste dock ställa in <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.

Följande kodexempel visar hur man skapar en HTML-tabell med stilattribut i C#.

// Förbered en sökväg för att spara redigerade filer 
string savePath = "C:\\Files\\TableWithStyle.html";

// Initiera ett tomt HTML-dokument
using var document = new HTMLDocument();

// Skapa ett stilelement och tilldela färggräns-stil- och kantfärgvärdena för tabellelementet
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Hitta dokumenthuvudelementet och lägg till stilelement till huvudet
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarera en variabelkropp som refererar till<body> element
var body = document.Body;

// Skapa tabellelement
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");

// Skapa tabellkropp
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Skapa tabellrubrikrad 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Ställ in stilattribut med egenskaper för det valda elementet               
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");

// Skapa tabellrubrik cell 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);

// Skapa tabellrubrik cell 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);

// Skapa tabellrubrik cell 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);

// Skapa tabelldatarad 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Skapa tabelldatacell 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Skapa tabelldatacell 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);

// Skapa tabelldatacell 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Bifoga tabellen till kroppen
body.AppendChild(table);

// Spara dokumentet i en fil
document.Save(savePath);
Skapa HTML-tabell i C#

Skapa HTML-tabell i C#

Skapa HTML-tabell med Rowspan och Colspan i C#

På samma sätt kan vi också ställa in <colspan> och <rowspan> attribut för tabellceller med metoden SetAttribute(strängnamn, strängvärde), som visas nedan:

// Förbered en sökväg för att spara redigerade filer 
string savePath = "C:\\Files\\ColSpanRowSpan.html";

// Initiera ett tomt HTML-dokument
using var document = new HTMLDocument();

// Skapa ett stilelement och tilldela färggräns-stil- och kantfärgvärdena för tabellelementet
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Hitta dokumenthuvudelementet och lägg till stilelement till huvudet
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarera en variabelkropp som refererar till<body> element
var body = document.Body;

// Skapa tabellelement
var table = document.CreateElement("table");

// Skapa tabellkropp
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Skapa tabellrubrikrad 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Skapa tabellrubrik cell 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);

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

// Skapa tabelldatarad 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Skapa tabellrubrik cell 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);

// Skapa tabelldatacell 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Skapa tabelldatarad 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Skapa tabellhuvudcell
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);

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

// Skapa tabelldatacell
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);

// Skapa tabelldatarad 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Skapa tabelldatacell
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Bifoga tabellen till kroppen
body.AppendChild(table);

// Spara dokumentet i en fil
document.Save(savePath);
Skapa HTML-tabell med Rowspan och Colspan i C#

Skapa HTML-tabell med Rowspan och Colspan i C#

Skaffa en gratis licens

Du kan skaffa en gratis tillfällig licens för att prova Aspose.HTML för .NET utan utvärderingsbegränsningar.

Online HTML-tabellgenerator

Du kan använda den här gratis webbappen HTML table generator online, som är utvecklad med detta API.

Skapa HTML-tabell – Lärresurser

Du kan lära dig mer om att skapa HTML-dokument med tabeller och utforska olika andra funktioner i biblioteket med hjälp av resurserna nedan:

Slutsats

I det här blogginlägget har vi lärt oss hur man skapar HTML-tabeller i C#. Vi har täckt grunderna för att skapa tabeller programmatiskt med Aspose.HTML för .NET. Genom att följa stegen och kodexemplen i den här artikeln kan du enkelt utveckla dina egna anpassade lösningar för att arbeta med HTML-tabeller. I händelse av oklarheter är du välkommen att kontakta oss på vårt gratis supportforum.

Se även