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.

Image

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é