CSS table-layout প্রপার্টি ব্রাউজার द्वारा টেবিলের রো, কলাম এবং সেল লে আউট করার জন্য ব্যবহৃত অ্যালগরিদম সংজ্ঞায়িত করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি টেবিল লে আউট নিয়ন্ত্রণ করতে পারেন।
সিনট্যাক্স
CSS table-layout প্রপার্টির সিনট্যাক্স নিম্নরূপ:
Selector { table-layout: /*মান*/ }
নিচের উদাহরণগুলো CSS table-layout প্রপার্টি উদাহরণ দেয়:
উদাহরণ
<!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>
আউটপুট
এটি নিচের আউটপুট দেয়:
