Tabele HTML to wszechstronny i wydajny sposób wyświetlania danych na stronach internetowych. Można ich używać do tworzenia prostych tabel, takich jak kalendarz, lub bardziej złożonych tabel, takich jak siatka danych. W tym wpisie na blogu dowiemy się krok po kroku jak utworzyć tabelę HTML w języku C#. Ten przewodnik zapewni Ci wiedzę i umiejętności potrzebne do skutecznego tworzenia tabel HTML w języku C#.
W tym artykule omówiono następujące tematy:
- C# API do tworzenia tabel HTML
- Utwórz tabelę HTML w języku C#
- Utwórz tabelę HTML z atrybutem stylu w języku C#
- Tabela HTML z rozpiętością wierszy i zakresem kolumn w języku C#
- Generator tabel HTML online
- Darmowe zasoby edukacyjne
API C# do tworzenia tabeli HTML
Będziemy używać Aspose.HTML for .NET do tworzenia tabel HTML w C#. Pozwala programistom programowo manipulować dokumentami HTML i pracować z nimi. Zapewnia szeroką gamę funkcji i możliwości analizowania, konwertowania, edytowania i renderowania dokumentów HTML w aplikacjach .NET.
Proszę pobierz bibliotekę DLL interfejsu API lub zainstaluj ją za pomocą NuGet.
PM> Install-Package Aspose.Html
Utwórz tabelę HTML w C#
Możemy utworzyć tabelę HTML, wykonując poniższe czynności:
- Utwórz instancję klasy HTMLDocument.
- Opcjonalnie utwórz element stylu i dołącz go do elementu head.
- Utwórz
<table>
,<tbody>
,<tr>
,<th>
i<td>
elementy przy użyciu metody CreateElement(). - Dołącz elementy podrzędne do elementów nadrzędnych za pomocą metody AppendChild().
- Następnie dołącz
<table>
element do<body>
element. - Na koniec wywołaj metodę Save(), aby zapisać dokument w podanej ścieżce pliku.
Poniższy przykładowy kod pokazuje, jak utworzyć tabelę HTML w języku C#.
// Przygotuj ścieżkę do zapisania edytowanego pliku
string savePath = "C:\\Files\\Table.html";
// Zainicjuj pusty dokument HTML
var document = new HTMLDocument();
// Utwórz element stylu i przypisz wartości koloru obramowania i koloru obramowania dla elementu tabeli
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";
// Znajdź element nagłówka dokumentu i dołącz do nagłówka element stylu
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Zadeklaruj zmienną treść, która odwołuje się do<body> element
var body = document.Body;
// Określ kolumny i wiersze
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;
// Utwórz element tabeli
var table = document.CreateElement("table");
// Utwórz treść tabeli
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Utwórz wiersz nagłówka tabeli
if (isFirstRowHeader)
{
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Utwórz kolumny nagłówka tabeli
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++)
{
// Utwórz wiersz tabeli
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Utwórz komórki nagłówka tabeli
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++)
{
// Utwórz wiersz tabeli
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Utwórz komórki tabeli
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);
}
}
}
// Dołącz tabelę do treści
body.AppendChild(table);
// Zapisz dokument do pliku
document.Save(savePath);
Utwórz tabelę HTML z atrybutem stylu w C#
Możemy utworzyć tabelę HTML, wykonując kroki wymienione wcześniej. Musimy jednak ustawić <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.
Poniższy przykładowy kod pokazuje, jak utworzyć tabelę HTML z atrybutami stylu w języku C#.
// Przygotuj ścieżkę do zapisania edytowanego pliku
string savePath = "C:\\Files\\TableWithStyle.html";
// Zainicjuj pusty dokument HTML
using var document = new HTMLDocument();
// Utwórz element stylu i przypisz wartości koloru obramowania i koloru obramowania dla elementu tabeli
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";
// Znajdź element nagłówka dokumentu i dołącz do nagłówka element stylu
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Zadeklaruj zmienną treść, która odwołuje się do<body> element
var body = document.Body;
// Utwórz element tabeli
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");
// Utwórz treść tabeli
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Utwórz wiersz nagłówka tabeli
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Ustaw atrybut stylu z właściwościami dla wybranego elementu
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");
// Utwórz komórkę nagłówka tabeli 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);
// Utwórz komórkę nagłówka tabeli 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);
// Utwórz komórkę nagłówka tabeli 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);
// Utwórz wiersz danych tabeli
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Utwórz komórkę danych tabeli 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);
// Utwórz komórkę danych tabeli 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);
// Utwórz komórkę danych tabeli 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);
// Dołącz tabelę do treści
body.AppendChild(table);
// Zapisz dokument do pliku
document.Save(savePath);
Utwórz tabelę HTML za pomocą Rowspan i Colspan w C#
Podobnie możemy również ustawić <colspan>
i <rowspan>
atrybuty komórek tabeli przy użyciu metody SetAttribute(string name, string value), jak pokazano poniżej:
// Przygotuj ścieżkę do zapisania edytowanego pliku
string savePath = "C:\\Files\\ColSpanRowSpan.html";
// Zainicjuj pusty dokument HTML
using var document = new HTMLDocument();
// Utwórz element stylu i przypisz wartości koloru obramowania i koloru obramowania dla elementu tabeli
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";
// Znajdź element nagłówka dokumentu i dołącz do nagłówka element stylu
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Zadeklaruj zmienną treść, która odwołuje się do<body> element
var body = document.Body;
// Utwórz element tabeli
var table = document.CreateElement("table");
// Utwórz treść tabeli
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Utwórz wiersz nagłówka tabeli
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Utwórz komórkę nagłówka tabeli 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);
// Określ Colspana
th.SetAttribute("colspan", "2");
// Utwórz wiersz danych tabeli
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Utwórz komórkę nagłówka tabeli 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);
// Utwórz komórkę danych tabeli 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);
// Utwórz wiersz danych tabeli
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Utwórz komórkę nagłówka tabeli
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);
// Określ Colspana
th.SetAttribute("rowspan", "2");
// Utwórz komórkę danych tabeli
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);
// Utwórz wiersz danych tabeli
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Utwórz komórkę danych tabeli
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);
// Dołącz tabelę do treści
body.AppendChild(table);
// Zapisz dokument do pliku
document.Save(savePath);
Zdobądź bezpłatną licencję
Możesz uzyskać bezpłatną licencję tymczasową, aby wypróbować Aspose.HTML for .NET bez ograniczeń ewaluacyjnych.
Generator tabel HTML online
Możesz skorzystać z tej bezpłatnej aplikacji internetowej generator tabel HTML, która została opracowana przy użyciu tego interfejsu API.
Utwórz tabelę HTML – zasoby edukacyjne
Możesz dowiedzieć się więcej o tworzeniu dokumentów HTML z tabelami i poznać różne inne funkcje biblioteki, korzystając z poniższych zasobów:
- Przewodnik dewelopera
- Darmowe aplikacje internetowe
- Odniesienie do API
- Poradniki i artykuły z instrukcjami
Wniosek
W tym poście na blogu nauczyliśmy się tworzyć tabele HTML w języku C#. Omówiliśmy podstawy programowego tworzenia tabel przy użyciu Aspose.HTML for .NET. Postępując zgodnie z krokami i przykładami kodu przedstawionymi w tym artykule, możesz łatwo opracować własne, dostosowane do potrzeb rozwiązania do pracy z tabelami HTML. W przypadku jakichkolwiek niejasności prosimy o kontakt na naszym bezpłatne forum pomocy technicznej.