Categories
CSS

CSS Table Property in Hindi की हिंदी में जानकारी

इस Tutorial में हम आपको CSS Table Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.

CSS Table Property Introduction in Hindi

आप जानते होंगे कि HTML Table का उपयोग Data को Tabular Format में दिखाने के लिए किया जाता हैं.

Table द्वारा Present Data को आप ज्यादा रुचिकर और उपयोगी Style द्वारा बना सकते हैं. जिसके लिए CSS में Table Properties को बनाया गया हैं.

CSS की Table Properties द्वारा आप Table की Border Setting, Caption, Cells आदि को Customize कर सकते हैं.

विभिन्न प्रकार की CSS Table Properties

HTML Table को Customize करने के लिए CSS द्वारा विभिन्न Table Properties Provide करवाई जाती हैं.

  • border
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells
  • table-layout

border Property

Table में Border Define करने के लिए border Property का इस्तेमाल किया जाता हैं. आप Table के प्रत्येक Element के लिए Border Define कर सकते हैं. नीचे उदाहरण देंखे.

<!DOCTYPE html>
<html>
<head>
<title>CSS Table Border</title><style type=”text/css”>

 

table, th, td {
border: 1px solid green;
}

</style>
</head>
<body>

<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

border-collapse-Property

आपने ऊपर की Table में देखा होगा कि प्रत्येक Element कि अलग-अलग Border हैं. और Border के बीच में Space भी दिया गया हैं.

border-collapse Property द्वारा इसी फालतु बॉर्डर को हटाने का कार्य किया जाता हैं. इससे सभी Element Border को Share करते हैं और Space खत्म हो जाता हैं. इसकी दो संभावित Values होती हैं, पहली separate और दूसरी collapse होती हैं.

<!DOCTYPE html>
<html>
<head>
<title>CSS Table Border Collapes</title><style type=”text/css”>

 

table, th, td {
border: 1px solid green;
}
table {
border-collapse: collapse;
}

</style>
</head>
<body>

<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

border-spacing Property

इस Property का इस्तेमाल एक Cell से दूसरे Cell के बीच की दूरी को Define करने के लिए किया जाता हैं. जिसे आप दोनों तरफ से नियत्रंण कर सकते हैं.

यदि आप सिर्फ एक Value को Declare करते हैं तो यह दोनों तरफ यानि Vertically और Horizontally से बराबर दूरी Set कर देता हैं.

और अगर आप दोनों Values Declare करते हैं, तो पहली Value Horizontally दूरी को Define करती हैं और दूसरी Value Vertically दूरी को Define करती हैं.

<!DOCTYPE html>
<html>
<head>
<title>CSS Table Border Spacing</title><style type=”text/css”>

 

table, th, td {
border: 1px solid green;
}
table {
border-spacing: 10px;
}

</style>
</head>
<body>

<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

caption-side Property

आपने HTML Table में शीर्षक यानि Caption Define किया होगा. जो By Default Table के ऊपर दिखाई देता हैं. Table Caption की Position को नियंत्रित करने के लिए caption-side Property का इस्तेमाल किया जाता हैं. इसकी संभावित Values top, bottomleft और right होती हैं.

<!DOCTYPE html>
<html>
<head>
<title>CSS Table Caption Position</title><style type=”text/css”>

 

table, th, td {
border: 1px solid green;
}
table {
caption-side: top;
}

</style>
</head>
<body>

<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

empty-cells Property

कई बार हमारे पास पर्याप्त डाटा नही होता हैं तो कुछ Cells खाली रह जाते हैं. जो भी Table में दिखाई देते हैं और Table का आकार बढा देते हैं.

लेकिन, empty-cells Property द्वारा आप इन खाली Cells की Border को छिपा सकते हैं. इसकी दो संभावित Values हो सकती हैं. show से आप Border को Display कराते हैं और hide से आप बॉर्डर को छिपाते हैं.

<!DOCTYPE html>
<html>
<head>
<title>CSS Table Empty Cells Property</title><style type=”text/css”>

 

table, th, td {
border: 1px solid green;
}
table {
empty-cells: hide;
}

</style>
</head>
<body>

<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
<td>Row 1, Column 3 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

table-layout Property

Border के Layout को Data के हिसाब से नियंत्रित करने के लिए table-layout Property का इस्तेमाल किया जाता हैं. इस Property की दो संभावित Value होती हैं. fixed Value से Cells बराबर लंबाई-चौडाई के Display होते हैं. और auto Value से Cell Data Length के अनुसार Display होते हैं.

<!DOCTYPE html>
<html>
<head>
<title>CSS Table Layout Property</title><style type=”text/css”>

 

table, th, td {
border: 1px solid green;
}
table {
table-layout: auto;
}

</style>
</head>
<body>

<table>
<tr>
<td>Row 1, Column 1 </td>
<td>This is Column 2 of Row 1. </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

Table with Fixed Layout

अन्य Table Properties के बारे में जानकारी

अभी तक आप CSS द्वारा उपलब्ध Table Properties के बारे में पढ रहे थे. इनके अलावा भी आप कुछ और CSS Properties को Table के लिए उपयोग कर सकते हैं.

आप CSS Text Properties, Color Property, Background Property, Width & Length Property, और कुछ Table Elements के साथ काम आने वाले Attributes को भी CSS Properties के रूप में इस्तेमाल कर सकते हैं.

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS Table Properties की पूरी जानकारी दी हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

#BeDigital

लेख आपको पसंद आया?
👍👎

By TP Staff

लेखक: TP Staff

TP Staff, TutorialPandit की कम्प्यूटर और टेक्नोलॉजी पेशेवरों की टीम है, जिसका नेतृत्व जी पी गौतम द्वारा किया जाता है. TutorialPandit के माध्यम से भारत देश में हर साल लाखों लोग फ्री डिजिटल शिक्षा ग्रहण कर रहे है.

2 replies on “CSS Table Property in Hindi की हिंदी में जानकारी”

Mene to bhai yeah seekha ki HTML table ko use data data ko tubolar form me deekhane ke liye kiya jaata hai table dwara hum apne data ko attract bana sakte hai but yeah koan si table hai mujhe nahi pata aap bata do kya yeah HTML TABLE to nahi hai aur seekha css dwara hum apne data ko caption,cell ko costomize kar sakte hai aur kuch css ki table properties seekhi first properties hai border collapse second spacing third border caption size aur bhool gaya bas itna hi

सुभाष जी, यह HTML Table की CSS Property है जिसके द्वारा HTML Table को कस्टमाईज किया जाता है.

Leave a Reply

Your email address will not be published. Required fields are marked *