Tables का उपयोग किसी भी Information को Structured Form में वर्णन करने के लिए किया जाता है. CSS आपको 5 Properties प्रदान करती है. जिनका उपयोग करके आप Table को बहुत अच्छे से Design कर सकते हो.
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Border Collapse Property हमें बताती है कि क्या ब्राउज़र को संलग्न सीमाओं की उपस्थिति को नियंत्रित करना चाहिए जो एक-दूसरे को छूते हैं या क्या प्रत्येक सेल को अपनी Style बनाए रखना चाहिए.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#5F9EA0;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#8A2BE2;
padding:10px;
}
</style>
</head>
<body>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
Border Spacing Property उस Space को निर्दिष्ट करती है जो Adjacent Cells को अलग करती है. यह या तो एक या दो Values ले सकता है ये लंबाई की इकाइयाँ होनी चाहिए.
जब आप 1 Value को Define करते है तो पहली Value Horizontal और दुसरी Value Vertical Apply होती है.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.one {
border-collapse:separate;
width:410px;
border-spacing:12px;
}
table.two {
border-collapse:separate;
width:410px;
border-spacing:12px 52px;
}
</style>
</head>
<body>
<table class="one" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>
Caption Side Propertyआपको यह निर्दिष्ट करने की अनुमति देती है कि टेबल के संबंध में <caption> Element की सामग्री को कहां रखा जाना चाहिए. तालिका जो निम्न मानों को सूचीबद्ध करती है. इस Property में चार Value top, bottom, left, right हो सकती हैं.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style="width:400px; border:1px solid red;">
<caption class="top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid red;">
<caption class="bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid red;">
<caption class="left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid red;">
<caption class="right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>
Empty-cells Property Empty Cells को Hide या Show करने के लिए उपयोग की जाती है. इसका ज्यादातर उपयोग Table के साथ किया जाता है क्योंकि Table मे कई Cells होते है और कुछ समय में कुछ Cells Empty होते है और उन्हे Hide करने की जरूरत होती है.
यह Property चार प्रकार की Values को Accept कर सकती है जैसे Show, Hide, Initial और Inherit लेकिन अधिकतर दो Value दिखाई जाती है और Hide होती है.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.empty{
width:400px;
border-collapse:separate;
empty-cells:hide;
}
td.empty{
padding:5px;
border-style:solid;
border-width:1px;
border-color:#B22222;
}
</style>
</head>
<body>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
</body>
</html>
Table-layout CSS Property Table Cells, Rows, और Columns को बाहर करने के लिए उपयोग किए जाने वाले Algorithm को Specifies करती है.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.auto {
table-layout: auto
}
table.fixed{
table-layout: fixed
}
</style>
</head>
<body>
<table class="auto" border="1" width="100%">
<tr>
<td width="20%">11111111111111111111111111111</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table class="fixed" border="1" width="100%">
<tr>
<td width="20%">122222222</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
</body>
</html>