HTML Tables (वेब पेज पर सारणियाँ)

Siddharth Sharma
Jan 30
3 min read

Web pages पर data को structured way में (Rows और Columns के format में) display करने के लिए HTML Tables का use किया जाता है। चाहे वह "Student Marksheet" हो, "Price List" हो, या "Time Table" हो, complex data को represent करने के लिए Tables best option हैं।

HTML में Table create करने के लिए mainly 4 tags का use होता है: <table>, <tr>, <th>, और <td>।

1. Basic Table Tags

A. The <table> Tag

यह main container tag है। Table की beginning और ending इसी tag से होती है। इसके अंदर बाकी सभी elements आते हैं।

Syntax: <table> ... </table>

B. The <tr> Tag (Table Row)

Table hamesha Rows (Horizontal lines) में create की जाती है। हर एक नई row start करने के लिए <tr> tag का use होता है।

Concept: अगर आपको table में 3 lines चाहिए, तो आपको 3 <tr> tags लगाने होंगे।

C. The <th> Tag (Table Header)

Table की first row usually "Headings" होती है (जैसे Name, Roll No, Marks)। इसके लिए <th> tag use होता है।

Feature: इसके अंदर लिखा text automatically Bold और Center Aligned हो जाता है।

D. The <td> Tag (Table Data)

Heading के बाद actual data भरने के लिए <td> tag का use होता है। यह standard cell है।

Feature: इसके अंदर लिखा text Normal (Regular) और Left Aligned होता है।

2. Table Attributes (Most Important)

Table को attractive और readable बनाने के लिए <table> tag के अंदर कुछ attributes use किए जाते हैं। Exam point of view से border, cellpadding, और cellspacing का difference समझना बहुत ज़रूरी है।

A. border Attribute

Default रूप से HTML table बिना border के आती है (invisible lines)। Lines दिखाने के लिए border attribute use होता है।

Value: Pixels में दी जाती है (e.g., border="1").
Code: <table border="1">

B. cellpadding Attribute (Cell के अंदर की जगह)

Cell की दीवार (border) और उसके अंदर लिखे text (content) के बीच की दूरी को Cellpadding कहते हैं।

Use: अगर text border से चिपक रहा है, तो padding बढ़ाने से table साफ़ दिखती है।
Code: <table cellpadding="10">

C. cellspacing Attribute (दो Cells के बीच की जगह)

दो अलग-अलग cells के बीच की दूरी (gap) को Cellspacing कहते हैं।

Use: Cells को एक-दूसरे से दूर करने के लिए। अगर आप चाहते हैं कि cells के बीच gap न हो (single line border दिखे), तो cellspacing="0" set करें।
Code: <table cellspacing="5">

3. Complete Example Code

नीचे दिए गए code में एक Student List बनाई गई है जिसमें header, data, border और spacing attributes का use किया गया है।

HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Example</title>
</head>
<body>

    <h2>Student Data Table</h2>

    <table border="1" cellpadding="10" cellspacing="5">
        
        <tr>
            <th>Roll No</th>
            <th>Student Name</th>
            <th>Course</th>
        </tr>

        <tr>
            <td>101</td>
            <td>Amit Kumar</td>
            <td>DCA</td>
        </tr>

        <tr>
            <td>102</td>
            <td>Priya Singh</td>
            <td>PGDCA</td>
        </tr>

        <tr>
            <td>103</td>
            <td>Rahul Verma</td>
            <td>BCA</td>
        </tr>

    </table>

</body>
</html>

4. Attributes Breakdown (Samajhne ke liye)

Attribute	Meaning (Hindi)	Effect
border="1"	किनारा	Table के चारों तरफ और cells के बीच line आ जाएगी।
cellpadding="10"	अंदर की जगह	Text border से 10 pixels दूर हो जाएगा (Space inside cell)।
cellspacing="5"	बीच की जगह	हर cell एक दूसरे से 5 pixels दूर हो जाएगी (Gap between cells)।

Note: Modern Web Development (HTML5) में cellpadding और cellspacing attributes का use कम होता है, इनका काम CSS (padding aur border-spacing) से किया जाता है। लेकिन Exams और Basic understanding के लिए ये attributes बहुत important हैं।

Summary (Revision)

<table>: Table start करने के लिए।
<tr>: Row (Line) बनाने के लिए।
<th>: Heading (Bold title) के लिए।
<td>: Data (Normal text) के लिए।
border: Lines दिखाने के लिए।
cellpadding: Content aur Border ka distance.
cellspacing: Cell aur Cell ka distance.