HTML TABLE

M2-R5.1 · Chapter 3: HTML Basics · 1 min read

WHAT ARE HTML TABLES?

HTML में Tables का उपयोग data को rows और columns के रूप में arrange करने के लिए किया जाता है।

Tables की सहायता से structured data को आसानी से display किया जा सकता है।

उदाहरण:

Schedules
Mark-sheets
Reports
Student Records
Product Information

HTML में table बनाने के लिए <table> tag का उपयोग किया जाता है।

🔹 BASIC TABLE STRUCTURE

एक HTML table के मुख्य elements निम्नलिखित हैं:

Tag	Description
`<table>`	यह एक table define करता है।
`<tr>`	यह table की एक row define करता है।
`<td>`	यह table की एक data cell define करता है।
`<th>`	यह table की header cell define करता है। यह सामान्यतः bold और centered दिखाई देती है।

Syntax

<table border="1">

    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>

    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>

</table>

Output Structure

Heading 1	Heading 2
Data 1	Data 2

🔹 TABLE के MAIN TAGS को समझें

`<table>`

पूरी table को define करने के लिए <table> tag का उपयोग किया जाता है।

<table>
    ...
</table>

`<tr>` – Table Row

<tr> का पूरा नाम Table Row है।

इसका उपयोग table में एक row बनाने के लिए किया जाता है।

<tr>
    ...
</tr>

`<th>` – Table Header

<th> का पूरा नाम Table Header है।

इसका उपयोग table के heading/header के लिए किया जाता है।

<th>Name</th>

<th> के अंदर लिखा text सामान्यतः bold और center aligned दिखाई देता है।

`<td>` – Table Data

<td> का पूरा नाम Table Data है।

इसका उपयोग table में data/value रखने के लिए किया जाता है।

<td>Aditya</td>

🔹 ATTRIBUTE USED IN TABLE

HTML में <table> tag के साथ कई attributes का उपयोग किया जा सकता है।

Example of Table Attributes

<table border="1" width="500" align="center" 
       cellpadding="10" cellspacing="5">

    <tr>
        <th>Name</th>
        <th>Course</th>
    </tr>

    <tr>
        <td>Aditya</td>
        <td>HTML</td>
    </tr>

</table>

इसमें:

border="1" → Table का border set करता है।
width="500" → Table की width set करता है।
align="center" → Table को center में रखता है।
cellpadding="10" → Cell के अंदर content के आसपास space देता है।
cellspacing="5" → Cells के बीच space देता है।

Note: border, width, height, align, bgcolor, cellpadding और cellspacing जैसे पुराने presentation attributes आज के modern HTML में generally CSS से replace किए जाते हैं। लेकिन basic HTML सीखने के लिए इनके concepts को समझना उपयोगी है।