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>

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

Student Name	Father Name	Age
Jack	James	23
Phillip	Jhon	26

Table Horizontal Alignment

CSS में text-align प्रॉपर्टी का उपयोग <th>और <td> के कंटेन्ट को होरीजॉन्टली अलाइन करने के लिए किया जाता है। text-align प्रॉपर्टी की तीन वैल्यू निम्न प्रकार हैं।

left – Aligns the text to the left
right – Aligns the text to the right
center – Aligns the text to center

नोट – डिफ़ॉल्ट रूप से <th> का अलाइनमेंट center तथा <td> का left होता है।

CSS Code
Make the text center align for <td> and <th>

td, th {
  text-align: center;
  border: 1px solid green;
  padding: 10px;
}

HTML Code

<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>

Student Name	Father Name	Age
Jack	James	23
Phillip	Jhon	26

Vertical Alignment

CSS में vertical-align प्रॉपर्टी का उपयोग <th>और <td> के कंटेन्ट को वर्टिकली अलाइन करने के लिए किया जाता है। vertical-align प्रॉपर्टी की तीन वैल्यू निम्न प्रकार हैं।

top – Aligns the content top in the cell
middle – Aligns the content middle in the cell
bottom – Aligns the bottom in the cell

नोट – डिफ़ॉल्ट रूप से <th> और <td> का वर्टिकल अलाइनमेंट middle होता है।

CSS Code
Make the text center align for <td> and <th>

td, th {
  text-align: center;
  vertical-align: bottom;
  height: 50px;
  border: 1px solid green;
  padding: 10px;
}

HTML Code

<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>

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

Student Name	Father Name	Age
Jack	James	23
Phillip	Jhon	26

Stripe Table

CSS Code
Make the text center align for <td> and <th>

td, th {
  border: none;
  text-align: left;
  padding: 5px;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

HTML Code

<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>
  <tr><td>David</td><td>Richard</td><td>26</td></tr>
</table>
</body>

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

Student Name	Father Name	Age
Jack	James	23
Phillip	Jhon	26
David	Richard	35

Responsive Table

अगर स्क्रीन टेबल पूरी सामग्री दिखाने के लिए बहुत छोटी है, तो रिस्पॉन्सिव टेबल एक वर्टिकल स्क्रॉलबार (Vertical Scrollbar) प्रदर्शित करेगी। प्रभाव देखने के लिए ब्राउज़र विंडो का आकार बदलें।

रिस्पॉन्सिव टेबल बनाने के लिए, टेबल एलिमेंट के चारों ओर overflow-x: auto के साथ एक कंटेनर एलिमेंट (जैसे div) का उपयोग करें।

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
}
table, th, td {
   border: 1px solid #ddd;
   padding: 5px;
   text-align: left;
}
</style>
</head>

<body>
<div class="container">
<table>
<tr>
<th>Player Name</th><th>Points 1</th><th>Points 2</th><th>Points 3</th><th>Points 4</th><th>Points 5</th><th>Points 6</th><th>Points 7</th><th>Points 8</th><th>Points 9</th><th>Points 10</th>
</tr>

<tr>
<td>Jhon</td><td>52</td><td>36</td><td>47</td><td>79</td><td>58</td><td>69</td><td>71</td><td>67</td><td>58</td><td>86</td>
</tr>
</table>
</div>

</body>
</html>

Player Name	Points 1	Points 2	Points 3	Points 4	Points 5	Points 6	Points 7	Points 8	Points 9	Points 10
Jhon	52	36	47	79	58	69	61	67	58	86

Share This Page

Table Borders

Collapse Table Borders

Table Padding

CSS Border Spacing

Outside Table Borders

Table Width and Height

Table Horizontal Alignment

Vertical Alignment

Stripe Table

Responsive Table

Leave a Comment Cancel reply