CSS ট্যাবল

সিএসএস ব্যবহার করে এইচটিএমএল টেবিলের দেখার মান অনেক ভালো করে দেয়:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Tencent Building, High-tech Park, Nanshan District
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Park Ridge Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District

আপনার নিজের হাতে পরীক্ষা করুন

Shenzhen

টেবিল বর্তনী border এক্সট্রিনজুক্স

উদাহরণমূলকভাবে, <table>, <th> এবং <td> ইলেকট্রনকে কালো বর্তনী নির্বাচন করা হয়:

Firstname Lastname
Bill Gates
Steve Jobs

প্রদর্শন

table, th, td {
  border: 1px solid black;
}

আপনার নিজের হাতে পরীক্ষা করুন

নোট:উপরোক্ত উদাহরণটির টেবিলটি দ্বিতীয়ত্বের বর্তনী রয়েছে। এটা কারণ টেবিল, <th> এবং <td> ইলেকট্রনগুলোকে পৃথকভাবে বর্তনী রয়েছে।

সম্পূর্ণ স্ক্রিন টেবিল

কিছু কিছুতে, উপরের টেবিলটি অত্যন্ত ছোট দেখায়। যদি আপনি একটি সম্পূর্ণ স্ক্রিনকে আবর্ণন করার টেবিল চান, তবে <table> ইলেকট্রনকে width: 100% নির্বাচন করুন:

প্রদর্শন

table {
  width: 100%;
}

আপনার নিজের হাতে পরীক্ষা করুন

দ্বিতীয়ত্বের বর্তনী

প্রত্যহরণ, উপরের টেবিলটি দ্বিতীয়ত্বের বর্তনী রয়েছে। এটা কারণ টেবিল এবং th, td ইলেকট্রনগুলোকে পৃথকভাবে বর্তনী রয়েছে।

যদি আপনি দ্বিতীয়ত্বের বর্তনী না চান, তবে নিচের উদাহরণটি দেখুন。

টেবিল বর্তনী মিশ্রণ

border-collapse এক্সট্রিনজুক্স সেট করুন কিভাবে টেবিল বর্তনীগুলোকে একটি একক বর্তনীতে মিশ্রণ করা হবে:

Firstname Lastname
Bill Gates
Steve Jobs

প্রদর্শন

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

আপনার নিজের হাতে পরীক্ষা করুন

যদি আপনি চান যে, টেবিলের চারপাশে মাত্র একটি হোরিজন্টাল বর্তনী থাকে, তবে <table> ইলেকট্রনকে কেবল বর্তনী নির্বাচন করুন: border বৈশিষ্ট্য:

Firstname Lastname
Bill Gates
Steve Jobs

প্রদর্শন

table {
  border: 1px solid black;
}

আপনার নিজের হাতে পরীক্ষা করুন

টেবিল প্রস্থত্ব ও উচ্চতা

টেবিলের প্রস্থত্ব ও উচ্চতা width এবং height এক্সট্রিনজুক্স নির্বাচন

উদাহরণমূলকভাবে, টেবিলের প্রস্থত্বকে 100% করা হয়, <th> ইলেকট্রনটির উচ্চতা 50px করা হয়:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

প্রদর্শন

table {
  width: 100%;
}
th {
  height: 50px;
}

আপনার নিজের হাতে পরীক্ষা করুন

যদি আপনি চান যে, টেবিলটি পৃষ্ঠার অর্ধেক জায়গা অধিকার করে, তবে width: 50% ব্যবহার করুন:

প্রদর্শন

table {
  width: 50%;
}
th {
  height: 70px;
}

আপনার নিজের হাতে পরীক্ষা করুন

হোরিজন্টাল অ্যালাইন

text-align এক্সট্রিনজুক্স সেট করুন <th> অথবা <td> ইলেকট্রনগুলোর কনটেন্টের হোরিজন্টাল অ্যালাইন (ডান, বাম অথবা কেন্দ্রস্থল)।

ডিফল্টভাবে, <th> ইলেকট্রনের কনটেন্ট কেন্দ্রস্থল অ্যালাইন করা হয়, আবার <td> ইলেকট্রনের কনটেন্ট ডানদিকে অ্যালাইন করা হয়।

যদি আপনি চান <td> ইলেকট্রনের কনটেন্টকেও কেন্দ্রস্থল অ্যালাইন করা হোক, তবে text-align: center ব্যবহার করুন:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

প্রদর্শন

th {
  text-align: center;
}

আপনার নিজের হাতে পরীক্ষা করুন

উদাহরণমূলকভাবে, <th> ইলেকট্রনের টেক্সটকে ডানদিকে অ্যালাইন করা হয়:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

প্রদর্শন

th {
  text-align: left;
}

আপনার নিজের হাতে পরীক্ষা করুন

ভিক্টরিক্যাল অ্যালাইন

vertical-align এক্সট্রিনজুক্স সেট করুন <th> অথবা <td> ইলেকট্রনগুলোর কনটেন্টের ভিক্টরিক্যাল অ্যালাইন (উপর, নিচ অথবা কেন্দ্রস্থল)।

ডিফল্টভাবে, টেবিলের কনটেন্টের ভিক্টরিক্যাল অ্যালাইন কেন্দ্রস্থল (থম্যান এবং <td> ইলেকট্রনগুলোকে কেন্দ্রস্থল করা হয়)।

উদাহরণমূলকভাবে, <td> ইলেকট্রনের ভিক্টরিক্যাল টেক্সট অ্যালাইন নিচের দিকে সজ্জিত করা হয়:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

প্রদর্শন

td {
  height: 50px;
  vertical-align: bottom;
}

আপনার নিজের হাতে পরীক্ষা করুন

ট্যাবল ইন্টারন্যাপস

সাইডবার এবং ট্যাবল কন্টেন্টের মধ্যে সাপ্তাহিক সময় নিয়ন্ত্রণ করতে, <td> এবং <th> ইলেকট্রনের উপর padding বৈশিষ্ট্য:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

প্রদর্শন

th, td {
  padding: 15px;
  text-align: left;
}

আপনার নিজের হাতে পরীক্ষা করুন

হোরিজন্টাল বিভাজক

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

থেকে <th> এবং <td> প্রদত্ত করা হয়: border-bottom বৈশিষ্ট্য, এবং হোরিজন্টাল বিভাজক সৃষ্টি করুন:

প্রদর্শন

th, td {
  border-bottom: 1px solid #ddd;
}

আপনার নিজের হাতে পরীক্ষা করুন

হল ট্যাবল

সংযোজন হল, <tr> ইলেকট্রনের উপর ব্যবহার করে, মাউস হটার সময় ট্যাবল সারির উপর আলোকপাত করুন: :hover

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

প্রদর্শন

tr:hover {background-color: #f5f5f5;}

আপনার নিজের হাতে পরীক্ষা করুন

স্ট্রিপড ট্যাবল

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

জোড়া বালুকা ট্যাবল প্রভাব সৃষ্টির জন্য nth-child() পছন্দ করা হয়, এবং সকল ক্ষুদ্র (বা অসমান) ট্যাবল সারি কালার পরিবর্তন করুন: background-colorহল:

প্রদর্শন

tr:nth-child(even) {background-color: #f2f2f2;}

আপনার নিজের হাতে পরীক্ষা করুন

ট্যাবল রঙ

উদাহরণতে, <th> ইলেকট্রনের ব্যাকগ্রাউন্ড কালার এবং লিখিত কালার নির্ধারণ করা হয়েছে:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

প্রদর্শন

th {
  background-color: #4CAF50;
  color: white;
}

আপনার নিজের হাতে পরীক্ষা করুন

প্রতিক্রিয় ট্যাবল

যদি স্ক্রিন খুব ছোট হয়ে যায় এবং সমস্ত বিষয় দেখা যায় না, তবে প্রতিক্রিয় ট্যাবলটি হোরিজন্টাল রোলার দেখাবে:

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

ট্যাবল <table> ইলেকট্রন চারপাশে overflow-x:auto কন্টেনার ইলেকট্রন (যেমন <div>) ব্যবহার করে, প্রতিক্রিয় প্রভাব সৃষ্টি করুন:

প্রদর্শন

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

আপনার নিজের হাতে পরীক্ষা করুন

মন্তব্য:OS X Lion (ম্যাকে) এবং অন্যান্য অপারেটিং সিস্টেমগুলিতে, রোলার ডিফল্টভাবে লুকিয়ে থাকে এবং যখন ব্যবহার করা হয় তখনই দেখা যায় (যদিও "overflow:scroll" সংযোজন করা হয়েছে)。

আরও উদাহরণ

একটি সুন্দর ট্যাবল তৈরি করুন
এই উদাহরণটি কিভাবে সুন্দর ট্যাবল তৈরি করা যায় তা দেখায়。
ট্যাবল শিরোনামের স্থান নির্ধারণ
এই উদাহরণটি ট্যাবল শিরোনাম কিভাবে স্থাপন করা যায় তা দেখায়。

CSS ট্যাবল বৈশিষ্ট্য

বৈশিষ্ট্য বর্ণনা
border 简写属性。在一条声明中设置所有边框属性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
table-layout ট্যাবলের জন্য লেজাউট এলগরিদম সেট করুন。