Créer un tableau HTML en C#

Les tableaux HTML constituent un moyen polyvalent et puissant d’afficher des données sur des pages Web. Ils peuvent être utilisés pour créer des tableaux simples, comme un calendrier, ou des tableaux plus complexes, comme une grille de données. Dans cet article de blog, nous apprendrons comment créer un tableau HTML en C#, étape par étape. Ce guide vous fournira les connaissances et les compétences dont vous avez besoin pour créer efficacement des tableaux HTML en C#.

Cet article couvre les sujets suivants :

  1. API C# pour créer des tableaux HTML
  2. Créer un tableau HTML en C#
  3. Créer un tableau HTML avec l’attribut style en C#
  4. Tableau HTML avec rowspan et colspan en C#
  5. Générateur de tableaux HTML en ligne
  6. Ressources d’apprentissage gratuites

API C# pour créer un tableau HTML

Nous utiliserons Aspose.HTML for .NET pour créer des tableaux HTML en C#. Il permet aux développeurs de manipuler et de travailler avec des documents HTML par programmation. Il offre un large éventail de fonctionnalités et de capacités pour l’analyse, la conversion, l’édition et le rendu de documents HTML dans les applications .NET.

Veuillez soit télécharger la DLL de l’API, soit l’installer à l’aide de NuGet.

PM> Install-Package Aspose.Html

Créer un tableau HTML en C#

Nous pouvons créer un tableau HTML en suivant les étapes ci-dessous :

  1. Créez une instance de la classe HTMLDocument.
  2. Vous pouvez éventuellement créer un élément de style et l’ajouter à l’élément head.
  3. Créer <table>, <tbody>, <tr>, <th>, et <td> en utilisant la méthode CreateElement().
  4. Ajoutez des éléments enfants à leurs éléments parents à l’aide de la méthode AppendChild().
  5. Après cela, ajoutez le <table> élément au <body> élément.
  6. Enfin, appelez la méthode Save() pour enregistrer le document au chemin de fichier indiqué.

L’exemple de code suivant montre comment créer un tableau HTML en C#.

// Préparer un chemin pour l'enregistrement du fichier modifié 
string savePath = "C:\\Files\\Table.html";

// Initialiser un document HTML vide
var document = new HTMLDocument();

// Créez un élément de style et attribuez les valeurs de couleur border-style et border-color à l'élément de tableau.
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";

// Recherchez l'élément d'en-tête du document et ajoutez l'élément de style à l'en-tête.
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Déclarez un corps de variable qui fait référence au<body> élément
var body = document.Body;

// Spécifier les colonnes et les lignes
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;

// Créer un élément de tableau
var table = document.CreateElement("table");

// Créer un corps de tableau
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Créer une ligne d'en-tête de tableau 
if (isFirstRowHeader)
{
    var tr = document.CreateElement("tr");
    tbody.AppendChild(tr);

    // Créer des colonnes d'en-tête de tableau 
   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++)
    {
        // Créer une ligne de tableau 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Créer des cellules d'en-tête de tableau
       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++)
    {
        // Créer une ligne de tableau 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Créer des cellules de tableau
       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);
        }
    }
}

// Ajouter le tableau au corps
body.AppendChild(table);

// Enregistrez le document dans un fichier
document.Save(savePath);
Créer un tableau HTML en C#

Créer un tableau HTML en C#

Créer un tableau HTML avec un attribut de style en C#

Nous pouvons créer un tableau HTML en suivant les étapes mentionnées précédemment. Cependant, nous devons définir le <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.

L’exemple de code suivant montre comment créer un tableau HTML avec des attributs de style en C#.

// Préparer un chemin pour l'enregistrement du fichier modifié 
string savePath = "C:\\Files\\TableWithStyle.html";

// Initialiser un document HTML vide
using var document = new HTMLDocument();

// Créez un élément de style et attribuez les valeurs de couleur border-style et border-color à l'élément de tableau.
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Recherchez l'élément d'en-tête du document et ajoutez l'élément de style à l'en-tête.
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Déclarez un corps de variable qui fait référence au<body> élément
var body = document.Body;

// Créer un élément de tableau
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");

// Créer un corps de tableau
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Créer une ligne d'en-tête de tableau 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Définir l'attribut de style avec les propriétés de l'élément sélectionné               
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");

// Créer la cellule d'en-tête de tableau 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);

// Créer la cellule 2 d'en-tête de tableau
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);

// Créer la cellule 3 d'en-tête de tableau
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);

// Créer une ligne de données de table 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Créer la cellule de données du tableau 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Créer la cellule de données du tableau 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);

// Créer la cellule de données du tableau 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Ajouter le tableau au corps
body.AppendChild(table);

// Enregistrez le document dans un fichier
document.Save(savePath);
Créer un tableau HTML en C#

Créer un tableau HTML en C#

Créer un tableau HTML avec Rowspan et Colspan en C#

De même, nous pouvons également définir <colspan> et <rowspan> pour les cellules du tableau à l’aide de la méthode SetAttribute(string name, string value), comme indiqué ci-dessous :

// Préparer un chemin pour l'enregistrement du fichier modifié 
string savePath = "C:\\Files\\ColSpanRowSpan.html";

// Initialiser un document HTML vide
using var document = new HTMLDocument();

// Créez un élément de style et attribuez les valeurs de couleur border-style et border-color à l'élément de tableau.
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Recherchez l'élément d'en-tête du document et ajoutez l'élément de style à l'en-tête.
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Déclarez un corps de variable qui fait référence au<body> élément
var body = document.Body;

// Créer un élément de tableau
var table = document.CreateElement("table");

// Créer un corps de tableau
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Créer une ligne d'en-tête de tableau 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Créer la cellule d'en-tête de tableau 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);

// Spécifier Colspan
th.SetAttribute("colspan", "2");

// Créer une ligne de données de table 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Créer la cellule d'en-tête de tableau 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);

// Créer la cellule de données du tableau 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Créer une ligne de données de table 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Créer une cellule d'en-tête de tableau
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);

// Spécifier Colspan
th.SetAttribute("rowspan", "2");

// Créer une cellule de données de tableau
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);

// Créer une ligne de données de table 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Créer une cellule de données de tableau
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Ajouter le tableau au corps
body.AppendChild(table);

// Enregistrez le document dans un fichier
document.Save(savePath);
Créer un tableau HTML avec Rowspan et Colspan en C#

Créer un tableau HTML avec Rowspan et Colspan en C#

Obtenez une licence gratuite

Vous pouvez obtenir une licence temporaire gratuite pour essayer Aspose.HTML for .NET sans limitations d’évaluation.

Générateur de tableaux HTML en ligne

Vous pouvez utiliser cette application Web gratuite en ligne Générateur de table HTML, développée à l’aide de cette API.

Créer un tableau HTML – Ressources d’apprentissage

Vous pouvez en savoir plus sur la création de documents HTML avec des tableaux et explorer diverses autres fonctionnalités de la bibliothèque en utilisant les ressources ci-dessous :

Conclusion

Dans cet article de blog, nous avons appris à créer des tableaux HTML en C#. Nous avons couvert les bases de la création de tables par programmation à l’aide d’Aspose.HTML for .NET. En suivant les étapes et les exemples de code fournis dans cet article, vous pouvez facilement développer vos propres solutions personnalisées pour travailler avec des tableaux HTML. En cas d’ambiguïté, n’hésitez pas à nous contacter sur notre forum d’assistance gratuit.

Voir également