Таблиці HTML – це універсальний і потужний спосіб відображення даних на веб-сторінках. Їх можна використовувати для створення простих таблиць, таких як календар, або більш складних таблиць, таких як сітка даних. У цій публікації блогу ми крок за кроком дізнаємося, як створити таблицю HTML у C#. Цей посібник надасть вам знання та навички, необхідні для ефективного створення таблиць HTML у C#.
Ця стаття охоплює такі теми:
- API C# для створення таблиць HTML
- Створіть таблицю HTML у C#
- Створіть HTML-таблицю з атрибутом style в C#
- HTML-таблиця з діапазоном рядків і стовпчиком у C#
- Онлайн-генератор таблиць HTML
- Безкоштовні навчальні ресурси
C# API для створення таблиці HTML
Ми будемо використовувати Aspose.HTML for .NET для створення таблиць HTML у C#. Це дозволяє розробникам маніпулювати та працювати з документами HTML програмно. Він надає широкий спектр функцій і можливостей для аналізу, перетворення, редагування та візуалізації HTML-документів у програмах .NET.
Завантажте DLL API або встановіть його за допомогою NuGet.
PM> Install-Package Aspose.Html
Створення таблиці HTML на C#
Ми можемо створити таблицю HTML, виконавши наведені нижче дії.
- Створіть екземпляр класу HTMLDocument.
- За бажанням створіть елемент стилю та додайте його до елемента голови.
- Створити
<table>,<tbody>,<tr>,<th>і<td>за допомогою методу CreateElement(). - Додайте дочірні елементи до їхніх батьківських елементів за допомогою методу AppendChild().
- Після цього додайте
<table>елемент до<body>елемент. - Нарешті, викличте метод Save(), щоб зберегти документ за вказаним шляхом до файлу.
У наведеному нижче прикладі коду показано, як створити таблицю HTML у C#.
// Підготуйте шлях для збереження відредагованого файлу
string savePath = "C:\\Files\\Table.html";
// Ініціалізуйте порожній документ HTML
var document = new HTMLDocument();
// Створіть елемент стилю та призначте значення стилю рамки кольору та кольору рамки для елемента таблиці
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";
// Знайдіть елемент заголовка документа та додайте до нього елемент стилю
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Оголошіть тіло змінної, яке посилається на<body> елемент
var body = document.Body;
// Укажіть стовпці та рядки
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;
// Створити елемент таблиці
var table = document.CreateElement("table");
// Створіть тіло таблиці
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Створіть рядок заголовка таблиці
if (isFirstRowHeader)
{
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Створення стовпців заголовків таблиці
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++)
{
// Створіть рядок таблиці
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Створення клітинок заголовка таблиці
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++)
{
// Створіть рядок таблиці
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Створення комірок таблиці
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);
}
}
}
// Додайте таблицю до тіла
body.AppendChild(table);
// Збережіть документ у файл
document.Save(savePath);
Створення таблиці HTML на C#
Створення HTML-таблиці з атрибутом стилю в C#
Ми можемо створити таблицю HTML, виконуючи кроки, згадані раніше. Однак нам потрібно встановити <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.
У наведеному нижче прикладі коду показано, як створити HTML-таблицю з атрибутами стилю в C#.
// Підготуйте шлях для збереження відредагованого файлу
string savePath = "C:\\Files\\TableWithStyle.html";
// Ініціалізуйте порожній документ HTML
using var document = new HTMLDocument();
// Створіть елемент стилю та призначте значення стилю рамки кольору та кольору рамки для елемента таблиці
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";
// Знайдіть елемент заголовка документа та додайте до нього елемент стилю
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Оголошіть тіло змінної, яке посилається на<body> елемент
var body = document.Body;
// Створити елемент таблиці
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");
// Створити тіло таблиці
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Створіть рядок заголовка таблиці
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Встановити атрибут стилю з властивостями для вибраного елемента
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");
// Створіть клітинку заголовка таблиці 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);
// Створіть клітинку заголовка таблиці 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);
// Створіть клітинку заголовка таблиці 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);
// Створити рядок даних таблиці
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Створіть клітинку даних таблиці 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);
// Створіть клітинку даних таблиці 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);
// Створіть клітинку даних таблиці 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);
// Додайте таблицю до тіла
body.AppendChild(table);
// Збережіть документ у файл
document.Save(savePath);
Створення таблиці HTML на C#
Створення HTML-таблиці з Rowspan і Colspan у C#
Подібним чином ми також можемо встановити <colspan> і <rowspan> для комірок таблиці за допомогою методу SetAttribute(string name, string value), як показано нижче:
// Підготуйте шлях для збереження відредагованого файлу
string savePath = "C:\\Files\\ColSpanRowSpan.html";
// Ініціалізуйте порожній документ HTML
using var document = new HTMLDocument();
// Створіть елемент стилю та призначте значення стилю рамки кольору та кольору рамки для елемента таблиці
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";
// Знайдіть елемент заголовка документа та додайте до нього елемент стилю
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);
// Оголошіть тіло змінної, яке посилається на<body> елемент
var body = document.Body;
// Створити елемент таблиці
var table = document.CreateElement("table");
// Створити тіло таблиці
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);
// Створіть рядок заголовка таблиці
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);
// Створіть клітинку заголовка таблиці 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);
// Вкажіть Colspan
th.SetAttribute("colspan", "2");
// Створити рядок даних таблиці
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Створіть клітинку заголовка таблиці 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);
// Створіть клітинку даних таблиці 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);
// Створити рядок даних таблиці
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Створити клітинку заголовка таблиці
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);
// Вкажіть Colspan
th.SetAttribute("rowspan", "2");
// Створення комірки даних таблиці
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);
// Створити рядок даних таблиці
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);
// Створення комірки даних таблиці
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);
// Додайте таблицю до тіла
body.AppendChild(table);
// Збережіть документ у файл
document.Save(savePath);
Створення HTML-таблиці з Rowspan і Colspan у C#
Отримайте безкоштовну ліцензію
Ви можете отримати безкоштовну тимчасову ліцензію, щоб спробувати Aspose.HTML for .NET без оціночних обмежень.
Онлайн-генератор таблиць HTML
Ви можете використовувати цю безкоштовну онлайн-програму генератор таблиць HTML, розроблену за допомогою цього API.
Створення таблиці HTML – навчальні ресурси
Ви можете дізнатися більше про створення HTML-документів із таблицями та дослідити різні інші функції бібліотеки, використовуючи ресурси нижче:
Висновок
У цій публікації блогу ми навчилися створювати таблиці HTML у C#. Ми розглянули основи програмного створення таблиць за допомогою Aspose.HTML for .NET. Дотримуючись кроків і зразків коду, наведених у цій статті, ви можете легко розробити власні індивідуальні рішення для роботи з таблицями HTML. У разі будь-якої неясності зв’яжіться з нами на нашому безкоштовний форум підтримки.