सीएसएस टेबल्स
HTML तालिका के रूप को CSS के साथ बहुत बेहतर बनाया जा सकता है:
| कंपनी | संपर्क | देश |
|---|---|---|
| अल्फ्रेड का फीडिंग बॉक्स | मारिया एंडर्स | जर्मनी |
| बर्गलंड का सुपरमार्केट | क्रिस्टीना बर्गलुंड | स्वीडन |
| मोंटेज़ुमा शॉपिंग सेंटर | फ्रांसिस्को चांग | मेक्सिको |
| गंभीर व्यापार | रोलैंड मेंडेल | ऑस्ट्रिया |
| द्वीप व्यापार | हेलेन बेनेट | यूके |
| शाही भोजन | फिलिप क्रैमर | जर्मनी |
| लाफिंग बैचस वाइनसेलर्स | योशी तन्नामुरी | कनाडा |
| एकत्रित खाद्य गोदाम | जियोवानी रोवेली | इटली |
टेबल बॉर्डर
CSS में टेबल बॉर्डर निर्दिष्ट करने के लिए, borderप्रॉपर्टी का उपयोग करें।
नीचे दिया गया उदाहरण <तालिका>, <वें>, और <td> तत्वों के लिए एक काली सीमा निर्दिष्ट करता है:
उदाहरण
table, th, td {
border: 1px solid black;
}
पूर्ण-चौड़ाई तालिका
ऊपर दी गई तालिका कुछ मामलों में छोटी लग सकती है। यदि आपको ऐसी तालिका की आवश्यकता है जो पूरी स्क्रीन (पूर्ण-चौड़ाई) तक फैली हो, width: 100%तो <तालिका> तत्व में जोड़ें:
उदाहरण
table {
width: 100%;
}
डबल बॉर्डर
ध्यान दें कि उपरोक्त उदाहरणों की तालिका में दोहरी सीमाएं हैं। ऐसा इसलिए है क्योंकि दोनों टेबल और <th> और <td> तत्वों की अलग-अलग सीमाएं हैं।
दोहरी सीमाओं को हटाने के लिए, नीचे दिए गए उदाहरण पर एक नज़र डालें।
तालिका सीमाओं को संक्षिप्त करें
संपत्ति सेट करती है कि क्या तालिका की border-collapseसीमाओं को एक सीमा में संक्षिप्त किया जाना चाहिए:
उदाहरण
table
{
border-collapse: collapse;
}
यदि आप केवल तालिका के चारों ओर एक सीमा चाहते हैं, तो केवल border<तालिका> के लिए गुण निर्दिष्ट करें:
उदाहरण
table
{
border: 1px solid black;
}