সিএসএস: টেবিল নকশা। নিবন্ধন উদাহরণ

পাঠ আকর্ষণীয় এবং দায়িত্বশীল - CSS এর সঙ্গে টেবিল মেকিং। এই বাণিজ্য পদ্ধতির সম্ভাব্য সব শৈলীর জ্ঞান সঙ্গে, competently করা প্রয়োজন। উপরন্তু, এটা তাদের সৃজনশীলতা দর্শক বন্ধ ভয় দেখানোর জন্য নয় সৌন্দর্য একটা ধারনা ভোগদখল করা প্রয়োজন।

টেবিল প্রায় সবকিছুই রুপান্তর করতে পারেন। সুন্দর নকশা সিএসএস টেবিল নকশা গণ্ডি টেবিলের পটভূমি, সেল পটভূমি, তাদের এবং আরো মধ্যে ফাঁক ব্যবহার রয়েছে। সবচেয়ে মৌলিক বিবেচনা করুন।

সারণী সীমানার

সিএসএস টেবিল শৈলী নকশা সবসময় একটি সীমানা (ফ্রেম) সঙ্গে একটি খেলা জড়িত। সকল ডিফল্ট টেবিল contours এবং ফ্রেম নয়। অর্থাৎ এটা 0 পিক্সেল সমান। কিন্তু এই সম্পত্তি সীমান্ত সংশোধন করা যেতে পারে।

আপনি সম্পূর্ণ টেবিল জন্য বাইরের ফ্রেম উল্লেখ করতে পারেন:

টেবিল {সীমান্ত: 3px কঠিন কালো; }

সাইটটি এই শৈলী ব্যবহার করে সব টেবিলে এই লাইন ধন্যবাদ কালো ফ্রেম হয়। নোট শুধুমাত্র সীমান্ত প্রান্ত উপর, কিন্তু টেবিল ভিতরে না যে। সেল লাইন এবং ফ্রেমের জন্য অন্যথায় নির্দিষ্ট করা হয়েছে।

ম, TD {সীমান্ত: 3px কঠিন কালো;}

বেধ এবং রং, আপনি যে কোনো নির্দিষ্ট করতে পারেন। যখন কোষ splicing মনে রাখবেন যে সীমানা দ্বিগুণ নেই।

শব্দ একটি কঠিন একটানা নিবন্ধন উল্লেখ করে। আপনি অন্য মান নির্দিষ্ট করতে পারেন।

এটা সবচেয়ে বেশি যে, কঠিন ফ্রেম ব্যবহার করা হয় যেমন আরো আকর্ষণীয় দেখায় এবং সাইটের প্রধান বিষয়বস্তু থেকে মনোযোগ বিভ্রান্ত করে না।

সীমান্ত সম্পত্তি বোর্ডে নির্দিষ্ট করা যেতে পারে। সীমানা শুধুমাত্র উপরের, নীচে জন্য সেট করা যাবে, বাম বা ডান দিকে। কারণ কিছু কিছু ক্ষেত্রে তা একবার সমগ্র টেবিল জন্য ফ্রেমে সঙ্গে একটি সম্ভবপর বিকল্প নয়।

টেবিল {সীমান্ত-শীর্ষ: 1px কঠিন লাল; }

তাই আপনি যদি শুধুমাত্র টেবিলের শীর্ষ জন্য ফ্রেমে সেট করতে পারেন। একইভাবে অন্য কোন দল, পরিবর্তে শুধু শীর্ষ লিখতে: ডান, বাম বা নীচে।

টেবিল হেডার

ছক হেডার ট্যাগ <ক্যাপশন> ব্যবহার নির্ধারণ করা যাবে। এই ট্যাগটি ফাইন টিউনিং জন্য বৈশিষ্ট্যাবলী অনেকটা রেজিস্টার CSS এ হতে পারে না। কারণ এটি উপাদান আপনি যেভাবে চান রণকৌশল করা সম্ভব সিএসএস টেবিল নকশা ভাল।

এই শিরোনাম (যেমন "সারণি 1" হিসাবে) বই একটি আদর্শ হিসাবে একই ভাবে প্রদর্শিত হয়।

আপনি শিরোনাম এবং সম্পত্তি ক্যাপশন-সাইড (উপরে বা নীচে) এর অবস্থান নির্দিষ্ট করতে পারেন। বাম সমতলতা বা ডান সম্পত্তি টেক্সট প্রান্তিককরণ দ্বারা সংজ্ঞায়িত করা হয়।

পটভূমি টেবিল

টেবিলের পটভূমি কোনো রঙ বা প্যাটার্ন হতে পারে। রঙ একটি সম্পত্তি পটভূমি-রঙ সেট করে। বৈশিষ্ট্য বক্তৃতায় ব্যবহার সঙ্গে সম্পূর্ণরূপে সুসংগত নাম থাকবে না। এটা অনেক বার সংরক্ষণকারী সমাধা।

রঙ নাম, এবং বিভিন্ন এনকোডিং হিসাবে নির্দিষ্ট করা যেতে পারে। উপরন্তু, আপনি নিম্নলিখিত নির্দিষ্ট করতে পারেন:

• স্বচ্ছ - স্বচ্ছ।
• উত্তরাধিকারী - রঙ পিতা বা মাতা উপাদান যে একই হয়।
• প্রাথমিক - ডিফল্ট।

স্বচ্ছতা সঙ্গে অপশন সেই ক্ষেত্রে যেখানে সিএসএস ফাইলে টেক্সট সমস্ত টেবিল এক রঙের তৈরি করা হয় ব্যবহার করা যেতে পারে, কিন্তু এই ক্ষেত্রে কোন প্রয়োজন নেই।

উপরন্তু, পটভূমি একটি চিত্র হতে পারে। শৈলী নির্ধারিত পটভূমি চিত্র সম্পত্তিতে এটি করার জন্য,। পথ এই মত হল:

URL ( 'URL টি')

ফাইল পাথ পারেন আপেক্ষিক বা পরম হতে পারে।

আরো জটিল ভরাট একটি গ্রেডিয়েন্ট সঙ্গে সম্পন্ন করা যেতে পারে:

• রৈখিক-গ্রেডিয়েন্ট ();
• রশ্মীয়-গ্রেডিয়েন্ট ();
• পুনরাবৃত্তি-রৈখিক-গ্রেডিয়েন্ট () এবং পুনরায়-রশ্মীয়-গ্রেডিয়েন্ট () - গ্রেডিয়েন্ট পুনরাবৃত্তি।

পটভূমি সেল

সাধারণভাবে একটি ব্যাকগ্রাউন্ড ছাড়াও, আপনি কলাম বা সারিতে একটি ডোরাকাটা পটভূমি নির্দিষ্ট করতে পারেন। সম্পত্তি নিবন্ধনের জন্য, খুব প্রায়ই ব্যবহার করা হয়, কারণ তথ্য পড়তে লাইনের সহজ চাক্ষুষ বিচ্ছেদ।

আবর্তনে ছাড়াও, এবং আপনি একটি নির্দিষ্ট কলাম বা সারি সংখ্যা নির্দিষ্ট করতে পারেন। ভালো উদাহরণস্বরূপ:

• TR: n তম সন্তান (এমনকি) {...} - ইন্টারলেসড উল্লেখ;
• TR: n তম সন্তান (1) {...} - একটি নির্দিষ্ট সারি বৈশিষ্ট্য ইঙ্গিত;
• TD: n তম সন্তান (এমনকি) {...} - কলাম পর্যায়ক্রমে একটি ইঙ্গিত;
• TD: n তম সন্তান (1) {...} - একটি নির্দিষ্ট কলামের বৈশিষ্ট্য একটি ইঙ্গিত।

ক্রম এবং সংখ্যার সুনির্দিষ্ট করা যেতে পারে এছাড়া - প্রথম (TD: প্রথম সন্তান) অথবা গত (TD: শেষ সন্তান)।

কোষের মধ্যে ফাঁক

CSS এ টেবিলের নকশা আপনি কোষের মধ্যে শূণ্যস্থান অপসারণ করতে পারবেন। ডিফল্টরূপে তারা হয়। উদাহরণস্বরূপ, যদি আপনি গণ্ডি মধ্যে দূরত্ব সেটিং ছাড়া টেবিলে ফ্রেম সেট, তা এখানে এই ফলাফল হতে হবে।

একমত, এটা খুব সুন্দর না দেখায় এবং এটা পড়তে সুবিধাজনক নয়। ব্যবহারকারীরা এই কারণ দৃষ্টিতে লহরী থাকবে। এই ফাঁক সরান ঠিক এরকম টেবিল শৈলী একটি লাইন লিখে হতে পারে:

সীমান্তে পতন: পতন

কিন্তু এমনও হয় যে, দূরত্ব, বিপরীত, বৃদ্ধি করা উচিত নয়। অধিকন্তু, ফাঁক আকার কলাম মধ্যে এবং লাইনের মধ্যে হিসাবে নির্দিষ্ট করা যেতে পারে। নির্দেশ করতে একটি মান (পরিবর্তে ভেঙ্গে):

সীমান্তে পতন: পৃথক

কিন্তু এই ধরনের কর্ম ইঙ্গিত হবে এটি কোষ আলাদা করা প্রয়োজন। কারণ এটা তাদের ভাগ ছিল, অতিরিক্ত সম্পত্তি নির্দেশিত:

সীমান্তে মধ্যবর্তী ফাঁকা স্থান: 20px।

আপনি সারি এবং কলাম মধ্যে একটি ভিন্ন দূরত্ব নির্দিষ্ট করতে চান, এটা দুটি জিনিস ইঙ্গিত:

সীমান্তে মধ্যবর্তী ফাঁকা স্থান: 10px20px।

ব্রাউজারে পার্থক্য

মনে রাখবেন যে সিএসএস নকশা টেবিল ব্রাউজারের উপর নির্ভর আলাদা হতে পারে, রাখুন। বিশেষ করে খারাপ পুরোনো সংস্করণের সাথে মামলা, যে CSS এ প্রবর্তিত সমর্থিত নয়।

উপরে ডিজিটাল মান ফ্রেম নেমে এর একটি উদাহরণ।

এই উদাহরণস্বরূপ, ধ্রুবক জন্য ফ্রেমের বেধ।

সীমানা শৈলী এছাড়াও ব্যাপকভাবে পৃথক।

অতএব, উন্নয়ন সবসময় বিভিন্ন ব্রাউজারে ফলাফল দেখতে।

CSS এ নকশা টেবিল ব্রাউজারের প্রকার চেক করা বাঞ্ছনীয়। বিশেষ করে ব্যবহার করা বড় সমস্যা Internet Explorer এর পুরোনো সংস্করণগুলি ব্যবহারকারীদের করা যাবে।

খুব উন্নত বিকাশকারী, সম্পূর্ণ ভিন্ন সিএসএস ফাইল সংযুক্ত হওয়ার জন্য ব্রাউজারের উপর নির্ভর করতে পারেন। আর কেউ প্রত্যেকটিতে একটি চেক বা কিছু বিশেষ শৈলী (ক্লাস) করে তোলে।

সর্বাধিক সমস্যার ছায়া থেকে উঠা।

সিএসএস: ছক ফর্ম্যাটের উদাহরণগুলি

রেজিস্ট্রেশন বেশ ভিন্নতা হতে পারে। এটা সব সমগ্র সাইট এবং তার নকশা উপর নির্ভর করে। সকল মিলিত ও বর্ণাঢ্য রং দিতে হবে। এছাড়াও এটি একটি মহান ভূমিকা এবং গন্ধ ডেভেলপার করে তোলে। সৌন্দর্যের সেন্স সব ভিন্ন।

আমরা বিভিন্ন টেবিল কিছু উদাহরণ দেব। উপরোক্ত চিত্রে ঢাল ব্যবহার দেখায় এবং পটভূমির রঙ এবং সীমানা সহ খেলা এবং খেলার।

অনেক সুন্দর ঝরঝরে নকশা যে চোখ ব্যবহারকারীদের কাটা করা হবে না আকর্ষণীয় উদাহরণ হবে। এই প্রতিমূর্তি প্রায় কোনো পরিস্থিতি উপযুক্ত।

প্রান্ত বৃত্তাকার করা যেতে পারে। এটি বেশ সুন্দর দেখায়।

উপসংহার

যেহেতু আপনি দেখতে পারেন, CSS এর টেবিল চেহারাও জন্য অনেক সরঞ্জাম। প্রতিটি পরামিতি এছাড়াও মান বিকল্প একটি বিশাল পরিমাণ। আপনি একসাথে এটি সব ব্যবহার করেন, তাহলে শ্রেষ্ঠ তৈরি করতে পারেন। বিশেষ করে যদি আপনি না করে অভিযোজিত নকশা সব ব্রাউজারের জন্য।

নকশা জিনিস - প্রভাব সঙ্গে এটা অতিমাত্রায় না। সবকিছু সংযম মধ্যে সম্পন্ন করতে হবে। প্রথমে, লেআউট পরীক্ষা এবং অবিলম্বে তাদের সব জ্ঞান ব্যবহার করতে চান। টেবিল ফলে oversaturated সম্পত্তি। এই ত্রুটিগুলি এড়ানোর চেষ্টা করুন।

অধিকন্তু, কিছু প্যারামিটার একে অপরের সাথে হস্তক্ষেপ করতে পারে। উদাহরণস্বরূপ, সেখানে নির্দিষ্ট করার কোন প্রয়োজন নেই পটভূমির রঙ , টেবিলের যখন যদি এখনও ব্যাকগ্রাউন্ড ইমেজ, যা নিদিষ্ট রঙ ওভারল্যাপ হবে সেট করা হয়।