Lists and Tables Free web designing Course Tutorials #7
HTML Tutorial: Lists and Tables
इस ट्यूटोरियल में, हम HTML में सूचियों और तालिकाओं की अवधारणाओं पर काम करेंगे। तो, चलिए tut.html के रूप में एक नई फ़ाइल बनाते हैं और आवश्यक HTML टेम्पलेट प्राप्त करने के लिए बॉयलरप्लेट को जोड़ते हैं। <शीर्षक> टैग में शीर्षक और सूचियों के रूप में शीर्षक दें।
सूची मूल रूप से दो प्रकार की होती है-
1 Ordered lists (ol)
<ol>
<li>This is the first item of my unordered list</li>
</ol>
2 Unordered lists (ul)
<ul>
<li>This is the first item if my unordered list</li>
</ul>
ऑर्डर की गई और अनऑर्डर की गई सूची के बीच का अंतर यह है कि ऑर्डर की गई सूची इस प्रारूप में सूची को प्रदर्शित करती है -
1.
2.
3.
….
दूसरी ओर, अनियंत्रित सूची निम्न प्रारूप में सूची प्रदर्शित करती है-
- .
- .
- .
….
दोनों सूचियों में एक से अधिक गुण हैं जिन्हें हम टाइप कमांड का उपयोग करके लिख सकते हैं। उदाहरण के लिए, यदि हम लिखते हैं:
<ol type= “I”>
फिर हमें सूची I, II, III और इसी तरह मिल जाएगी। उसी प्रारूप में, हम सूची को ए, बी, सी, और इतने पर भी प्राप्त कर सकते हैं।
यह अव्यवस्थित सूचियों पर भी लागू होता है। अगर हम लिखते हैं
<ul type= “square”>
फिर हमें एक सर्कल के बजाय एक बुलेटेड स्क्वायर मिलेगा। विभिन्न अन्य संदर्भ उपलब्ध हैं जिनसे आप सभी विशेषताओं को देख सकते हैं। इन सभी चीजों को सीखने की कोई जरूरत नहीं है। आप अभ्यास करके परिपूर्ण हो जाएंगे।
HTML सूचियों के नेस्टिंग की भी अनुमति देता है। इसका सीधा सा मतलब है कि हम एक सूची को दूसरी सूची में जोड़ सकते हैं।
<ul type="circle">
<li>This is first item of my unordered list</li>
<li>This is second item of my unordered list</li>
<ul>
<li>Another one</li>
<li>Another two</li>
<li>Another three</li>
</ul>
आइये अब HTML में Tables पर चर्चा करते हैं। एक टेबल एक वेबपेज पर पंक्तियों और स्तंभों का एक संयोजन है। तालिका की संरचना इस प्रकार है-
मुख्य भाग टेबल टैग है, और इसमें दो भाग होते हैं: टेबल हेड और टेबल बॉडी। <Thead> में टेबल का मुख्य सिर होता है और <tbody> में टेबल का मुख्य भाग होता है।
<tr> का उपयोग यह बताने के लिए किया जाता है कि यह एक पंक्ति का हिस्सा है। <Tr> टैग के अंदर, हम <th> टैग के तहत एक पंक्ति के शीर्षक देते हैं। तालिका की अंतिम संरचना इस प्रकार है-
एक तालिका में, याद रखने के लिए ज्यादातर दो चीजें हैं, एक मेज का सिर और शरीर। तालिका में अधिक पंक्तियों को जोड़ने के लिए, हम बस एक <tr> टैग जोड़ सकते हैं और किसी तालिका में पंक्तियों की संख्या जोड़ सकते हैं।
मेरा मानना है कि आप स्पष्ट रूप से समझ गए हैं कि सूचियाँ और तालिकाएँ क्या हैं। टेबल्स और सूची एक वेबसाइट के दो प्राथमिक घटक हैं जो इसे और अधिक आकर्षक बनाने में मदद करते हैं। आपकी साइट को विकसित करने में आपकी सहायता करने के लिए अधिक ट्यूटोरियल आएंगे। इसलिए धैर्य रखें और अब तक सिखाई गई बातों का अभ्यास करते रहें।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tables and Lists</title>
</head>
<body>
<ul type="circle">
<li>This is first item of my unordered list</li>
<li>This is second item of my unordered list</li>
<ul>
<li>Another one</li>
<li>Another two</li>
<li>Another three</li>
</ul>
<li>This is third item of my unordered list</li>
</ul>
<ol type="a">
<li>This is first item of my ordered list</li>
<li>This is second item of my ordered list</li>
<li>This is third item of my ordered list</li>
</ol>
<!-- Tables -->
<h3>HTML Table</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Employee Id</th>
<th>Employee Role</th>
</tr>
</thead>
<tbody>
<tr>
<td> Harry </td>
<td> 34343 </td>
<td> Programmer </td>
</tr>
<tr>
<td> Rohan Das</td>
<td> 3483 </td>
<td> HTML Expert </td>
</tr>
<tr>
<td> Shubham </td>
<td> 7564 </td>
<td> Android Developer </td>
</tr>
</tbody>
</table>
</body>
</html>
