Buat Tabel HTML di C#

Tabel HTML adalah cara serbaguna dan ampuh untuk menampilkan data di halaman web. Mereka dapat digunakan untuk membuat tabel sederhana, seperti kalender, atau tabel yang lebih kompleks, seperti kisi data. Dalam postingan blog ini, kita akan mempelajari cara membuat tabel HTML di C#, langkah demi langkah. Panduan ini akan memberi Anda pengetahuan dan keterampilan yang Anda perlukan untuk membuat tabel HTML di C# secara efektif.

Artikel ini mencakup topik-topik berikut:

  1. C# API untuk membuat tabel HTML
  2. Buat tabel HTML di C#
  3. Buat tabel HTML dengan atribut style di C#
  4. Tabel HTML dengan rowpan dan colspan di C#
  5. Pembuat tabel HTML online
  6. Sumber belajar gratis

C# API untuk Membuat Tabel HTML

Kami akan menggunakan Aspose.HTML for .NET untuk membuat tabel HTML di C#. Hal ini memungkinkan pengembang untuk memanipulasi dan bekerja dengan dokumen HTML secara terprogram. Ini menyediakan berbagai fitur dan kemampuan untuk parsing, mengkonversi, mengedit, dan merender dokumen HTML dalam aplikasi .NET.

Silakan unduh DLL API atau instal menggunakan NuGet.

PM> Install-Package Aspose.Html

Buat Tabel HTML di C#

Kita dapat membuat tabel HTML dengan mengikuti langkah-langkah di bawah ini:

  1. Buat sebuah instance dari kelas HTMLDocument.
  2. Secara opsional, buat elemen gaya dan tambahkan ke elemen head.
  3. Buat <table>, <tbody>, <tr>, <th>, dan <td> elemen menggunakan metode CreateElement().
  4. Tambahkan elemen anak ke elemen induknya menggunakan metode AppendChild().
  5. Setelah itu, tambahkan <table> elemen ke <body> elemen.
  6. Terakhir, panggil metode Save() untuk menyimpan dokumen di jalur file yang diberikan.

Contoh kode berikut menunjukkan cara membuat tabel HTML di C#.

// Siapkan jalur untuk menyimpan file yang diedit 
string savePath = "C:\\Files\\Table.html";

// Inisialisasi dokumen HTML kosong
var document = new HTMLDocument();

// Buat elemen gaya dan tetapkan nilai warna gaya batas dan warna batas untuk elemen tabel
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; }";

// Temukan elemen kepala dokumen dan tambahkan elemen gaya ke kepala
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarasikan badan variabel yang mereferensikan<body> elemen
var body = document.Body;

// Tentukan kolom dan baris
var cols = 3;
var rows = 2;
var isFirstRowHeader = false;

// Buat elemen tabel
var table = document.CreateElement("table");

// Buat badan tabel
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Buat baris header tabel 
if (isFirstRowHeader)
{
    var tr = document.CreateElement("tr");
    tbody.AppendChild(tr);

    // Buat kolom header tabel 
   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++)
    {
        // Buat baris tabel 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Buat sel header tabel
       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++)
    {
        // Buat baris tabel 
        var dataTr = document.CreateElement("tr");
        tbody.AppendChild(dataTr);

        // Buat sel tabel
       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);
        }
    }
}

// Tambahkan tabel ke badan
body.AppendChild(table);

// Simpan dokumen ke file
document.Save(savePath);
Buat Tabel HTML di C#

Buat Tabel HTML di C#

Buat Tabel HTML Dengan Atribut Style di C#

Kita dapat membuat tabel HTML dengan mengikuti langkah-langkah yang disebutkan sebelumnya. Namun, kita perlu mengatur <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.

Contoh kode berikut menunjukkan cara membuat tabel HTML dengan atribut style di C#.

// Siapkan jalur untuk menyimpan file yang diedit 
string savePath = "C:\\Files\\TableWithStyle.html";

// Inisialisasi dokumen HTML kosong
using var document = new HTMLDocument();

// Buat elemen gaya dan tetapkan nilai warna gaya batas dan warna batas untuk elemen tabel
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Temukan elemen kepala dokumen dan tambahkan elemen gaya ke kepala
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarasikan badan variabel yang mereferensikan<body> elemen
var body = document.Body;

// Buat elemen tabel
var table = document.CreateElement("table");
table.SetAttribute("style", "background-color:#00FF00;");

// Buat badan tabel
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Buat baris header tabel 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Tetapkan atribut gaya dengan properti untuk elemen yang dipilih               
tr.SetAttribute("style", "border: 2px Black solid; background-color:Red; color:#FFFFFF");

// Buat sel header tabel 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Name");
th.AppendChild(title);
tr.AppendChild(th);

// Buat sel header tabel 2
th = document.CreateElement("th");
title = document.CreateTextNode("Email");
th.AppendChild(title);
tr.AppendChild(th);

// Membuat sel header tabel 3
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
tr.AppendChild(th);

// Buat baris data tabel 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Buat sel data tabel 1
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Buat sel data tabel 2
td = document.CreateElement("td");
data = document.CreateTextNode("john.doe@example.com");
td.AppendChild(data);
dataTr.AppendChild(td);

// Buat sel data tabel 3
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Tambahkan tabel ke badan
body.AppendChild(table);

// Simpan dokumen ke file
document.Save(savePath);
Buat Tabel HTML di C#

Buat Tabel HTML di C#

Buat Tabel HTML dengan Rowspan dan Colspan di C#

Demikian pula, kita juga dapat mengatur <colspan> dan <rowspan> atribut untuk sel tabel menggunakan metode SetAttribute(string name, string value), seperti yang ditunjukkan di bawah ini:

// Siapkan jalur untuk menyimpan file yang diedit 
string savePath = "C:\\Files\\ColSpanRowSpan.html";

// Inisialisasi dokumen HTML kosong
using var document = new HTMLDocument();

// Buat elemen gaya dan tetapkan nilai warna gaya batas dan warna batas untuk elemen tabel
var style = document.CreateElement("style");
style.TextContent = "table, th, td { border: 1px solid #0000ff; border-collapse: collapse;}";

// Temukan elemen kepala dokumen dan tambahkan elemen gaya ke kepala
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Deklarasikan badan variabel yang mereferensikan<body> elemen
var body = document.Body;

// Buat elemen tabel
var table = document.CreateElement("table");

// Buat badan tabel
var tbody = document.CreateElement("tbody");
table.AppendChild(tbody);

// Buat baris header tabel 
var tr = document.CreateElement("tr");
tbody.AppendChild(tr);

// Buat sel header tabel 1
var th = document.CreateElement("th");
var title = document.CreateTextNode("Person Details");
th.AppendChild(title);
tr.AppendChild(th);

// Tentukan Colspan
th.SetAttribute("colspan", "2");

// Buat baris data tabel 
var dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Buat sel header tabel 1
th = document.CreateElement("th");
title = document.CreateTextNode("Name");
th.AppendChild(title);
dataTr.AppendChild(th);

// Buat sel data tabel 2
var td = document.CreateElement("td");
var data = document.CreateTextNode("John Doe");
td.AppendChild(data);
dataTr.AppendChild(td);

// Buat baris data tabel 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Buat sel header tabel
th = document.CreateElement("th");
title = document.CreateTextNode("Phone");
th.AppendChild(title);
dataTr.AppendChild(th);

// Tentukan Colspan
th.SetAttribute("rowspan", "2");

// Buat sel data tabel
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-780");
td.AppendChild(data);
dataTr.AppendChild(td);

// Buat baris data tabel 
dataTr = document.CreateElement("tr");
tbody.AppendChild(dataTr);

// Buat sel data tabel
td = document.CreateElement("td");
data = document.CreateTextNode("123-456-789");
td.AppendChild(data);
dataTr.AppendChild(td);

// Tambahkan tabel ke badan
body.AppendChild(table);

// Simpan dokumen ke file
document.Save(savePath);
Buat Tabel HTML dengan Rowspan dan Colspan di C#

Buat Tabel HTML dengan Rowspan dan Colspan di C#

Dapatkan Lisensi Gratis

Anda bisa mendapatkan lisensi sementara gratis untuk mencoba Aspose.HTML for .NET tanpa batasan evaluasi.

Generator Tabel HTML Online

Anda dapat menggunakan aplikasi web generator tabel HTML online gratis ini, yang dikembangkan menggunakan API ini.

Buat Tabel HTML – Sumber Belajar

Anda dapat mempelajari lebih lanjut tentang membuat dokumen HTML dengan tabel dan menjelajahi berbagai fitur perpustakaan lainnya menggunakan sumber daya di bawah:

Kesimpulan

Dalam postingan blog ini, kita telah mempelajari cara membuat tabel HTML di C#. Kami telah membahas dasar-dasar pembuatan tabel secara terprogram menggunakan Aspose.HTML for .NET. Dengan mengikuti langkah-langkah dan contoh kode yang disediakan dalam artikel ini, Anda dapat dengan mudah mengembangkan solusi khusus Anda sendiri untuk bekerja dengan tabel HTML. Jika ada ambiguitas, jangan ragu untuk menghubungi kami di forum dukungan gratis.

Lihat juga