ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

10
492

বিসমিল্লাহির রাহমানির রাহিম

আপনারা সকলে কেমন আছেন । নিশ্চয় ভালো । আজ হাজির হলাম আপনাদের সামনে আপনাদের অতি পছন্দের টিউটোরিয়াল  সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন  হাজির হলাম । আসুন আমরা নতুন টিউন দেখার আগে অবশ্যই আগের টিউটোরিয়াল গুলো জ্বালাই করে নেই

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting


সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪ 

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৬

সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Cascading Style Sheets) শিখুন-৭

ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

CSS Tables


সিএসএস  টেবিল ওয়েব ডিজাইনের ক্ষেত্রে অনেক গুরুতপূর্ণ । ওয়েব ডিজাইনে সি এস এস টেবিলের বহুল ব্যবহার হয় । সি এস এস এইচটিএমএল টেবিলের একটু উন্নত ভার্শন । এখানে আপনি এইচটিএমএল টেবিলটি আরও আকর্ষণীয় করে উপস্থাপন করতে পারবেন । আসুন আমরা এখন সি এস এস টেবিল তৈরিতে নেমে পড়ি ।

ufo  ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•Table Bordersufo  ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•


 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;} 

এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

 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 লিখবেন ।
  • এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে কিছু বাড়তি আইটেম যোগ করেছি সেটি হচ্ছে আমি আগের উপরের পোস্টটি খালি নিচের বসিয়ে দিয়েছি আমার অনুমতি নিয়ে । অর্থ আগের সকল উপাদান বিদ্যমান আছে ।
  • এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ

 ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

 

GIF --   ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•Table Width and HeightGIF --   ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•


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 লিখবেন ।
  • এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে কিছু বাড়তি আইটেম যোগ করেছি সেটি হচ্ছে আমি আগের উপরের পোস্টটি খালি নিচের বসিয়ে দিয়েছি আমার অনুমতি নিয়ে । অর্থ আগের সকল উপাদান বিদ্যমান আছে ।
  • এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

brown teddy bear emoticons 13 Cute Brown Teddy Emoticons  ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•Table Text Alignmentbrown teddy bear emoticons 18 Cute Brown Teddy Emoticons  ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•


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 এর কোড সমূহ ব্যবহার করবেন ।
  • এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।
  • এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫• 

GIF --   ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•Table PaddingGIF --   ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•


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 লিখবেন ।
  • এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন
  • এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

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 লিখবেন ।
  • এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন
  • এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
 ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

milk carton emoticon 5 Milk Carton Emoticon  ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•Position of the table captionmilk carton emoticon 5 Milk Carton Emoticon  ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•


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 লিখবেন ।
  • এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন
  • এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

 

ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

 

যাবার আগে আপনাদের কাছে একটি ছোট অনুরোধ  আসুন একবার,অপারক এবং অসহায় বয়স্ক মানুষের কথা ভাবি এবং সাহায্যের হাত বাড়িয়ে দেই।আর মাত্র 1 দিন বাকি আছে সাহায্যের হাত বাড়িয়ে দেবার দোয়া করে সবাই এগিয়ে আসুন।

পরিশেষে বলতে চাই,
বেশী নয় শুধু আপনার এক দিনের হাত খরচটুকু বৃদ্ধ/বৃদ্ধা মা/বাবাকে উপহার দিন। সাময়িক হলেও অন্তত এক বিন্দু হাসিতো আমরা ফুটাতে পারব তাদের মুখে। সবার প্রতি আন্তরিক অনুরোধ এই উদ্দ্যোগটি সফল করতে আমাদের সাথে যোগদান করুন। এছাড়াও আপনাদের মূল্যবান যে কোন মতামত দিতে পারেন আমাদের। tunerpage@tunerpage.com ঠিকানায় অথবা এই পোষ্টে মন্তব্য করে।

মুল পোস্ট আছে এখানেঃ-
মোবাইল থেকে কম ব্যান্ডউইড খরচ করে দেখতে ভিসিট করুনঃ-
thankyou emoticons Super Large Thankyou Bears Emoticons  ஜ۩۞۩ஜ ♪♫সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Table) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•
টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

10 মন্তব্য

  1. খুবিই সরল & সাজান লেখা।আপনার লেকার জন্য ধন্যবাদ.
    অনুরধঃhtml এর div tag & css এর লিঙ্ক নিএ কিছু লিখবেন।
    navigation bar নিএ কিছু লিখবেন।

  2. খুবিই সরল & সাজান লেখা।
    অনুরধঃhtml এর div tag & css এর লিঙ্ক নিএ কিছু লিখবেন।
    navigation bar নিএ কিছু লিখবেন।

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

ten − 6 =