सीएसएस तालिका-लेआउट गुण तालिका की पंक्तियों, स्तंभों और कक्षों को बिछाने के लिए ब्राउज़र द्वारा उपयोग किए जाने वाले एल्गोरिथम को परिभाषित करने के लिए है। इसके जरिए आप टेबल लेआउट को कंट्रोल कर सकते हैं।
सिंटैक्स
CSS टेबल-लेआउट प्रॉपर्टी का सिंटैक्स इस प्रकार है -
Selector {
table-layout: /*value*/
} निम्नलिखित उदाहरण CSS टेबल-लेआउट प्रॉपर्टी को दर्शाते हैं -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 2em;
display: inline-block;
border: 1px solid black;
}
td {
border: 1px solid black;
}
#one {
table-layout: auto;
width: auto;
}
#one + table {
table-layout: fixed;
width: 100px;
}
</style>
</head>
<body>
<h2>Table Layouts and its working in CSS</h2>
<table id="one">
<caption>Cricketers</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
<table>
<caption>Cricketers</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
width: 50%;
box-shadow: inset 0 0 14px orange;
}
td {
box-shadow: inset 0 0 5px lime;
white-space: nowrap;
outline: thin dotted;
}
table {
border: 3px solid black;
table-layout: fixed;
width: 100%;
}
</style>
</head>
<body>
<div>
<table>
<caption>Demo Caption</caption>
<tr>
<td>ABCD</td>
</tr>
<tr>
<td></td>
<td>EFGH</td>
</tr>
<tr>
<td></td>
<td>IJKLM NOPQRST</td>
<td></td>
</tr>
</table>
</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
