Erstellen Sie eine HTML-Tabelle in C#

HTML-Tabellen sind eine vielseitige und leistungsstarke Möglichkeit, Daten auf Webseiten anzuzeigen. Sie können zum Erstellen einfacher Tabellen, beispielsweise eines Kalenders, oder komplexerer Tabellen, beispielsweise eines Datenrasters, verwendet werden. In diesem Blogbeitrag erfahren Sie Schritt für Schritt, wie Sie eine HTML-Tabelle in C# erstellen. Dieser Leitfaden vermittelt Ihnen die Kenntnisse und Fähigkeiten, die Sie zum effektiven Erstellen von HTML-Tabellen in C# benötigen.

Dieser Artikel behandelt die folgenden Themen:

  1. C# API zum Erstellen von HTML-Tabellen
  2. Erstellen Sie eine HTML-Tabelle in C#
  3. Erstellen Sie eine HTML-Tabelle mit dem Stilattribut in C#
  4. HTML-Tabelle mit Rowspan und Colspan in C#
  5. Online-HTML-Tabellengenerator
  6. Kostenlose Lernressourcen

C# API zum Erstellen einer HTML-Tabelle

Wir werden Aspose.HTML for .NET zum Erstellen von HTML-Tabellen in C# verwenden. Es ermöglicht Entwicklern, HTML Dokumente programmgesteuert zu bearbeiten und damit zu arbeiten. Es bietet eine breite Palette von Funktionen und Möglichkeiten zum Parsen, Konvertieren, Bearbeiten und Rendern von HTML Dokumenten in .NET-Anwendungen.

Bitte laden Sie die DLL der API herunter oder installieren Sie sie mit NuGet.

PM> Install-Package Aspose.Html

Erstellen Sie eine HTML-Tabelle in C#

Wir können eine HTML-Tabelle erstellen, indem wir die folgenden Schritte ausführen:

  1. Erstellen Sie eine Instanz der HTMLDocument Klasse.
  2. Erstellen Sie optional ein Stilelement und hängen Sie es an das Kopfelement an.
  3. Erstellen Sie <table>, <tbody>, <tr>, <th>, und <td> Elemente mit der Methode CreateElement().
  4. Hängen Sie untergeordnete Elemente mit der AppendChild()-Methode an ihre übergeordneten Elemente an.
  5. Hängen Sie danach das an<table>-Element zum <body> Element.
  6. Rufen Sie abschließend die Methode Save() auf, um das Dokument im angegebenen Dateipfad zu speichern.

Das folgende Codebeispiel zeigt, wie Sie eine HTML-Tabelle in C# erstellen.

// Bereiten Sie einen Pfad zum Speichern bearbeiteter Dateien vor 
string savePath = "C:\\Files\\Table.html";

// Initialisieren Sie ein leeres HTML Dokument
var document = new HTMLDocument();

// Erstellen Sie ein Stilelement und weisen Sie dem Tabellenelement die Farbwerte „border-style“ und „border-color“ zu
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";

// Suchen Sie das Kopfelement des Dokuments und hängen Sie das Stilelement an den Kopf an
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarieren Sie einen Variablenkörper, der auf verweist<body> Element
var body = document.Body;

// Geben Sie Spalten und Zeilen an
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;

// Tabellenelement erstellen
var table = document.CreateElement("table");

// Erstellen Sie einen Tabellenkörper
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Erstellen Sie eine Tabellenkopfzeile 
if (isFirstRowHeader)
{
    var tr = document.CreateElement("tr");
    tbody.AppendChild(tr);

    // Erstellen Sie Tabellenkopfspalten 
   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++)
    {
        // Erstellen Sie eine Tabellenzeile 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Erstellen Sie Tabellenkopfzellen
       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++)
    {
        // Erstellen Sie eine Tabellenzeile 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Erstellen Sie Tabellenzellen
       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);
        }
    }
}

// Tabelle an Textkörper anhängen
body.AppendChild(table);

// Speichern Sie das Dokument in einer Datei
document.Save(savePath);
Erstellen Sie eine HTML-Tabelle in C#

Erstellen Sie eine HTML-Tabelle in C#

Erstellen Sie eine HTML-Tabelle mit Style-Attribut in C#

Wir können eine HTML-Tabelle erstellen, indem wir die zuvor genannten Schritte ausführen. Allerdings müssen wir das festlegen <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.

Das folgende Codebeispiel zeigt, wie Sie eine HTML-Tabelle mit Stilattributen in C# erstellen.

// Bereiten Sie einen Pfad zum Speichern bearbeiteter Dateien vor 
string savePath = "C:\\Files\\TableWithStyle.html";

// Initialisieren Sie ein leeres HTML Dokument
using var document = new HTMLDocument();

// Erstellen Sie ein Stilelement und weisen Sie dem Tabellenelement die Farbwerte „border-style“ und „border-color“ zu
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Suchen Sie das Kopfelement des Dokuments und hängen Sie das Stilelement an den Kopf an
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarieren Sie einen Variablenkörper, der auf verweist<body> Element
var body = document.Body;

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

// Tabellenkörper erstellen
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Tabellenkopfzeile erstellen 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Legen Sie das Stilattribut mit Eigenschaften für das ausgewählte Element fest               
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");

// Erstellen Sie die Tabellenkopfzelle 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);

// Erstellen Sie Tabellenkopfzelle 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);

// Erstellen Sie Tabellenkopfzelle 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);

// Erstellen Sie eine Tabellendatenzeile 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Erstellen Sie Tabellendatenzelle 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

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

// Erstellen Sie Tabellendatenzelle 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Tabelle an Textkörper anhängen
body.AppendChild(table);

// Speichern Sie das Dokument in einer Datei
document.Save(savePath);
Erstellen Sie eine HTML-Tabelle in C#

Erstellen Sie eine HTML-Tabelle in C#

Erstellen Sie eine HTML-Tabelle mit Rowspan und Colspan in C#

Ebenso können wir auch setzen <colspan> und <rowspan> Attribute für Tabellenzellen mithilfe der SetAttribute(String-Name, String-Wert)-Methode, wie unten gezeigt:

// Bereiten Sie einen Pfad zum Speichern bearbeiteter Dateien vor 
string savePath = "C:\\Files\\ColSpanRowSpan.html";

// Initialisieren Sie ein leeres HTML Dokument
using var document = new HTMLDocument();

// Erstellen Sie ein Stilelement und weisen Sie dem Tabellenelement die Farbwerte „border-style“ und „border-color“ zu
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Suchen Sie das Kopfelement des Dokuments und hängen Sie das Stilelement an den Kopf an
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarieren Sie einen Variablenkörper, der auf verweist<body> Element
var body = document.Body;

// Tabellenelement erstellen
var table = document.CreateElement("table");

// Tabellenkörper erstellen
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Tabellenkopfzeile erstellen 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Erstellen Sie die Tabellenkopfzelle 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);

// Geben Sie Colspan an
th.SetAttribute("colspan", "2");

// Erstellen Sie eine Tabellendatenzeile 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Erstellen Sie die Tabellenkopfzelle 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);

// Erstellen Sie Tabellendatenzelle 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Erstellen Sie eine Tabellendatenzeile 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Erstellen Sie eine Tabellenkopfzelle
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);

// Geben Sie Colspan an
th.SetAttribute("rowspan", "2");

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

// Erstellen Sie eine Tabellendatenzeile 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

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

// Tabelle an Textkörper anhängen
body.AppendChild(table);

// Speichern Sie das Dokument in einer Datei
document.Save(savePath);
Erstellen Sie eine HTML-Tabelle mit Rowspan und Colspan in C#

Erstellen Sie eine HTML-Tabelle mit Rowspan und Colspan in C#

Holen Sie sich eine kostenlose Lizenz

Sie können eine kostenlose temporäre Lizenz erwerben, um Aspose.HTML for .NET ohne Evaluierungseinschränkungen auszuprobieren.

Online-HTML-Tabellengenerator

Sie können diese kostenlose Online-Web-App HTML-Tabellengenerator verwenden, die mit dieser API entwickelt wurde.

HTML-Tabelle erstellen – Lernressourcen

Mithilfe der folgenden Ressourcen können Sie mehr über das Erstellen von HTML Dokumenten mit Tabellen erfahren und verschiedene andere Funktionen der Bibliothek erkunden:

Abschluss

In diesem Blogbeitrag haben wir gelernt, wie man HTML-Tabellen in C# erstellt. Wir haben die Grundlagen der programmgesteuerten Erstellung von Tabellen mit Aspose.HTML for .NET behandelt. Indem Sie die in diesem Artikel bereitgestellten Schritte und Codebeispiele befolgen, können Sie ganz einfach Ihre eigenen benutzerdefinierten Lösungen für die Arbeit mit HTML-Tabellen entwickeln. Bei Unklarheiten können Sie uns gerne über unser kostenloses Support-Forum kontaktieren.

Siehe auch