सीएसएस तालीका

उपयोग करके CSS, HTML तालिका का आकार बहुत बढ़ा सकता है:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha,No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

अपने आप साफ़ी करें

तालिका किनारे

यदि आप CSS में तालिका किनारे सेट करना चाहते हैं, तो border गुण:

इस उदाहरण में <table>、<th> और <td> एलीमेंट के लिए काला किनारा निर्धारित किया गया है:

Firstname Lastname
Bill Gates
Steve Jobs

इस्तरण

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

अपने आप साफ़ी करें

नोट:ऊपरी उदाहरण में तालिका दोहरे किनारे है। इसकी वजह तालिका और <th> और <td> एलीमेंट दोनों के अलग-अलग किनारे हैं。

पूर्ण चौड़ाई तालिका

कुछ स्थितियों में, ऊपरी तालिका को छोटा लगता है। अगर आप पूरे स्क्रीन (पूर्ण चौड़ाई) के तालिका की जरूरत है, तो <table> एलीमेंट को width: 100% जोड़ें:

इस्तरण

table {
  width: 100%;
}

अपने आप साफ़ी करें

दोहरे किनारे

ध्यान दें कि ऊपरी तालिका दोहरे किनारे है। इसकी वजह तालिका और th और td एलीमेंट दोनों के अलग-अलग किनारे हैं。

यदि आप दोहरे किनारे को हटाना चाहते हैं, तो नीचे के उदाहरण को देखें。

तालिका किनारे जोड़ना

border-collapse गुण सेट करता है कि क्या तालिका की किनारे एकल किनारे में जुड़ी होंगी:

Firstname Lastname
Bill Gates
Steve Jobs

इस्तरण

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

अपने आप साफ़ी करें

यदि आप केवल तालिका के चारों ओर किसी सीमा की बात करते हैं, तो केवल <table> को निर्धारित करें: border गुण:

Firstname Lastname
Bill Gates
Steve Jobs

इस्तरण

table {
  border: 1px solid black;
}

अपने आप साफ़ी करें

तालिका चौड़ाई और ऊंचाई

तालिका की चौड़ाई और ऊंचाई width और height गुण परिभाषा。

इस उदाहरण में, तालिका की चौड़ाई 100% निर्धारित की गई है और <th> एलीमेंट की ऊंचाई 50px निर्धारित की गई है:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

इस्तरण

table {
  width: 100%;
}
th {
  height: 50px;
}

अपने आप साफ़ी करें

तालिका को अर्थात एक-आधा पृष्ठ के आकार में बनाने के लिए width: 50% का उपयोग करें:

इस्तरण

table {
  width: 50%;
}
th {
  height: 70px;
}

अपने आप साफ़ी करें

स्थानांतरण लकीर

text-align गुण सेट <th> या <td> में सामग्री के स्थानांतरण लकीर के तरीके (बाईं, दाईं या बीच).

डिफ़ॉल्ट में, <th> एलीमेंट की सामग्री बीच में लकीरित होती है, जबकि <td> एलीमेंट की सामग्री बाईं ओर लकीरित होती है.

यदि आप <td> एलीमेंट की सामग्री को बीच में लकीरित करना चाहते हैं, तो text-align: center का उपयोग करें:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

इस्तरण

th {
  text-align: center;
}

अपने आप साफ़ी करें

इस उदाहरण में <th> एलीमेंट में लेखन को बाईं ओर लकीरित करने के लिए:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

इस्तरण

th {
  text-align: left;
}

अपने आप साफ़ी करें

ऊपरी लेखन लकीर

vertical-align गुण सेट <th> या <td> में सामग्री के ऊपरी लेखन लकीर के तरीके (ऊपर, नीचे या बीच).

डिफ़ॉल्ट में, तालिका के भीतरी सामग्री का ऊपरी लेखन लकीर बीच के रूप में है (थ और टीडी एलीमेंट दोनों ही हैं).

इस उदाहरण में <td> एलीमेंट के ऊपरी लेखन लकीर को नीचे जमाने के लिए निर्धारित किया गया है:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

इस्तरण

td {
  height: 50px;
  vertical-align: bottom;
}

अपने आप साफ़ी करें

तालिका भीतरी गाप

यदि आप बॉर्डर और तालिका सामग्री के बीच की दूरी को नियंत्रित करना चाहते हैं, तो <td> और <th> एलीमेंट पर padding गुण:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

इस्तरण

th, td {
  padding: 15px;
  text-align: left;
}

अपने आप साफ़ी करें

स्तरांक

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

जोड़ें border-bottom गुण, और स्तरांक और तालिका सामग्री के बीच की दूरी को नियंत्रित करने के लिए

इस्तरण

th, td {
  border-bottom: 1px solid #ddd;
}

अपने आप साफ़ी करें

संकेतक तालिका

<tr> एलीमेंट पर :hover सेलेक्टर, और संकेतक पर होते समय तालिका पद को उभारा करें

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

इस्तरण

tr:hover {background-color: #f5f5f5;}

अपने आप साफ़ी करें

स्ट्रिपिंग तालिका

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

टाइगर स्टाइल तालिका प्रभाव को प्राप्त करने के लिए nth-child() सेलेक्टर, और सभी यथाक्रमिक (या विपरीत) तालिका पदों को जोड़ें background-colorइसके लिए:

इस्तरण

tr:nth-child(even) {background-color: #f2f2f2;}

अपने आप साफ़ी करें

तालिका रंग

इस उदाहरण में <th> एलीमेंट के पृष्ठभूमि रंग और लिखाई रंग निर्धारित किया गया है:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

इस्तरण

th {
  background-color: #4CAF50;
  color: white;
}

अपने आप साफ़ी करें

रिस्पांसिव तालिका

यदि स्क्रीन बहुत छोटा है और सभी सामग्री दिखाने के लिए नहीं है, तो रिस्पांसिव तालिका स्तरांक रोलिंग बार दिखाती है:

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

<table> एलीमेंट के चारों ओर जोड़ें overflow-x:auto के भीतरी एलीमेंट (उदाहरण के लिए <div>) को रिस्पांसिव प्रभाव देने के लिए जोड़ें:

इस्तरण

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

अपने आप साफ़ी करें

टिप्पणी:OS X Lion (मैक पर) में, रोलिंग बार डिफ़ॉल्ट में छुपा हुआ है और केवल उस समय दिखाया जाता है जब इसे इस्तेमाल किया जाता है (भले "overflow:scroll" सेट किया हो)。

अधिक उदाहरण

एक फूलों की तालिका बनाना
इस उदाहरण में फूलों की तालिका को कैसे बनाया जाता है का प्रदर्शन किया गया है。
तालिका शीर्षक का स्थान निर्धारित करना
इस उदाहरण में तालिका शीर्षक को कैसे स्थापित करने का प्रदर्शन किया गया है。

CSS तालिका गुण

गुण वर्णन
border एकल विशेषता।सभी बॉर्डर अट्रिब्यूट्स को एक ही घोषणा में सेट करें।
border-collapse तालिका बॉर्डर को क्षोभ करने का निर्धारण करता है।
border-spacing संलग्न कक्षाओं के बीच बॉर्डर की दूरी निर्धारित करता है।
caption-side तालिका शीर्षक का स्थान निर्धारित करता है।
empty-cells तालिका में खाली कक्षाओं पर बॉर्डर और पृष्ठभूमि दिखाने का निर्धारण करता है।
table-layout तालिका के लिए लेयउट एलगोरिद्म सेट करने के लिए