How To Make a Table in Html in hindi
हेल्लो फ्रेंड्स : इस आर्टिकल में हम लोग HTML में टेबल कैसे बनाते है और इसे डिजाईन कैसे करते है इसके बारे में पढेंगे | टेबल का use तब किया जाता है जब की डाटा को एक साथ रो और कॉलम में प्रदसित करना होता है , टेबल - Row और Column से मिल कर बना होता है |
1. How To Make a Table in Html in Hindi:
सबसे पहले आपको कोई भी टेक्स्ट एडिटर को open करना है जैसे notepad , sublime text ,notepad ++ ..etc
ओपन करने के बाद आपको उसे कोई भी नाम से सेव करना है तथा नाम के extention में .html type करके सेव कर देना है जैसे निचे चित्र में दिया गया है :
सेव करने के बाद अब हम आते है html कोड पर :
<table> </table> tag:
इस टैग का use टेबल को डिफाइन करने के लिए किया जाया है यह एक containner टैग ( जिसमे opening & Closing tag होता है ) है |
<tr> </tr> tag :
इस टैग का पूरा नाम Table Row होता है जिसका use डाटा को हम Row में प्रदर्शित करने के लिए करते है
इसे टेबल का attribute भी कहते है |
<th> </th> Tag:
इसे <tr> </tr> के अन्दर लिखा जाता है जैसे :
<table>
<tr>
<th>Sr.No. </th>
<th>Name</th>
<th>Class</th>
</tr>
<td> </td> Tag:
इसे टेबल डाटा के नाम से जाना जाता है |HTML <td> तत्व <body> टैग के भीतर एक HTML तालिका में पाया जाता है। <Td> टैग मानक कोशिकाओं को तालिका में परिभाषित करता है जो सामान्य-वजन, बाएं-संरेखित पाठ के रूप में प्रदर्शित होते हैं। <Tr> टैग तालिका पंक्तियों को परिभाषित करता है।
इसे <tr> </tr> के अन्दर लिखा जाता है जैसे
<table>
<tr>
<td> 1. </td>
<td> Rama</td>
<td>B.C.A. 3rd Year</td>
</tr>
इस तरह से हमारा complete html कोड इस प्रकार से बनता है :
<!DOCTYPE html>
<html>
<head>
<title>My First Table Create</title>
</head>
<body>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
जिसका हमे out put इस प्रकार मिलेगा :⇊
यहाँ हमें टेबल का बॉर्डर शो नहीं हो रहा है शो करने करने के लिए हमे टेबल को डिजाईन करना पड़ेगा तो चलिए टेबल को डिजाईन करते है :
हम टेबल को दो तरीके से डिजाईन कर सकते है
CSS (Cascading Style Sheets)
HTML (HYPER TEXT MARKUP LANGUAGE)
html में हम ज्यादा स्टाइल नही कर सकते लेकिन CSS में हम फुल स्टाइल कर सकते है तो चलिए CSS में हम टेबल को स्टाइल करते है :
2. How To Style Table:
<style type="text/css">
.table, th, td {
border: 1px solid black;
}
th, td {
padding: 15px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
इस कोड को <body > टैग के निचे लिखे |
जिसका output हमे इस प्रकार से मिलेगा
अब टेबल सही है | इसी तरह से आप टेबल में many colunm और Row add कर सकते है |
तो फ्रेंड्स मै उम्मीद करता हूँ की यह post आपको अच्छा लगा होगा | अगर कुछ समझ में नही आता है तो please कमेंट बॉक्स में हमें बताईये :
और हाँ फोलो लाइक शेयर और सब्सक्राइब करना ना भूले |
0 Comments