Tables

Introduction

जब हमें data को rows और columns के form में दिखाना होता है, तब हम Tables का उपयोग करते हैं।

सोचिए—अगर आपको student का result, attendance या product list दिखानी हो और आप उसे बिना structure के लिख दें, तो उसे समझना बहुत मुश्किल हो जाएगा।

यहीं पर HTML Tables काम आती हैं। Tables data को organized, clear और easy-to-read बनाती हैं।

Web Designing में Tables का उपयोग data presentation के लिए बहुत महत्वपूर्ण है, जैसे marksheet, timetable, billing data आदि।

Definition

HTML Table एक ऐसा structure है जिसमें data को rows (पंक्तियों) और columns (स्तंभों) में व्यवस्थित करके दिखाया जाता है, ताकि information को आसानी से समझा जा सके।

Concept

1. Table Structure

HTML में table बनाने के लिए मुख्य tags होते हैं:

<table> → Table define करता है
<tr> → Table row (row बनाता है)
<th> → Table heading (header cell)
<td> → Table data (normal cell)

2. Basic Table Example

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Aman</td>
        <td>22</td>
    </tr>
</table>Give feedback

Output:

Name | Age
Rahul | 20
Aman | 22

3. Table Attributes

(a) border

Table के चारों ओर border दिखाने के लिए।

<table border="1">Give feedback

(b) cellpadding

Cell के अंदर space देने के लिए।

<table border="1" cellpadding="10">Give feedback

(c) cellspacing

Cells के बीच space देने के लिए।

<table border="1" cellspacing="5">Give feedback

(d) width

Table की चौड़ाई सेट करने के लिए।

<table width="50%">Give feedback

4. Colspan और Rowspan

Colspan

एक cell को multiple columns में फैलाने के लिए।

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

Rowspan

एक cell को multiple rows में फैलाने के लिए।

<td rowspan="2">Rahul</td>Give feedback

5. Table Caption

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

<table border="1">
    <caption>Student Data</caption>
</table>Give feedback

6. Complete Table Example

<table border="1" cellpadding="10">
    <caption>Student Details</caption>    
    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Marks</th>
    </tr>    
     <tr>
        <td>Rahul</td>
        <td>BCA</td>
        <td>85</td>
    </tr>    
     <tr>
        <td>Aman</td>
        <td>BCA</td>
        <td>78</td>
    </tr>
</table>Give feedback

Output:

Student Details

Name | Course | Marks
Rahul | BCA | 85
Aman | BCA | 78

Real-Life Example

मान लीजिए आपको school का result दिखाना है:

Student Name
Subject
Marks

अगर इसे paragraph में लिखेंगे, तो समझना मुश्किल होगा। लेकिन table में दिखाने पर यह साफ और organized लगेगा।

Important Points

Tables data को structured बनाती हैं
Rows और columns का उपयोग होता है
<th> heading के लिए और <td> data के लिए होता है
Colspan और Rowspan merging के लिए use होते हैं
Table presentation को clear और professional बनाती है