আমি ব্রাউজার উইন্ডোর কেন্দ্রে স্থির প্রস্থের একটি টেবিলটি দেখাতে চাই। এখন আমি ব্যবহার
<table width="200" align="center">
তবে ভিজ্যুয়াল স্টুডিও 2008 এই লাইনে সতর্কতা দেয়:
বৈশিষ্ট্য 'সারিবদ্ধ' পুরানো বলে বিবেচিত হয়। একটি নতুন নির্মাণ সুপারিশ করা হয়।
একই লেআউটটি পেতে টেবিলের জন্য আমার কী সিএসএস শৈলী প্রয়োগ করা উচিত?
উত্তর:
তাত্ত্বিকভাবে স্টিভেন ঠিক বলেছেন :
সিএসএস ব্যবহার করে একটি সারণি কেন্দ্রের "সঠিক" উপায়। বাম এবং ডান মার্জিন সমান হলে মাপসই ব্রাউজারগুলির টেবিলগুলি কেন্দ্র করা উচিত। এটি সম্পাদন করার সহজতম উপায় হ'ল "অটো" তে বাম এবং ডান মার্জিন সেট করা। সুতরাং, কেউ স্টাইল শীটে লিখতে পারে:
table
{
margin-left: auto;
margin-right: auto;
}
তবে এই উত্তরের শুরুতে উল্লিখিত নিবন্ধটি আপনাকে একটি টেবিলকে কেন্দ্র করে অন্য সমস্ত উপায়ে দেয়।
একটি মার্জিত সিএসএস ক্রস ব্রাউজার সমাধান: এটি এমএসআইই 6 (কুইর্কস এবং স্ট্যান্ডার্ড), মজিলা, অপেরা এবং এমনকি নেটস্কেপ 4.x উভয় ক্ষেত্রেই কোনও স্পষ্ট প্রশস্ততা নির্ধারণ না করে কাজ করে:
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class="centered">
<table>
…
</table>
</div>
সরল। আই 6 এবং ততোধিক উপায়ে আপনার টেবিলটি "মার্জিন: 0 অটো;" যদি কেবল পৃষ্ঠাটি "স্ট্যান্ডার্ড" মোডে রেন্ডার হয়। এটি ঘটতে আপনার একটি বৈধ ডক্টাইপ ঘোষণা যেমন দরকার need
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
বা
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
সত্য, আই 5.5 এবং নীচে এখনও টেবিলটি কেন্দ্র করতে অস্বীকার করবে তবে সম্ভবত আপনি এটি নিয়ে বেঁচে থাকতে পারেন, বিশেষত যদি পৃষ্ঠাটি টেবিলটি প্রান্তিককরণের সাথে বদ্ধ থাকে তবে। আমি মনে করি এখন পর্যন্ত আই 5.5 এবং এর নীচের ব্যবহারকারীরা কিছু অদ্ভুত দেখাচ্ছে ওয়েবসাইটগুলিতে মোটামুটি ব্যবহার করেছেন - তবে আপনাকে এখনও নিশ্চিত করতে হবে যে সেই ভিজ্যুয়াল গ্লিটগুলি আপনার সাইটের ব্যবহারযোগ্য না করে দেয়।
শুভ কোডিং!
সম্পাদনা: দুঃখিত, আমার সম্ভবত এটি উল্লেখ করা উচিত যে আপনার আইই 6 পেতে এবং "স্ট্যান্ডার্ড" রেন্ডারিং মোডে আপ করার জন্য "কঠোর" ডকুমেন্টের দরকার নেই। আমি বুঝতে পেরেছি যে এটি উপরের পোস্ট করা ডক্টাইপ উদাহরণগুলি থেকে সম্ভবত এটি মনে হয়। উদাহরণস্বরূপ, এই ডক্টাইপ ঘোষণা অবশ্যই সমানভাবে কাজ করবে:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
যদিও এটি আজকের বিশ্বে ধর্মবিরোধী হতে পারে - অতীতে আপনি নিম্নলিখিত নন সিএসএস কোডটি করবেন। এটি আজকের ব্রাউজারগুলি পর্যন্ত এবং সমস্ত কিছুতে কাজ করে তবে - যেমনটি আমি বলেছি - এটি আজকের বিশ্বে ধর্মবিরোধী:
<center>
<table>
...
</table>
</center>
আপনার যা দরকার তা হ'ল এটি একটি উপায় যা আপনি কোনও টেবিলকে কেন্দ্র করতে চান এবং ব্যক্তিটি একটি পুরানো ব্রাউজার ব্যবহার করছে। তারপরে টেবিলের চারপাশে "<<<>" কমান্ড সন্নিবেশ করুন। অন্যথায় - CSS ব্যবহার করুন।
আশ্চর্যজনকভাবে - যদি আপনি BODY অঞ্চলে সমস্ত কিছু কেন্দ্র করতে চান - আপনি কেবলমাত্র মানটি ব্যবহার করতে পারেন
text-align: center;
সিএসএস কমান্ড এবং আইই 8-তে (কমপক্ষে) এটি টেবিলগুলি সহ পৃষ্ঠার সমস্ত কিছুকে কেন্দ্র করবে।
style="text-align:center;"
(আমি মনে করি)
বা আপনি কেবল এটিকে উপেক্ষা করতে পারেন, এটি এখনও কাজ করে
এই কাজ করা উচিত:
<div style="text-align:center;">
<table style="margin: 0 auto;">
<!-- table markup here. -->
</table>
</div>
আমি কেবল এটি শিখছি এবং অবশেষে আমার জন্য যা কাজ করেছিল তা হ'ল প্রথমে তিনটি সারি দিয়ে একটি টেবিল তৈরি করা। বাম এবং ডান সারিগুলির জন্য মার্জিনটি 50% এ সেট করুন। তারপরে কেন্দ্রের "টেবিল সারি" এর "টেবিল ডেটা" এর ভিতরে একটি একক সারি, নির্দিষ্ট প্রস্থের টেবিলটি রাখুন।
<style>
.abc {
text-align: center;
}
</style>
<table class="abc">
<tr>
<td>Item1</td>
<td>Item2</td>
</tr>
</table>
মূলত, এটি কাজ করে,
<table align="center">
...
তবে, আপনি এটি সিএসএস ব্যবহার করে আরও ভাল উপায়ে করতে পারেন এবং এটি CSS ব্যবহারের জন্য আরও ভাল পদ্ধতির হতে পারে কারণ এটি কোনও ওয়েব পৃষ্ঠায় গতিশীল আচরণ সরবরাহ করে এবং প্রতিক্রিয়াশীল।
<table style="text-align:center;">
এছাড়াও, যদি আপনাকে কোনও পৃষ্ঠায় কেবল টেবিল প্রদর্শন করতে হয় তবে আপনি কেবল বডি ট্যাগ সারিবদ্ধকরণের সাথে কেবল নীচের চিত্রের মতো যেতে পারেন,
<body style="text-align:center;">
<table>
...
</table>
আপনি যদি অন্য কোনও পরামর্শ চান তবে আমাকে জানান। অবশ্যই এই আপনাকে সাহায্য করবে। এছাড়াও বুটস্ট্র্যাপ বৈশিষ্ট্যগুলি ব্যবহার করা এটি আরও সহজ এবং ইন্টারেক্টিভ হবে।
ডিভ স্টাইল যুক্ত করুন:
width: fit-content;