CSS Tables - Digital Taiyari

HTML Table को CSS के साथ काफी आकर्षक बनाया जा सकता है।

Sr.	Name	Country	Skill
1	Jack	Germany	Comedian
2	Christina Berglund	Sweden	Dancer
3	Arthur	Mexico	Singer
4	Roland Mendel	Austria	Musician
5	Helen Bennett	UK	Dancer
6	Philip Cramer	Germany	Comedian
7	Henry	Canada	Dancer
8	James	Italy	Musician

Table Borders

CSS में border प्रॉपर्टी का उपयोग टेबल बॉर्डर की width, style और color निर्दिष्ट करने के लिए किया जाता है।

नीचे दी गई प्रॉपर्टीस के लिए border एक शॉर्ट्हैन्ड प्रॉपर्टी है-

border-width – sets the width of the border
border-style – sets the style of the border (required)
border-color – sets the color of the border

नीचे दिए गए उदाहरण मे <table>, <th> और <td> एलीमेंट के लिए 1px solid border सेट किया गया है।

Example
Apply 1px solid green border for <table>, <th> and <td> element.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid green;
}
</style>
</head>
<body>

<table>
  <tr><th>Student Name</th><th>Father Name</th></tr>
  <tr><td>Jack</td><td>James</td></tr>
  <tr><td>Phillip</td><td>Jhon</td></tr>
</table>

</body>
</html>

उरोक्त कोड का आउटपुट निम्न प्रकार होगा।

Student Name	Father Name
Jack	James
Phillip	Jhon

Collapse Table Borders

CSS में border-collapse प्रॉपर्टी यह निर्धारित करती है कि टेबल बॉर्डर को एक (Single) बॉर्डर में सेट करना चाहिए या HTML Standard की तरह अलग किया जाना चाहिए।

border-collapse प्रॉपर्टी की वैल्यू निम्न तरह हैं –

separate – यह डिफ़ॉल्ट वैल्यू होती है। इसमे बॉर्डर अलग-अलग हैं; यानि प्रत्येक सेल अपना अलग बॉर्डर प्रदर्शित करेगा।
collapse – जब संभव हो तो अलग-अलग बॉर्डर को एक ही सीमा में समेट दिया जाता है।

Example
The following code has a collapsed table borders:

<!DOCTYPE html>
<html>
<head>
<style>
table{
  border-collapse: collapse;
}
th, td {
  border: 1px solid green;
}
</style>
</head>

<body>
<table>
  <tr><th>Student Name</th><th>Father Name</th></tr>
  <tr><td>Jack</td><td>James</td></tr>
  <tr><td>Phillip</td><td>Jhon</td></tr>
</table>
</body>
</html>

उपरोक्त कोड एक आउटपुट निम्न प्रकार होगा –

Student Name	Father Name
Jack	James
Phillip	Jhon

Table Padding

किसी टेबल में बॉर्डर और सामग्री के बीच के स्थान को नियंत्रित करने के लिए, <td> और <th> एलीमेंट पर पैडिंग प्रॉपर्टी का उपयोग करते हैं।

Example
Apply 10px padding for <td> and <th> element of table with collapse border.

<!DOCTYPE html>
<html>
<head>
<style>
table{
  border-collapse: collapse;
}
th, td {
  border: 1px solid green;
  padding: 10px;
}
</style>
</head>

<body>
<table>
  <tr><th>Student Name</th><th>Father Name</th></tr>
  <tr><td>Jack</td><td>James</td></tr>
  <tr><td>Phillip</td><td>Jhon</td></tr>
</table>
</body>
</html>

उपरोक्त कोड एक आउटपुट निम्न प्रकार होगा –

Student Name	Father Name
Jack	James
Phillip	Jhon

CSS Border Spacing

CSS में border-spacing प्रॉपर्टी टेबल की सेल के बीच की दूरी निर्धारित करती है।

नोट – border-spacing प्रॉपर्टी border-collapse: collapse; के साथ कार्य नहीं करती है। इसके लिए border-collapse: separate; होना चाहिए।

Example
Apply 10px border spacing for <td> and <th> element of table with separate border.

<!DOCTYPE html>
<html>
<head>
<style>
table{
  border-collapse: separate;
  border-spacing: 10px;
}
th, td {
  border: 1px solid green;
  padding: 10px;
}
</style>
</head>

<body>
<table>
  <tr><th>Student Name</th><th>Father Name</th></tr>
  <tr><td>Jack</td><td>James</td></tr>
  <tr><td>Phillip</td><td>Jhon</td></tr>
</table>
</body>
</html>

The following table has a border-spacing of 10px:

Student Name	Father Name
Jack	James
Phillip	Jhon

Outside Table Borders

यदि आप केवल टेबल के चारों ओर बॉर्डर चाहते हैं अंदर नहीं, तो आप केवल <table> एलीमेंट के लिए बॉर्डर प्रॉपर्टी निर्दिष्ट कर सकते हैं।

Example
Apply table outside border only.

<!DOCTYPE html>
<html>
<head>
<style>
table{
  border: 1px solid green;
}
th, td {
  padding: 10px;
}
</style>
</head>

<body>
<table>
  <tr><th>Student Name</th><th>Father Name</th></tr>
  <tr><td>Jack</td><td>James</td></tr>
  <tr><td>Phillip</td><td>Jhon</td></tr>
</table>
</body>
</html>

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा।

Student Name	Father Name
Jack	James
Phillip	Jhon

Table Width and Height

किसी टेबल की चौड़ाई और ऊंचाई को width और height प्रॉपर्टी द्वारा परिभाषित किया जाता है। टेबल के लिए CSS मे width और height प्रॉपर्टी के लिए निम्न वैल्यू का उपयोग किया जा सकता है-

% – height और width स्क्रीन साइज़ के आधार पर या अपने पैरेंट एलीमेंट के अनुसार सेट करेगा।
px – चौड़ाई और ऊंचाई का मान फिक्स रखने के लिए।
auto – चौड़ाई और ऊंचाई मैटर के अनुसार स्वतः सेट होगा।

Example 1
Set the table width 100%, <th> height 70px and <td> height 50px.

<!DOCTYPE html>
<html>
<head>
<style>
table{
  border: 1px solid green;
  width: 100%;
}
th{
  border: 1px solid green;
  padding: 10px;
  height: 50px;
}
td{
  border: 1px solid green;
  padding: 10px;
  height: 30px;
}
</style>
</head>

<body>
<table>
  <tr><th>Student Name</th><th>Father Name</th><th>Age</th></tr>
  <tr><td>Jack</td><td>James</td><td>23</td></tr>
  <tr><td>Phillip</td><td>Jhon</td><td>26</td></tr>
</table>
</body>
</html>

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा –

Student Name	Father Name	Age
Jack	James	23
Phillip	Jhon	26

Example 2
Set the table width and height auto.
 
<!DOCTYPE html>
<html>
<head>
<style>
table{
  border: 1px solid green;
  width: auto;
  height: auto;
}
th{
  border: 1px solid green;
  padding: 10px;
}
td{
  border: 1px solid green;
  padding: 10px;
}
</style>
</head>

<body>
<table>
  <tr><th>Student Name</th><th>Father Name</th><th>Age</th></tr>
  <tr><td>Jack</td><td>James</td><td>23</td></tr>
  <tr><td>Phillip</td><td>Jhon</td><td>26</td></tr>
</table>
</body>
</html>