Vytvořte HTML tabulku v C#

HTML tabulky představují všestranný a výkonný způsob zobrazení dat na webových stránkách. Lze je použít k vytvoření jednoduchých tabulek, jako je kalendář, nebo složitějších tabulek, jako je datová mřížka. V tomto blogovém příspěvku se krok za krokem naučíme vytvořit HTML tabulku v C#. Tato příručka vám poskytne znalosti a dovednosti, které potřebujete k efektivnímu vytváření HTML tabulek v C#.

Tento článek se zabývá následujícími tématy:

  1. C# API pro vytváření HTML tabulek
  2. Vytvořte HTML tabulku v C#
  3. Vytvořte HTML tabulku s atributem style v C#
  4. HTML tabulka s rowspan a colspan v C#
  5. Online generátor HTML tabulek
  6. Bezplatné výukové zdroje

C# API pro vytvoření HTML tabulky

Pro tvorbu HTML tabulek v C# použijeme Aspose.HTML for .NET. Umožňuje vývojářům programově manipulovat a pracovat s dokumenty HTML. Poskytuje širokou škálu funkcí a možností pro analýzu, konverzi, úpravu a vykreslování HTML dokumentů v rámci aplikací .NET.

Prosím buď stáhněte si DLL rozhraní API, nebo jej nainstalujte pomocí NuGet.

PM> Install-Package Aspose.Html

Vytvořte HTML tabulku v C#

HTML tabulku můžeme vytvořit podle následujících kroků:

  1. Vytvořte instanci třídy HTMLDocument.
  2. Volitelně vytvořte prvek stylu a připojte jej k prvku head.
  3. Vytvořit <table> ,<tbody> ,<tr> ,<th> , a <td> prvky pomocí metody CreateElement().
  4. Přidejte podřízené prvky k jejich nadřazeným prvkům pomocí metody AppendChild().
  5. Poté připojte znak <table> prvek k <body> prvek.
  6. Nakonec zavolejte metodu Save() a uložte dokument do zadané cesty k souboru.

Následující ukázka kódu ukazuje, jak vytvořit tabulku HTML v C#.

// Připravte cestu pro uložení upraveného souboru 
string savePath = "C:\\Files\\Table.html";

// Inicializujte prázdný dokument HTML
var document = new HTMLDocument();

// Vytvořte prvek stylu a přiřaďte hodnoty color border-style a border-color pro prvek tabulky
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";

// Najděte prvek hlavičky dokumentu a přidejte prvek stylu k hlavičce
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarujte proměnnou, která odkazuje na<body> živel
var body = document.Body;

// Určete sloupce a řádky
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;

// Vytvořte prvek tabulky
var table = document.CreateElement("table");

// Vytvořte tělo tabulky
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Vytvořte řádek záhlaví tabulky 
if (isFirstRowHeader)
{
    var tr = document.CreateElement("tr");
    tbody.AppendChild(tr);

    // Vytvořte sloupce záhlaví tabulky 
   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++)
    {
        // Vytvořte řádek tabulky 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Vytvořte buňky záhlaví tabulky
       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++)
    {
        // Vytvořte řádek tabulky 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Vytvořte buňky tabulky
       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);
        }
    }
}

// Připojit tabulku k tělu
body.AppendChild(table);

// Uložte dokument do souboru
document.Save(savePath);
Vytvořte HTML tabulku v C#

Vytvořte HTML tabulku v C#

Vytvořte HTML tabulku s atributem Styl v C#

HTML tabulku můžeme vytvořit podle výše uvedených kroků. Musíme však nastavit <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.

Následující ukázka kódu ukazuje, jak vytvořit tabulku HTML s atributy stylu v C#.

// Připravte cestu pro uložení upraveného souboru 
string savePath = "C:\\Files\\TableWithStyle.html";

// Inicializujte prázdný dokument HTML
using var document = new HTMLDocument();

// Vytvořte prvek stylu a přiřaďte hodnoty color border-style a border-color pro prvek tabulky
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Najděte prvek hlavičky dokumentu a přidejte prvek stylu k hlavičce
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarujte proměnnou, která odkazuje na<body> živel
var body = document.Body;

// Vytvořte prvek tabulky
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");

// Vytvořte tělo tabulky
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Vytvořte řádek záhlaví tabulky 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Nastavte atribut stylu s vlastnostmi pro vybraný prvek               
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");

// Vytvořte buňku záhlaví tabulky 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);

// Vytvořte buňku záhlaví tabulky 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);

// Vytvořte buňku záhlaví tabulky 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);

// Vytvořit řádek dat tabulky 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Vytvořte datovou buňku tabulky 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Vytvořte datovou buňku tabulky 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);

// Vytvořte datovou buňku tabulky 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Připojit tabulku k tělu
body.AppendChild(table);

// Uložte dokument do souboru
document.Save(savePath);
Vytvořte HTML tabulku v C#

Vytvořte HTML tabulku v C#

Vytvořte HTML tabulku pomocí Rowspan a Colspan v C#

Podobně můžeme také nastavit <colspan> a <rowspan> atributy pro buňky tabulky pomocí metody SetAttribute(název řetězce, hodnota řetězce), jak je uvedeno níže:

// Připravte cestu pro uložení upraveného souboru 
string savePath = "C:\\Files\\ColSpanRowSpan.html";

// Inicializujte prázdný dokument HTML
using var document = new HTMLDocument();

// Vytvořte prvek stylu a přiřaďte hodnoty color border-style a border-color pro prvek tabulky
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Najděte prvek hlavičky dokumentu a přidejte prvek stylu k hlavičce
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarujte proměnnou, která odkazuje na<body> živel
var body = document.Body;

// Vytvořte prvek tabulky
var table = document.CreateElement("table");

// Vytvořte tělo tabulky
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Vytvořte řádek záhlaví tabulky 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Vytvořte buňku záhlaví tabulky 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);

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

// Vytvořit řádek dat tabulky 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Vytvořte buňku záhlaví tabulky 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);

// Vytvořte datovou buňku tabulky 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Vytvořit řádek dat tabulky 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Vytvořte buňku záhlaví tabulky
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);

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

// Vytvořte datovou buňku tabulky
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);

// Vytvořit řádek dat tabulky 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Vytvořte datovou buňku tabulky
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Připojit tabulku k tělu
body.AppendChild(table);

// Uložte dokument do souboru
document.Save(savePath);
Vytvořte HTML tabulku pomocí Rowspan a Colspan v C#

Vytvořte HTML tabulku pomocí Rowspan a Colspan v C#

Získejte bezplatnou licenci

Můžete získat bezplatnou dočasnou licenci a vyzkoušet Aspose.HTML for .NET bez omezení hodnocení.

Online generátor HTML tabulek

Můžete použít tuto bezplatnou online webovou aplikaci HTML table generator, která je vyvinuta pomocí tohoto API.

Vytvořte tabulku HTML – výukové materiály

Můžete se dozvědět více o vytváření HTML dokumentů s tabulkami a prozkoumat různé další funkce knihovny pomocí zdrojů níže:

Závěr

V tomto blogovém příspěvku jsme se naučili vytvářet HTML tabulky v C#. Probrali jsme základy vytváření tabulek programově pomocí Aspose.HTML for .NET. Podle kroků a ukázek kódu uvedených v tomto článku můžete snadno vyvinout vlastní přizpůsobená řešení pro práci s tabulkami HTML. V případě jakýchkoliv nejasností nás prosím neváhejte kontaktovat na našem bezplatné fórum podpory.

Viz také