HTML Mai Table Kaise Banaye? – HTML Tables in Hindi : – Hello Friends! आज के इस आर्टिकल में हम आपको HTML से Table Create करने के बारे में बताने जा रहे है। HTML Kya Hai?
तो चलिए जल्दी से जानते है कि कैसे HTML से Table Create किये जा सकते है। Table की Help से Data को Rows और Columns में अच्छे से Arrange किया जा सकता है। HTML Mai Table Kaise Banaye?, HTML Tables in Hindi
HTML Table क्या है ? – What is HTML Table In Hindi
ये तो आप जानते ही होंगे कि Data को Structured Form में Show करने के लिए Table का Use किया जाता है। HTML Tables Web Developers को Help करती है Data को Rows और Columns में Arrange करने की।
HTML मे Tables को Design और Create करने के लिये <table> Tag का Use किया जाता है। इस Tag का एक Sub Tag होता है जिसे <tr> Table Row Tag बोला जाता है। <tr>Tag का भी एक Sub Tag होता है जिसे <td>Table Data Tag कहा जाता है।
इन्हे भी पढ़े : –
- Database kya Hai? – What is Database In Hindi – Types of Database In Hindi
- HTML Formatting Tags in Hindi
- Internet Cookies Kya Hai? – What is Internet Cookies in Hindi
- Kali Linux Kya Hai? – What is Kali Linux in Hindi
Point to Remember In HTML Table
- <table> Tag का Use Table को Define करने के लिए किया जाता है।
- <td> Tag का Use Table Data को Define करने के लिए किया जाता है।
- <tr> Tag का Use Table Row को Define करने के लिए किया जाता है।
- <th> Tag का Use Table Heading को Define करने के लिए किया जाता है.
- <caption> Tag का Use Table Caption को Define करने के लिए किया जाता है.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
<tr>
<td>Karan</td>
<td>Class 2</td>
<td>1</td>
</tr>
<tr>
<td>Deepika</td>
<td>Class 2</td>
<td>2</td>
</tr>
<tr>
<td>Priya</td>
<td>Class 2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
Output : –
| Name | Class | Roll No |
|---|---|---|
| Karan | Class 2 | 1 |
| Deepika | Class 2 | 2 |
| Priya | Class 2 | 3 |
Border Table In HTML
HTML Tables में Different Styles and Shapes की Borders हो सकती है। Table Border Attribute का Use करने के लिए Table और Table Cells की Outside Boundaries के लिए Grids/Borders को Set किया जाता है।
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Parveen</td>
<td>Kumar</td>
<td>50</td>
</tr>
<tr>
<td>Chandi</td>
<td>Sharma</td>
<td>34</td>
</tr>
<tr>
<td>Ankit</td>
<td>Kumar</td>
<td>30</td>
</tr>
</table>
</body>
</html>
HTML Table Headers
Table Heading में <th> … </ th> Tag का Use करके Table मे Columns के लिए Heading को Create किया जाता है। इसके लिए Columns के लिए Heading Cells को Define करते है।
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Table Headers</h2>
<p>Use the TH element to define table headers.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Mohammad</td>
<td>Kaleem</td>
<td>26</td>
</tr>
<tr>
<td>Parveen</td>
<td>Kuamr</td>
<td>34</td>
</tr>
</table>
</body>
</html>
HTML Table Colspan & Rowspan
HTML Table Colspan
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Mohammad</td>
<td>Kaleem</td>
<td>26</td>
</tr>
<tr>
<td>Parveen</td>
<td>Kuamr</td>
<td>34</td>
</tr>
</table>
</body>
</html>
HTML Table – Rowspan
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%">
<tr>
<th>Name</th>
<td>Ankit</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>888-1234</td>
</tr>
<tr>
<td>655-8745</td>
</tr>
</table>
</body>
</html>
Conclusion
इस आर्टिकल में हमने आपको बताया है HTML Tables के बारे में बताये। उसके साथ साथ HTML Tables का Use कैसे किया जाता है। उम्मीद है आपको ये आर्टिकल पसंद आया होगा। HTML Tables से जुड़ा कोई भी सवाल आपके मन में है तो आप हमे Comment करके पूछ सकते है।
