There is no item in the cart. If you want to buy, Please click here.
সিএসএস(CSS) টিউটোরিয়াল
এই টিউটোরিয়ালটি আপনাকে সিএসএস ব্যবহার করে কীভাবে এইচটিএমএল টেবিলের বিভিন্ন বৈশিষ্ট্য সেট করতে হয় তা শিখিয়ে দেবে। আপনি একটি টেবিলের নিম্নলিখিত বৈশিষ্ট্যগুলি সেট করতে পারেন -
The border-collapse Propertyসীমানা-ধসের সম্পত্তি
এই বৈশিষ্ট্যের দুটি মান ভেঙে পৃথক হতে পারে। নিম্নলিখিত উদাহরণ দুটি মান ব্যবহার করে
উদাহরণ
<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:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
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>
সীমানা-ব্যবধানের সম্পত্তিটি দূরত্ব নির্দিষ্ট করে যা সংলগ্ন ঘরগুলি পৃথক করে '। সীমানা এটি এক বা দুটি মান নিতে পারে; এগুলির দৈর্ঘ্যের একক হওয়া উচিত।
যদি আপনি একটি মান সরবরাহ করেন তবে এটি উভয় উল্লম্ব এবং অনুভূমিক সীমানায় প্রযোজ্য। অথবা আপনি দুটি মান নির্দিষ্ট করতে পারেন, সেক্ষেত্রে প্রথমটি অনুভূমিক ব্যবধানকে বোঝায় এবং দ্বিতীয়টি উল্লম্ব ব্যবধানকে বোঝায়
উদাহরণ
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</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>
ক্যাপশন-পাশের বৈশিষ্ট্য আপনাকে <ক্যাপশন> উপাদানটির সামগ্রীটি টেবিলের সাথে সম্পর্কের ক্ষেত্রে কোথায় রাখা উচিত তা নির্দিষ্ট করতে দেয়। সারণী যা নিম্নলিখিত মানগুলি তালিকাভুক্ত করে।
এই বৈশিষ্ট্যের উপরের, নীচে, বাম বা ডান চারটি মানের একটি হতে পারে। নিম্নলিখিত উদাহরণ প্রতিটি মান ব্যবহার করে
উদাহরণ
<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 black;">
<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 black;">
<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 black;">
<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 black;">
<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>
খালি-কক্ষের বৈশিষ্ট্যটি নির্দেশ করে যে কোনও সামগ্রী ছাড়াই কোনও ঘরে কোনও সীমানা প্রদর্শন করা উচিত।
এই সম্পত্তিটির তিনটি মান হতে পারে - শো, গোপন বা উত্তরাধিকারসূত্রে।
<টেবিল> উপাদানটিতে খালি ঘরগুলির সীমানা লুকানোর জন্য ব্যবহৃত খালি ঘরগুলির সম্পত্তি এখানে।
উদাহরণ
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</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>
The table-layout Propertyটেবিল-বিন্যাস সম্পত্তি
সারণী-বিন্যাসের সম্পত্তিটি আপনাকে ব্রাউজারে কীভাবে কোনও টেবিল রেন্ডার করা বা আউট দেওয়া উচিত তা নিয়ন্ত্রণে সহায়তা করতে পারে।
এই সম্পত্তিটির তিনটি মানের একটি হতে পারে: স্থির, অটো বা উত্তরাধিকারী।
নিম্নলিখিত বৈশিষ্ট্যগুলি এই বৈশিষ্ট্যগুলির মধ্যে পার্থক্য দেখায়
উদাহরণ
<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%">1000000000000000000000000000</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%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>
