বিসমিল্লাহির রাহমানির রাহিম
আপনারা সকলে কেমন আছেন । নিশ্চয় ভালো । আজ হাজির হলাম আপনাদের সামনে আপনাদের অতি পছন্দের টিউটোরিয়াল সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন হাজির হলাম । আসুন আমরা নতুন টিউন দেখার আগে অবশ্যই আগের টিউটোরিয়াল গুলো জ্বালাই করে নেই
সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪
সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫
সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৬
সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Cascading Style Sheets) শিখুন-৭
CSS Tables
সিএসএস টেবিল ওয়েব ডিজাইনের ক্ষেত্রে অনেক গুরুতপূর্ণ । ওয়েব ডিজাইনে সি এস এস টেবিলের বহুল ব্যবহার হয় । সি এস এস এইচটিএমএল টেবিলের একটু উন্নত ভার্শন । এখানে আপনি এইচটিএমএল টেবিলটি আরও আকর্ষণীয় করে উপস্থাপন করতে পারবেন । আসুন আমরা এখন সি এস এস টেবিল তৈরিতে নেমে পড়ি ।
Table Borders
Table Borders এটি দ্বারা আমরা আমাদের টেবিলের চারদিকের একটি পুরু একটি আবরন তৈরি করে । এটি তৈরি করতে হলে আপনাকে table,tr,th,td
- tr: আপনাকে আপনার কোড গুলো tr ব্যবহার করে লিখতে হবে । যেমনঃ<tr> <td>tuner page </td><td>tal patar sipahi </td> </tr>
- th: এটি ব্যবহার করে আমরা আমাদের হেডিং লিখব। যেমনঃ<th>TUNER PAGE </th><th > TAL PATAR SIPAHI </th>
- td:এটি আমরা p ট্যাগ এর পরিবর্তে ব্যবহার করব । যেমনঃ <td>tuner page </td>
<html>
<head>
<style type=”text/css”>
table,th,td
{ border:20px solid CornflowerBlue; }
body{background:48D1CC}
th { background-color:#6495ed; }
td { background-color:FF4500; }
th{font-size:40px;}
td {font-size:30px;}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
</table>
</body>
</html>
আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন । এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে কিছু বাড়তি আইটেম যোগ করেছি সেগুলো হচ্ছে body-background color . th- background color মানে শিরোনামের নিচের অংশ কালার , td= background color মানে প্যারাগ্রাফের নিচের অংশ কালার এবং শিরোনাম এবং প্যারাগ্রাফ এর নিচের সাইজের পরিবর্তন । body{background:48D1CC}/th{background-color:#6495ed;}/td{background-color:FF4500;}/th{font-size:40px;}/td {fontsize:30px;}
এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Collapse Borders
Collapse Borders এটি ব্যবহার করা হয় টেবিল নরমাল ভাবে উপস্থাপন করার জন্য । এখানে আমি শুধু মাত্র একটি কোড ব্যবহার করব। table{bordercollapse:collapse;} এই কোড ব্যবহার করলেই আপনার তৈরি টেবিলটি সাধারন ভাবে উপস্থাপন হবে ।
- আসুন তাহলে শুরু করা যাকঃ
- প্রথমে নোট প্যাড খুলুন
- এখন দ্রুত নিচের কোড গুলো লিখে ফেলুন
<html>
<head>
<style type=”text/css”>
table
{
border-collapse:collapse;
}
table,th,td
{ border:20px solid CornflowerBlue; }
body{background:48D1CC}
th { background-color:BlanchedAlmond; }
td { background-color:DarkGoldenRod; }
th{font-size:40px;}
td {font-size:30px;}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে কিছু বাড়তি আইটেম যোগ করেছি সেটি হচ্ছে আমি আগের উপরের পোস্টটি খালি নিচের বসিয়ে দিয়েছি আমার অনুমতি নিয়ে । অর্থ আগের সকল উপাদান বিদ্যমান আছে ।
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Table Width and Height
Table Width and Height এটি টেবিলের জন্য অনেক গুরুত্ব পূর্ণ । এটি দ্বারা আমরা আমাদের টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করব । তাহলে আসুন আমরা দেখি কি করে টেবিলের উচ্চতা এবং প্রস্থ নির্ধারণ করি ।
- প্রথমে নোট প্যাড খুলুন
- এখন দ্রুত নিচের কোড গুলো লিখে ফেলুন
<html>
<head>
<style type=”text/css”>
table,th,td
{ border:20px solid CornflowerBlue; }
body{background:48D1CC}
th { background-color:BlanchedAlmond; }
td { background-color:DarkGoldenRod; }
th{font-size:40px;}
td {font-size:30px;}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে কিছু বাড়তি আইটেম যোগ করেছি সেটি হচ্ছে আমি আগের উপরের পোস্টটি খালি নিচের বসিয়ে দিয়েছি আমার অনুমতি নিয়ে । অর্থ আগের সকল উপাদান বিদ্যমান আছে ।
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Table Text Alignment
Table Text Alignment এটি সি এস এস টেবিল তৈরির ক্ষেত্রে অনেক গুরুত্ব পূর্ণ । এটি টেবিলের টেক্সট সমূহ কিভাবে বিদ্যমান হবে তা নির্ধারণ করে । আসুন তাহলে আমরা টেক্সট সমূহের অবস্থান নির্ধারণ করি । এর আমাদের টেক্সটের কোড ব্যবহার করতে হবে সে গুলো হচ্ছে td{text-align:left; } এখানে আপনে যদি left এর বদলে right কিংবা center ব্যবহার করতে পারেন । আপনি যেটি ব্যবহার করবেন আপনার টেক্সট গুলোর অবস্থান গুলো হবে সে রুপ মানে বাম ,ডান কিংবা মধ্যে । আসুন তাহলে দেখে নেই এটির ব্যবহার।
দুই প্রকারঃ ১. horizontal alignment:
2.vertical alignment:
- horizontal alignment এর জন্য যে কোড আমাদের ব্যবহার করতে হবেঃ td{text-align:right;} এটি দ্বারা আপনি টেবিলের টেক্সট সমূহের ডান বাম কিংবা মধ্যবর্তী স্থান নির্ধারণ করবেন ।
- vertical alignment এর জন্য যে কোড আমাদের ব্যবহার করতে হবেঃ td{height:100px;vertical-align:top;}এটি দ্বারা আপনি টেবিলের টেক্সট সমূহের top, bottom, কিংবা middle নির্ধারণ করবেন সাথে আপনি আপনার টেবিলের সাইজও নির্ধারণ করতে পারবেন
- প্রথমে নোট প্যাড খুলুন
- এখন দ্রুত নিচের কোড গুলো লিখে ফেলুন
<html>
<head>
<style type=”text/css”>
table,th,td
{
border:5px solid 7CFC00;
}
th { background-color:8B4513; }
td { background-color:00008B; }
th{font-size:60px;}
td {font-size:40px;}
td
{
height:200px;
vertical-align:top;
}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
<th>BANGLADESH</th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>bangladesh </td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন । এখানে vertical alignment দেখান হয়েছে যদি আপনি horizontal alignment ব্যবহার করতে চান তাহলে শুধু মাত্র vertical alignment এর কোড সমূহের বদলে horizontal alignment এর কোড সমূহ ব্যবহার করবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Table Padding
Table Padding এটি দ্বারা প্যাড্ এর সাইজ নির্ধারণ করা হয় । আসুন তাহলে দেখি কি করে সাইজ নির্ধারণ করতে পারি । আমরা প্যাডের সাইজ নির্ধারণ করার জন্য কোড ব্যবহার করবঃ td{padding:100px;}
- প্রথমে নোট প্যাড খুলুন ।
- নিচের কোড গুলো লিখুন
| <html> | |
| <head> | |
| <style type=”text/css”> | |
| table,th,td | |
| { | |
| border:10px solid 8A2BE2; | |
| } | |
| th { background-color:DC143C; } | |
| td { background-color:DAA520; } | |
| th{font-size:60px;} | |
| td {font-size:40px;} | |
| td | |
| { | |
| padding:100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <th>TUNER PAGE </th> | |
| <th > TAL PATAR SIPAHI </th> | |
| <th>BANGLADESH</th> | |
| </tr> | |
| <tr> | |
| <td>tuner page </td> | |
| <td>tal patar sipahi </td> | |
| <td>Bangladesh </td> | |
| </tr> | |
| <tr> | |
| <td>tuner page </td> | |
| <td>tal patar sipahi</td> | |
| <td>Bangladesh </td> | |
| </tr> | |
| <tr> | |
| <td>tuner page </td> | |
| <td>tal patar sipahi</td> | |
| <td>Bangladesh </td> | |
| </tr> | |
| <tr> | |
| <td>tuner page </td> | |
| <td>tal patar sipahi</td> | |
| <td>bangladesh </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Table Color
Table Color এটি সম্পর্কে আর কি বলব টেবিল কালার আপনাদের আগেই অনেক কিছু জানিয়ে দিয়েছি । এখন আপনার আরেকটু দেখিয়ে দেই আসুন । টেবিল কালারের জন্য এখন আমরা যে কোড ব্যবহার করব সেগুলো হচ্ছে th{background-color:Red;color:800080;} । আমি এখানে শুধু মাত্র th কালার করেছি ।
- প্রথমে নোট প্যাড খুলুন ।
- নিচের কোড গুলো লিখুন
<html>
<head>
<style type=”text/css”>
table, td, th
{
border:10px solid Red;
}
th
{
background-color:Red;
color:800080;
}
th{font-size:40px;}
td {font-size:30px;}
</style>
</head>
<body>
<table>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
<th>BANGLADESH</th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>bangladesh </td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Position of the table caption
Position of the table caption এটি সম্পর্কে কি বলব টেবিল শিরোনাম অবস্থান। এখানে শুধু একটি কোড বাড়তি ব্যবহার করা হয়েছে সেটি হচ্ছে caption {caption-side:bottom;} ।
- প্রথমে নোট প্যাড খুলুন ।
- নিচের কোড গুলো লিখুন
<html>
<head>
<style type=”text/css”>
table,th,td
{
border:10px solid 8A2BE2;
}
th{font-size:60px;}
td {font-size:40px;}
caption {caption-side:bottom;}
</style>
</head>
<body>
<table border=”3″>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
<th>BANGLADESH</th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>bangladesh </td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
যাবার আগে আপনাদের কাছে একটি ছোট অনুরোধ আসুন একবার,অপারক এবং অসহায় বয়স্ক মানুষের কথা ভাবি এবং সাহায্যের হাত বাড়িয়ে দেই।আর মাত্র 1 দিন বাকি আছে সাহায্যের হাত বাড়িয়ে দেবার দোয়া করে সবাই এগিয়ে আসুন।
পরিশেষে বলতে চাই,
বেশী নয় শুধু আপনার এক দিনের হাত খরচটুকু বৃদ্ধ/বৃদ্ধা মা/বাবাকে উপহার দিন। সাময়িক হলেও অন্তত এক বিন্দু হাসিতো আমরা ফুটাতে পারব তাদের মুখে। সবার প্রতি আন্তরিক অনুরোধ এই উদ্দ্যোগটি সফল করতে আমাদের সাথে যোগদান করুন। এছাড়াও আপনাদের মূল্যবান যে কোন মতামত দিতে পারেন আমাদের। tunerpage@tunerpage.com ঠিকানায় অথবা এই পোষ্টে মন্তব্য করে।
![[█>অবিস্মরণীয় ভাবে ঢাকাতেপালিত হল টিউনারপেজের ২য় জন্মদিন <█] ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•](https://media.tunerpage.com/2013/03/532807_421204407908385_100000564883408_1442647_1235356386_n.jpg "ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•")
bahh darin to
ভাই পুরা জটিল টিউন
যাকে বলে সরল সুন্দর ।
দারুন টিউন…এইভাবে চালিয়ে যান………
খুবিই সরল & সাজান লেখা।আপনার লেকার জন্য ধন্যবাদ.
অনুরধঃhtml এর div tag & css এর লিঙ্ক নিএ কিছু লিখবেন।
navigation bar নিএ কিছু লিখবেন।
খুবিই সরল & সাজান লেখা।
অনুরধঃhtml এর div tag & css এর লিঙ্ক নিএ কিছু লিখবেন।
navigation bar নিএ কিছু লিখবেন।
অসাধারণ টিউন , খুব সুন্দর হয়ছে ।। । :) :)
অসুন্দরের মাঝে সুন্দর দেখতে পারে সেঈ যার একটি সুন্দর মন আছে :P
সহজ সরল CSS টিউটোরিয়ালের জন্য অনেক অনেক ধন্যবাদ।
আপনাকেও অসংখ্য ধন্যবাদ । সাথে থাকার জন্য :)