ToolDeck

CSV থেকে HTML টেবিল

CSV থেকে HTML টেবিলে রূপান্তর করুন

একটি উদাহরণ চেষ্টা করুন

CSV ইনপুট

HTML আউটপুট

স্থানীয়ভাবে চলে · গোপন তথ্য পেস্ট করা নিরাপদ
HTML টেবিল এখানে দেখা যাবে…
প্রথম সারি শিরোনাম:

CSV থেকে HTML টেবিল রূপান্তর কী?

CSV থেকে HTML টেবিল রূপান্তর কমা-বিভাজিত মানগুলোকে কাঠামোবদ্ধ HTML মার্কআপে পরিণত করে, যা ব্রাউজার দৃশ্যমান টেবিল হিসেবে প্রদর্শন করতে পারে। আউটপুটে HTML Living Standard-এ সংজ্ঞায়িত মানক HTML টেবিল উপাদান ব্যবহৃত হয়: table, thead, tbody, tr, th, এবং td। এই প্রক্রিয়া প্রতিটি CSV সারিকে একটি tr উপাদানে এবং প্রতিটি ফিল্ডকে একটি td বা th কক্ষে রূপান্তরিত করে।

CSV ফাইল ডেটা সংরক্ষণ করে সাধারণ পাঠ্য হিসেবে, যেখানে সারিগুলো নতুন লাইন দ্বারা এবং ফিল্ডগুলো ডিলিমিটার (সাধারণত কমা) দ্বারা পৃথক করা হয়। CSV ডেটা সংরক্ষণ ও Excel, Google Sheets এবং ডেটাবেজের মতো অ্যাপ্লিকেশনের মধ্যে স্থানান্তরের জন্য উপযুক্ত হলেও এর কোনো উপস্থাপনা স্তর নেই। HTML টেবিল সেই স্তর যোগ করে ডেটাকে সিমান্টিক মার্কআপে মুড়ে দিয়ে, যা CSS দিয়ে স্টাইলিং, JavaScript দিয়ে বাছাই এবং scope ও aria-label-এর মতো অ্যাট্রিবিউটের মাধ্যমে অ্যাক্সেসিবিলিটি সমর্থন করে।

রূপান্তরকে RFC 4180-এ সংজ্ঞায়িত বেশ কিছু প্রান্তিক ক্ষেত্র পরিচালনা করতে হয়: কমা বা নতুন লাইনযুক্ত উদ্ধৃত ফিল্ড, ফিল্ডের মধ্যে এস্কেপড দ্বৈত উদ্ধৃতি এবং বিভিন্ন ডিলিমিটার (সেমিকোলন, ট্যাব, পাইপ)। একটি সঠিক কনভার্টার কক্ষের বিষয়বস্তুতে HTML এন্টিটিও এস্কেপ করে, <, >, & এবং উদ্ধৃতি অক্ষরগুলোকে তাদের এন্টিটি সমতুল্যে পরিণত করে — ভাঙা মার্কআপ ও XSS দুর্বলতা রোধ করতে।

কেন CSV থেকে HTML টেবিল কনভার্টার ব্যবহার করবেন?

হাতে HTML টেবিল তৈরি করা ক্লান্তিকর ও ত্রুটিপ্রবণ, বিশেষত ডজনখানেক কলাম বা শত শত সারির ডেটাসেটের ক্ষেত্রে। এই কনভার্টার পার্সিং, এস্কেপিং ও ফরম্যাটিং এক ধাপে সম্পন্ন করে।

তাৎক্ষণিক টেবিল তৈরি
CSV পেস্ট করুন এবং সঠিক thead ও tbody কাঠামোসহ একটি সম্পূর্ণ HTML টেবিল পান। কোনো ট্যাগ হাতে লেখার প্রয়োজন নেই, প্রতি সারিতে কক্ষ গণনার ঝামেলা নেই।
🔒
গোপনীয়তা-অগ্রাধিকার প্রক্রিয়াকরণ
সমস্ত রূপান্তর JavaScript ব্যবহার করে আপনার ব্রাউজারে চলে। আপনার CSV ডেটা কখনো সার্ভারে পাঠানো হয় না, কখনো লগ করা হয় না এবং কখনো সংরক্ষণ করা হয় না।
🎯
পরিষ্কার, বৈধ আউটপুট
তৈরি HTML সঠিক নেস্টিং সহ HTML Living Standard অনুসরণ করে: table > thead/tbody > tr > th/td। রেন্ডারিং সমস্যা রোধ করতে বিশেষ অক্ষরগুলো এন্টিটি-এস্কেপড করা হয়।
📋
নমনীয় ইনপুট ফরম্যাট
ডিলিমিটার হিসেবে কমা, সেমিকোলন, ট্যাব ও পাইপ স্বয়ংক্রিয়ভাবে শনাক্ত করে। এস্কেপড দ্বৈত উদ্ধৃতি ও বহু-লাইন ফিল্ডসহ RFC 4180 উদ্ধৃতি নিয়মগুলো পরিচালনা করে।

CSV থেকে HTML টেবিলের ব্যবহারের ক্ষেত্র

ফ্রন্টএন্ড ডেভেলপমেন্ট
একটি UI উপাদান প্রোটোটাইপ করতে নমুনা ডেটা থেকে HTML টেবিল তৈরি করুন। আউটপুট সরাসরি একটি React, Vue বা Angular টেমপ্লেটে কপি করুন এবং CSS ক্লাস প্রয়োগ করুন।
ইমেইল টেমপ্লেট তৈরি
ইমেইল ক্লায়েন্ট (Outlook, Gmail) HTML টেবিল নির্ভরযোগ্যভাবে রেন্ডার করে কিন্তু বেশিরভাগ CSS লেআউট পদ্ধতি প্রত্যাখ্যান করে। একটি CSV যোগাযোগ তালিকা বা রিপোর্ট এমন একটি টেবিলে রূপান্তর করুন যা আপনি HTML ইমেইলে এম্বেড করতে পারবেন।
স্ট্যাটিক সাইটের বিষয়বস্তু
স্প্রেডশিট থেকে এক্সপোর্ট করা ডেটা দিয়ে Jekyll, Hugo বা Astro পেজে তৈরি HTML টেবিল যোগ করুন। বিল্ড-টাইম প্লাগইনের প্রয়োজন নেই।
QA পরীক্ষা ডেটা প্রদর্শন
একটি পরীক্ষা রিপোর্ট বা Confluence পেজে অন্তর্ভুক্তির জন্য একটি CSV পরীক্ষা ম্যাট্রিক্স HTML টেবিলে রূপান্তর করুন। পর্যালোচকরা স্প্রেডশিট অ্যাপ্লিকেশন না খুলেই ফলাফল দেখতে পারবেন।
ডেটা সাংবাদিকতা
একটি CSV ডেটাসেটকে HTML টেবিলে পরিণত করুন যা একটি CMS নিবন্ধে স্টাইল করা ও এম্বেড করা যায়। রূপান্তরের পরে স্ট্রাইপিং, বাছাই বা রেসপন্সিভ মোড়ানোর জন্য CSS যোগ করুন।
শিক্ষণ ও ডকুমেন্টেশন
টিউটোরিয়াল, API ডকুমেন্টেশন বা কোর্স উপকরণের জন্য প্রকৃত CSV ডেটা থেকে HTML টেবিলের উদাহরণ তৈরি করুন। শিক্ষার্থীরা উৎস ফরম্যাট ও রেন্ডার করা আউটপুট উভয়ই দেখতে পাবেন।

HTML টেবিল উপাদানের রেফারেন্স

একটি সুগঠিত HTML টেবিল সিমান্টিক উপাদান ব্যবহার করে যা হেডার, বডি ও ফুটার আলাদা করে। স্ক্রিন রিডার ও সার্চ ইঞ্জিন টেবিলের কাঠামো বোঝার জন্য এই উপাদানগুলো ব্যবহার করে। প্রতিটি টেবিল-সংক্রান্ত HTML উপাদান এবং কখন কোনটি ব্যবহার করবেন তার একটি রেফারেন্স এখানে দেওয়া হলো।

উপাদানভূমিকানোট
<table>Table rootWraps the entire table structure
<thead>Header groupContains header rows; browsers repeat on print page breaks
<tbody>Body groupContains data rows; enables independent scrolling with CSS
<tfoot>Footer groupSummary or totals row; renders after tbody
<tr>Table rowGroups cells horizontally
<th>Header cellBold and centered by default; supports scope attribute for accessibility
<td>Data cellStandard content cell; accepts any inline or block HTML
<caption>Table captionVisible title above the table; read by screen readers first
<colgroup>Column groupApplies width or style to entire columns without per-cell classes

CSV বনাম HTML টেবিল

CSV ও HTML টেবিল সারণী ডেটা ভিন্নভাবে উপস্থাপন করে। কাঠামোগত পার্থক্যগুলো বোঝা রূপান্তর আপনার ডেটাকে কীভাবে প্রভাবিত করে তা এবং পরবর্তী প্রক্রিয়াকরণে কী প্রয়োজন হতে পারে তা আগে থেকে বুঝতে সাহায্য করে।

CSV
সাধারণ পাঠ্য ফরম্যাট। কোনো ডেটা টাইপ নেই: প্রতিটি মান একটি স্ট্রিং। কোনো স্টাইলিং, নেস্টিং বা মেটাডেটা নেই। সারিগুলো নতুন লাইন-সীমানাবদ্ধ, ফিল্ডগুলো ডিলিমিটার-পৃথক। ফাইলের আকার ন্যূনতম। RFC 4180 দ্বারা সংজ্ঞায়িত।
HTML Table
সিমান্টিক কাঠামোসহ মার্কআপ ফরম্যাট। হেডার (th) ও ডেটা (td) আলাদা করে। স্টাইলিং ও অ্যাক্সেসিবিলিটির জন্য colspan, rowspan, scope ও class-এর মতো অ্যাট্রিবিউট সমর্থন করে। CSS ও JavaScript ইন্টারঅ্যাকশনের জন্য ব্রাউজার DOM-এ পার্স করা হয়।

কোড উদাহরণ

বিভিন্ন প্রোগ্রামিং ভাষায় কীভাবে প্রোগ্রাম্যাটিকভাবে CSV থেকে HTML টেবিলে রূপান্তর করতে হয় তা এখানে দেওয়া হলো। প্রতিটি উদাহরণ হেডার সারি আলাদাভাবে পরিচালনা করে এবং কক্ষের বিষয়বস্তুতে HTML এন্টিটি এস্কেপ করে।

JavaScript (browser / Node.js)
// CSV string → HTML table with thead/tbody
const csv = `name,age,city
Alice,30,Berlin
Bob,25,Tokyo`

function csvToHtmlTable(csv) {
  const rows = csv.trim().split('\n').map(r => r.split(','))
  const [headers, ...data] = rows
  const ths = headers.map(h => `<th>${h}</th>`).join('')
  const trs = data.map(row =>
    '    <tr>' + row.map(c => `<td>${c}</td>`).join('') + '</tr>'
  ).join('\n')
  return `<table>
  <thead><tr>${ths}</tr></thead>
  <tbody>
${trs}
  </tbody>
</table>`
}

console.log(csvToHtmlTable(csv))
// → <table><thead><tr><th>name</th>...</tr></thead><tbody>...</tbody></table>
Python
import csv, io, html

csv_string = """name,age,city
Alice,30,Berlin
Bob,25,Tokyo"""

reader = csv.reader(io.StringIO(csv_string))
headers = next(reader)

lines = ['<table>', '  <thead>', '    <tr>']
for h in headers:
    lines.append(f'      <th>{html.escape(h)}</th>')
lines += ['    </tr>', '  </thead>', '  <tbody>']

for row in reader:
    lines.append('    <tr>')
    for cell in row:
        lines.append(f'      <td>{html.escape(cell)}</td>')
    lines.append('    </tr>')

lines += ['  </tbody>', '</table>']
print('\n'.join(lines))
# → well-formed HTML table with escaped special characters
PHP
<?php
$csv = "name,age,city\nAlice,30,Berlin\nBob,25,Tokyo";
$rows = array_map('str_getcsv', explode("\n", trim($csv)));
$headers = array_shift($rows);

echo "<table>\n  <thead>\n    <tr>\n";
foreach ($headers as $h) {
    echo "      <th>" . htmlspecialchars($h) . "</th>\n";
}
echo "    </tr>\n  </thead>\n  <tbody>\n";

foreach ($rows as $row) {
    echo "    <tr>\n";
    foreach ($row as $cell) {
        echo "      <td>" . htmlspecialchars($cell) . "</td>\n";
    }
    echo "    </tr>\n";
}
echo "  </tbody>\n</table>";
// → <table><thead>...<th>name</th>...</thead><tbody>...</tbody></table>
CLI (awk / csvtool)
# Using awk — quick one-liner for simple CSV (no quoted fields)
awk -F, 'NR==1{print "<table><thead><tr>";for(i=1;i<=NF;i++)print "<th>"$i"</th>";print "</tr></thead><tbody>"}
NR>1{print "<tr>";for(i=1;i<=NF;i++)print "<td>"$i"</td>";print "</tr>"}
END{print "</tbody></table>"}' data.csv

# Using Python one-liner for RFC 4180-compliant parsing
python3 -c "
import csv, sys, html
r=csv.reader(sys.stdin); h=next(r)
print('<table><thead><tr>')
print(''.join(f'<th>{html.escape(c)}</th>' for c in h))
print('</tr></thead><tbody>')
for row in r:
    print('<tr>'+''.join(f'<td>{html.escape(c)}</td>' for c in row)+'</tr>')
print('</tbody></table>')
" < data.csv

সচরাচর জিজ্ঞাসা

কীভাবে CSV থেকে HTML টেবিলে রূপান্তর করব?
আপনার CSV ইনপুট প্যানেলে পেস্ট করুন। কনভার্টার প্রতিটি সারি পার্স করে, প্রথম সারিকে thead-এর ভেতরে th উপাদানে রূপান্তরিত করে এবং বাকি সারিগুলোকে tbody-এর ভেতরে td উপাদানে মুড়ে দেয়। আউটপুট একটি সম্পূর্ণ, কপি-প্রস্তুত HTML টেবিল।
তৈরি HTML কি অ্যাক্সেসিবল?
আউটপুট thead ও th উপাদান ব্যবহার করে, যা স্ক্রিন রিডারকে টেবিলের কাঠামোগত তথ্য দেয়। পূর্ণ WCAG 2.1 মান্যতার জন্য হেডার কক্ষে scope অ্যাট্রিবিউট এবং টেবিলের বিষয়বস্তু বর্ণনাকারী একটি caption উপাদান যোগ করা উচিত।
CSV-এ < ও & এর মতো বিশেষ অক্ষরের কী হয়?
কনভার্টার সমস্ত HTML-সংবেদনশীল অক্ষর এস্কেপ করে: < পরিণত হয় &lt;-তে, > পরিণত হয় &gt;-তে, & পরিণত হয় &amp;-তে এবং দ্বৈত উদ্ধৃতি পরিণত হয় &quot;-তে। এটি ভাঙা মার্কআপ রোধ করে এবং ওয়েব পেজে টেবিল এম্বেড করলে XSS থেকে সুরক্ষা দেয়।
সেমিকোলন-বিভাজিত বা ট্যাব-বিভাজিত ফাইল রূপান্তর করতে পারব?
হ্যাঁ। টুলটি আপনার ইনপুটের প্রথম সারি বিশ্লেষণ করে স্বয়ংক্রিয়ভাবে ডিলিমিটার শনাক্ত করে। এটি কমা, সেমিকোলন, ট্যাব ও পাইপ সমর্থন করে। আপনার ফাইল কমা-বিভাজিত ফরম্যাটে আগে থেকে রূপান্তর করার প্রয়োজন নেই।
CSV থেকে HTML এবং CSV থেকে Markdown টেবিলের মধ্যে পার্থক্য কী?
CSV থেকে HTML সিমান্টিক উপাদান (thead, tbody, th, td) সহ ব্রাউজার-রেন্ডারযোগ্য মার্কআপ তৈরি করে এবং CSS ক্লাসের মাধ্যমে স্টাইলিং সমর্থন করে। CSV থেকে Markdown পাইপ-সীমানাবদ্ধ সাধারণ পাঠ্য টেবিল তৈরি করে যা GitHub README ও ডকুমেন্টেশনে ব্যবহৃত হয়। স্টাইলিং নিয়ন্ত্রণ বা ইমেইল সামঞ্জস্যতার প্রয়োজনে HTML ব্যবহার করুন; ডকুমেন্টেশন ও রিপোজিটরির জন্য Markdown ব্যবহার করুন।
কনভার্টার কি উদ্ধৃত ফিল্ডসহ CSV ফাইল পরিচালনা করতে পারে?
হ্যাঁ। পার্সার RFC 4180 নিয়ম অনুসরণ করে: দ্বৈত উদ্ধৃতিতে মোড়ানো ফিল্ডে কমা, নতুন লাইন এবং আক্ষরিক দ্বৈত উদ্ধৃতি (দুটি পরপর দ্বৈত উদ্ধৃতি হিসেবে এস্কেপড) থাকতে পারে। উদ্ধৃতিগুলো আউটপুট থেকে সরিয়ে দেওয়া হয় এবং ফিল্ডের বিষয়বস্তু HTML কক্ষের ভেতরে রাখা হয়।
CSS দিয়ে কি তৈরি HTML টেবিল স্টাইল করতে পারব?
আউটপুট ইনলাইন স্টাইল বা ক্লাস ছাড়া সাধারণ HTML, তাই আপনি যেকোনো CSS প্রয়োগ করতে পারেন। table উপাদানে একটি ক্লাস যোগ করুন, তারপর হেডারের জন্য table th, কক্ষের জন্য table td এবং জেব্রা স্ট্রাইপিংয়ের জন্য table tr:nth-child(even)-এর মতো সিলেক্টর ব্যবহার করুন। Bootstrap ও Tailwind-এর মতো ফ্রেমওয়ার্কে অন্তর্নির্মিত টেবিল ইউটিলিটি ক্লাস রয়েছে।