টিউটোরিয়াল

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

লিখেছেন টিজে

তাল পাতার সিপাহি

14/08/2012

493

About
Latest Posts

তাল পাতার সিপাহি

সকল সময় নতুন কিছু জানার ইচ্ছায় ছিলাম কিন্তুকিছুই জানা হয়নি জীবনে ..................

Latest posts by তাল পাতার সিপাহি (see all)

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

আপনারা সকলে কেমন আছেন । নিশ্চয় ভালো । আজ হাজির হলাম আপনাদের সামনে আপনাদের অতি পছন্দের টিউটোরিয়াল সহজ বাংলায় সি এস এস/ 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>

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 এটি টেবিলের জন্য অনেক গুরুত্ব পূর্ণ । এটি দ্বারা আমরা আমাদের টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করব । তাহলে আসুন আমরা দেখি কি করে টেবিলের উচ্চতা এবং প্রস্থ নির্ধারণ করি ।

প্রথমে নোট প্যাড খুলুন
এখন দ্রুত নিচের কোড গুলো লিখে ফেলুন

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 নির্ধারণ করবেন সাথে আপনি আপনার টেবিলের সাইজও নির্ধারণ করতে পারবেন

প্রথমে নোট প্যাড খুলুন
এখন দ্রুত নিচের কোড গুলো লিখে ফেলুন

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>

<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) শিখুন-৮ ஜ۩۞۩ஜ ♪♫•

Position of the table caption

Position of the table caption এটি সম্পর্কে কি বলব টেবিল শিরোনাম অবস্থান। এখানে শুধু একটি কোড বাড়তি ব্যবহার করা হয়েছে সেটি হচ্ছে caption {caption-side:bottom;} ।

প্রথমে নোট প্যাড খুলুন ।
নিচের কোড গুলো লিখুন

table,th,td

{

border:10px solid 8A2BE2;

}
th{font-size:60px;}
td {font-size:40px;}

caption {caption-side:bottom;}

</style>
</head>
<body>

<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 ঠিকানায় অথবা এই পোষ্টে মন্তব্য করে।

মুল পোস্ট আছে এখানেঃ-

ক্লিক করুন

মোবাইল থেকে কম ব্যান্ডউইড খরচ করে দেখতে ভিসিট করুনঃ-

ক্লিক করুন

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

10 মন্তব্য

Saifur Rahman 28/09/2012 at 08:00

bahh darin to

উত্তর
জি এম পারভেজ@liTu 25/09/2012 at 21:19

ভাই পুরা জটিল টিউন

উত্তর
এন.এম_রূপকথা® 25/09/2012 at 01:23

যাকে বলে সরল সুন্দর ।

উত্তর
মুক্ত বিহঙ্গ (রিজভী) 29/08/2012 at 06:50

দারুন টিউন…এইভাবে চালিয়ে যান………

উত্তর
tanver267 16/08/2012 at 14:31

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

উত্তর
tanver267 16/08/2012 at 14:30

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

উত্তর
সাইভার ওয়ার্ল্ড 15/08/2012 at 10:41

অসাধারণ টিউন , খুব সুন্দর হয়ছে ।। । :) :)

উত্তর
- তাল পাতার সিপাহি 15/08/2012 at 19:41
  
  অসুন্দরের মাঝে সুন্দর দেখতে পারে সেঈ যার একটি সুন্দর মন আছে :P
  
  উত্তর
Saifur Rahman 15/08/2012 at 08:50

সহজ সরল CSS টিউটোরিয়ালের জন্য অনেক অনেক ধন্যবাদ।

উত্তর
- তাল পাতার সিপাহি 15/08/2012 at 19:37
  
  আপনাকেও অসংখ্য ধন্যবাদ । সাথে থাকার জন্য :)
  
  উত্তর

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

তাল পাতার সিপাহি

Latest posts by তাল পাতার সিপাহি (see all)

সহজ বাংলায় সি এস এস/ 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

Collapse Borders

Table Width and Height

Table Text Alignment

Table Padding

Table Color

Position of the table caption

10 মন্তব্য

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

টিউয়ারপেজের এক্সক্লুসিভ টিউন

এই ৮টি শব্দ ভুলেও সার্চ করবেন না গুগলে !

এই একটি শব্দ ভুলেও টাইপ করবেন না ফেসবুকে

ব্যাটারি সেভ করুন এন্ড্রয়েড অ্যাপসের মাধ্যমে!

জানুন অ্যান্ড্রয়েড মোবাইল সম্পর্কে কিছু টিপস!

এন্ড্রয়েড ব্যবহার করেন? জানুন ১২ টি সুবিধাজনক কৌশল!

আপনার পিসির প্রসেসর এর গতি বাড়াবেন কীভাবে জেনে নিন

জেনে নিন স্মার্টফোনের পাসওয়ার্ড প্যাটার্ন ভুলে গেলে কী করবেন !

টিউনারপেজের নতুন টিউন সমুহ

জনপ্রিয় টিউন বিভাগ

Website Design এর আদি অন্ত, পর্ব-২

Latest posts by তাল পাতার সিপাহি (see all)

CSS Tables

Table Borders

Collapse Borders

Table Width and Height

Table Text Alignment

Table Padding

Table Color

Position of the table caption

নিচের টিউনগুলো লখ্য করুন, কাজে লাগতেও পারে

10 মন্তব্য

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

টিউয়ারপেজের এক্সক্লুসিভ টিউন

টিউনারপেজের নতুন টিউন সমুহ

জনপ্রিয় টিউন বিভাগ