HTML Tables

HTML Tables का उपयोग data को rows और columns में व्यवस्थित रूप से दिखाने के लिए किया जाता है।
जब information structured format में चाहिए होती है, तब tables सबसे effective solution होती हैं।

HTML Table क्या होती है

HTML Table एक grid structure होती है जिसमें: Rows होती हैं
Columns होते हैं
Cells में data होता है

Tables का उपयोग reports, price lists, schedules और comparisons के लिए किया जाता है।

HTML Table बनाने के लिए Tags

HTML table बनाने के लिए ये tags उपयोग होते हैं:

<table>
<tr>
<th>
<td>

Basic Table Structure

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>25</td>
  </tr>
</table>

<table> Tag

<table> tag पूरे table को define करता है।

<table>
</table>

<tr> Table Row

<tr> एक row बनाता है।

<tr>
  <td>Data</td>
</tr>

<th> Table Header

<th> header cell होता है।
By default text bold और center aligned होता है।

<th>Username</th>

<td> Table Data

<td> normal data cell होता है।

<td>Admin</td>

Complete Table Example

<table>
  <tr>
    <th>Course</th>
    <th>Duration</th>
    <th>Fees</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>1 Month</td>
    <td>Free</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>1 Month</td>
    <td>Free</td>
  </tr>
</table>

Table Border जोड़ना

HTML attribute या CSS से border लगाया जा सकता है।
Modern websites में CSS preferred है।

<style>
table, th, td {
  border: 1px solid black;
}
</style>

Cell Padding

Cell के अंदर spacing के लिए padding use होती है।

<style>
th, td {
  padding: 10px;
}
</style>

Table Width और Alignment

<style>
table {
  width: 100%;
}
</style>

Table Header और Body Structure

Large tables में readability के लिए sections बनाए जाते हैं।

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Amit</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

Table Caption

Table का title देने के लिए <caption> use होता है।

<table>
  <caption>Student Result</caption>
</table>

Caption table के ऊपर show होता है।

Colspan Attribute

Multiple columns को merge करने के लिए colspan use होता है।

<td colspan="2">Total</td>

Rowspan Attribute

Multiple rows को merge करने के लिए rowspan use होता है।

<td rowspan="2">Admin</td>

Example Colspan और Rowspan

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>Math</td>
    <td>90</td>
  </tr>
</table>

Table Styling with CSS

<style>
table {
  border-collapse: collapse;
}

th {
  background-color: #333;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

border-collapse: collapse borders को clean look देता है।

Responsive Tables

Small screens पर tables handle करना जरूरी होता है।

Simple technique:

<style>
table {
  overflow-x: auto;
  display: block;
}
</style>

Accessibility और Tables

Best practices: Header cells के लिए <th> use करें
Logical structure रखें
Tables का उपयोग layout के लिए न करें

Screen readers tables को better समझ पाते हैं।

Common Mistakes

Table को layout design के लिए use करना
Too much nested tables
CSS styling ignore करना
Responsive behavior न सोचना

Tables का सही Use कब करें

Tabular data
Comparison charts
Reports
Schedules

Layout design के लिए tables avoid करें।

Summary

HTML Tables structured data दिखाने के लिए उपयोग की जाती हैं।
<table>, <tr>, <th> और <td> basic building blocks हैं।
CSS styling और responsive handling modern tables के लिए जरूरी है।