C# で HTML テーブルを作成する

HTML テーブルは、Web ページ上にデータを表示する多用途かつ強力な方法です。これらを使用して、カレンダーなどの単純なテーブル、またはデータ グリッドなどのより複雑なテーブルを作成できます。このブログ投稿では、C# で HTML テーブルを作成する方法を段階的に学習します。このガイドでは、C# で HTML テーブルを効果的に作成するために必要な知識とスキルを提供します。

この記事では次のトピックについて説明します。

  1. HTML テーブルを作成するための C# API
  2. C# で HTML テーブルを作成する
  3. C#でstyle属性を持ったHTMLテーブルを作成する
  4. C# の行スパンとコルスパンを含む HTML テーブル
  5. オンライン HTML テーブル ジェネレーター
  6. 無料の学習リソース

HTML テーブルを作成するための C# API

C# で HTML テーブルを作成するには、Aspose.HTML for .NET を使用します。これにより、開発者は HTML ドキュメントをプログラムで操作および操作できるようになります。 .NET アプリケーション内で HTML ドキュメントを解析、変換、編集、レンダリングするための幅広い機能を提供します。

API の DLL をダウンロードするか、NuGetを使用してインストールしてください。

PM> Install-Package Aspose.Html

C# で HTML テーブルを作成する

以下の手順に従って HTML テーブルを作成できます。

  1. HTMLDocument クラスのインスタンスを作成します。
  2. 必要に応じて、style 要素を作成し、head 要素に追加します。
  3. を作成する <table>、<tbody> 、<tr> 、<th> 、および<td> CreateElement() メソッドを使用して要素を作成します。
  4. AppendChild() メソッドを使用して、子要素を親要素に追加します。
  5. その後、を追加します <table> 要素から <body> 要素。
  6. 最後に、Save() メソッドを呼び出して、指定されたファイル パスにドキュメントを保存します。

次のコード サンプルは、C# で HTML テーブルを作成する方法を示しています。

// 編集したファイルを保存するパスを用意する 
string savePath = "C:\\Files\\Table.html";

// 空の HTML ドキュメントを初期化する
var document = new HTMLDocument();

// style 要素を作成し、table 要素に色の border-style と border-color の値を割り当てます。
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";

// ドキュメントの head 要素を見つけて、style 要素を head に追加します。
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);
C# で HTML テーブルを作成する

C# で HTML テーブルを作成する

C# でスタイル属性を使用して HTML テーブルを作成する

前述の手順に従って 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.

次のコード サンプルは、C# でスタイル属性を持つ HTML テーブルを作成する方法を示しています。

// 編集したファイルを保存するパスを用意する 
string savePath = "C:\\Files\\TableWithStyle.html";

// 空の HTML ドキュメントを初期化する
using var document = new HTMLDocument();

// style 要素を作成し、table 要素に色の border-style と border-color の値を割り当てます。
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// ドキュメントの head 要素を見つけて、style 要素を head に追加します。
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);
C# で HTML テーブルを作成する

C# で HTML テーブルを作成する

C# で Rowspan と Colspan を使用して HTML テーブルを作成する

同様に、を設定することもできます <colspan> と <rowspan> 以下に示すように、SetAttribute(string name, string value) メソッドを使用してテーブル セルの属性を設定します。

// 編集したファイルを保存するパスを用意する 
string savePath = "C:\\Files\\ColSpanRowSpan.html";

// 空の HTML ドキュメントを初期化する
using var document = new HTMLDocument();

// style 要素を作成し、table 要素に色の border-style と border-color の値を割り当てます。
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// ドキュメントの head 要素を見つけて、style 要素を head に追加します。
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);

// コルスパンの指定
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);

// コルスパンの指定
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);
C# で Rowspan と Colspan を使用して HTML テーブルを作成する

C# で Rowspan と Colspan を使用して HTML テーブルを作成する

無料ライセンスを取得する

無料の一時ライセンスを取得して、評価制限なしで Aspose.HTML for .NET を試すことができます。

オンライン HTML テーブル ジェネレーター

この API を使用して開発された、この無料のオンライン HTML テーブル ジェネレーター Web アプリを使用できます。

HTML テーブルの作成 – 学習リソース

以下のリソースを使用して、テーブルを含む HTML ドキュメントの作成について詳しく学び、ライブラリのその他のさまざまな機能を調べることができます。

結論

このブログ投稿では、C# で HTML テーブルを作成する方法を学習しました。 Aspose.HTML for .NET を使用してプログラムでテーブルを作成する基本について説明しました。この記事で説明されている手順とコード サンプルに従うことで、HTML テーブルを操作するための独自のカスタマイズされたソリューションを簡単に開発できます。不明な点がある場合は、無料サポート フォーラムまでお気軽にお問い合わせください。

関連項目