কী টেকঅ্যাওয়ে
- এলিমেন্টরের কোর প্লাগইন বা এলিমেন্টর প্রোতে কোনো টেবিল উইজেট নেই, তাই এলিমেন্টরের একটি টেবিল এইচটিএমএল কোড, কন্টেইনার, একটি টেবিল প্লাগইন বা একটি অ্যাডন উইজেট থেকে আসে।
- এইচটিএমএল উইজেট হল প্লাগইন ছাড়াই এলিমেন্টরে একটি টেবিল তৈরি করার উপায়: টেবিল, tr, th এবং td ট্যাগ পেস্ট করুন এবং সীমানা এবং প্যাডিংয়ের জন্য একটি ছোট শৈলী ব্লক যোগ করুন।
- একটি গ্রিড ধারক একটি টেবিল অনুকরণ করতে পারে, কিন্তু একটি 3 কলাম, 4 সারি টেবিলের জন্য 12টি পৃথক পাঠ্য সম্পাদক উইজেট প্রয়োজন এবং ফলাফলটি একটি বাস্তব HTML টেবিল নয়।
- TablePress 3.4 টেবিলপ্রেস টেবিল নামে তার নিজস্ব এলিমেন্টর উইজেট যোগ করে এবং এর টেবিলগুলি দর্শকদের দ্বারা সাজানো, অনুসন্ধান করা এবং পৃষ্ঠা করা যেতে পারে।
- মাস্টার অ্যাডনস ডায়নামিক টেবিল উইজেট এলিমেন্টর প্যানেলের হেডার এবং বডি সেল থেকে একটি বাস্তব HTML টেবিল তৈরি করে এবং 768px চওড়া পর্যন্ত ডিভাইসে কার্ডে সারি স্ট্যাক করে।
এলিমেন্টরে একটি টেবিল তৈরি করতে আপনার একটি সমাধান প্রয়োজন, কারণ এলিমেন্টর একটি টেবিল উইজেট পাঠায় না। যে চারটি কাজ করে তা হল আপনার নিজস্ব কোড সহ একটি HTML উইজেট, একটি গ্রিড কন্টেইনার, একটি টেবিলপ্রেস টেবিল এবং একটি অ্যাডন উইজেট যেমন ডায়নামিক টেবিল.
আমরা Elementor 4.3-এ চারটি উপায়ের প্রতিটিতে একটি টেবিল তৈরি করেছি এবং একটি ডেস্কটপে এবং একটি ফোনে প্রতিটির দিকে তাকিয়েছি।
বিষয়বস্তুর সারণী
Elementor একটি টেবিল উইজেট আছে?
না। এলিমেন্টর প্যানেলে "টেবিল" অনুসন্ধান করুন এবং একমাত্র অন্তর্নির্মিত ফলাফল হল বিষয়বস্তুর সারণী এবং মূল্য সারণী, এবং উভয়ই এলিমেন্টর প্রো-এর অন্তর্গত। কেউই ডেটার সারি এবং কলাম তৈরি করে না। মূল্য সারণী হল একটি একক মূল্য নির্ধারণের কার্ড, এবং বিষয়বস্তুর সারণী পৃষ্ঠার শিরোনামগুলিকে তালিকাভুক্ত করে৷।
আপনি কোন উপায় ব্যবহার করা উচিত?
টেবিলটি কত বড় এবং কে পরে এটি সম্পাদনা করবে তা বেছে নিন।
| পথ | প্লাগইন প্রয়োজন | জন্য সেরা | সতর্ক থেকো |
|---|---|---|---|
| এইচটিএমএল উইজেট | কোনোটিই নয় | একটি ছোট টেবিল, HTML পড়ে এমন কেউ সম্পাদনা করেছেন | প্রতিটি পরিবর্তন মানে কোড সম্পাদনা |
| গ্রিড ধারক | কোনোটিই নয় | বোতাম বা ছবি প্রয়োজন যে কয়েকটি ঘর | প্রতি কক্ষে একটি উইজেট, এবং এটি একটি বাস্তব টেবিল নয় |
| টেবিলপ্রেস | টেবিলপ্রেস | লম্বা টেবিল, CSV বা এক্সেল আমদানি, বাছাই এবং অনুসন্ধান | স্টাইলিং এলিমেন্টরের বাইরে ঘটে |
| টেবিল উইজেট | একটি অ্যাডন যেমন মাস্টার অ্যাডঅন | সময়সূচী, বিশেষ শীট এবং মূল্য তালিকা আপনি Elementor এ সম্পাদনা করেন | ডায়নামিক টেবিলে কোন বাছাই বা আমদানি নেই |
উপায় 1: HTML উইজেট দিয়ে এলিমেন্টরে একটি টেবিল তৈরি করুন
এটি একটি প্লাগইন ছাড়া Elementor এ একটি টেবিল তৈরি করার উপায়। আপনি একটি প্লেইন এইচটিএমএল টেবিল লেখেন এবং এলিমেন্টর এটিকে প্রিন্ট করে।
- Elementor দিয়ে পৃষ্ঠাটি সম্পাদনা করুন এবং টেনে আনুন এইচটিএমএল একটি পাত্রে উইজেট।
- নিচের কোডটি পেস্ট করুন এইচটিএমএল কোড ক্ষেত্র।
- ট্যাগ মধ্যে পাঠ্য পরিবর্তন করুন। প্রতিটি
trএকটি সারি, প্রতিটিthএকটি হেডার সেল এবং প্রতিটিtdশরীরের কোষ। - ক্লিক করুন প্রকাশ করুন.
<table class="simple-table">
<thead>
<tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
<tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
<tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
</tbody>
</table>
<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>
টেবিল হালকা এবং এটি একটি বাস্তব table উপাদান, যা সার্চ ইঞ্জিন এবং স্ক্রিন রিডার বোঝে। যদিও এটা বজায় রাখা কঠিন। একটি ক্লায়েন্ট যে একটি সারি যোগ করতে চায় তাকে HTML সম্পাদনা করতে হবে এবং একটি অনুপস্থিত ক্লোজিং ট্যাগ লেআউটটি ভেঙে দেয়।
উপায় 2: একটি গ্রিড ধারক দিয়ে একটি টেবিল তৈরি করুন
একটি গ্রিড ধারক সারি এবং কলামে উইজেটগুলি রাখে, তাই এটি একটি টেবিলের মতো দেখতে পারে। এটি একটি ছোট ব্লকের জন্য উপযুক্ত যেখানে সেলগুলি বোতাম, আইকন বা ছবি ধারণ করে।
- একটি ধারক যোগ করুন এবং সেট করুন ধারক বিন্যাস প্রতি গ্রিড.
- সেট কলাম আপনার প্রয়োজনীয় কলামের সংখ্যা এবং সারি সারি সংখ্যা, শিরোনাম অন্তর্ভুক্ত।
- সেট ফাঁক 0 থেকে তাই কোষ স্পর্শ করে।
- একটা টানুন টেক্সট এডিটর প্রতিটি ঘরে উইজেট করুন এবং এর পাঠ্য টাইপ করুন।
- প্রতিটি উইজেট খোলা উন্নত, তারপর যোগ করুন প্যাডিং এবং একটি 1px সীমানা। হেডার সেলগুলিকে একটি পটভূমির রঙ দিন।
উইজেট গণনা দ্রুত বৃদ্ধি পায়। তিনটি কলাম এবং চারটি সারির জন্য ইতিমধ্যেই 12টি উইজেট প্রয়োজন, এবং একটি 5 বাই 10 টেবিলের প্রয়োজন 50। সীমানা দ্বিগুণ যেখানে ঘরগুলি মিলিত হয় যদি না আপনি প্রতিটি পাশে সুর করেন। আউটপুটটি ডিভের একটি সেট, তাই একটি স্ক্রিন রিডার এটিকে টেবিল হিসাবে ঘোষণা করে না। মুষ্টিমেয় ঘরের জন্য এই পদ্ধতিটি রাখুন।
উপায় 3: এলিমেন্টরে একটি টেবিলপ্রেস টেবিল যোগ করুন
টেবিলপ্রেস হল একটি টেবিল প্লাগইন যেখানে 600,000 টিরও বেশি সক্রিয় ইনস্টল রয়েছে। আপনি টেবিলটি তার নিজস্ব অ্যাডমিন স্ক্রিনে তৈরি করুন এবং তারপরে এটিকে এলিমেন্টরে রাখুন। এটি দীর্ঘ টেবিলের জন্য সঠিক বাছাই, কারণ এটি এক্সেল, CSV, HTML এবং JSON ফাইল আমদানি করে এবং দর্শকদের সারিগুলির মাধ্যমে বাছাই, অনুসন্ধান এবং পৃষ্ঠা করতে দেয়।
- ইনস্টল করুন এবং সক্রিয় করুন টেবিলপ্রেস.
- যাও টেবিলপ্রেস, তারপর নতুন যোগ করুন একটি টেবিল টাইপ করতে, বা আমদানি একটি ফাইল আপলোড করতে।
- টেবিলটি সংরক্ষণ করুন এবং এর আইডি নোট করুন।
- Elementor দিয়ে আপনার পৃষ্ঠা সম্পাদনা করুন এবং অনুসন্ধান করুন টেবিলপ্রেস টেবিল। উইজেটটি টেনে আনুন এবং আপনার টেবিলটি বেছে নিন টেবিল ড্রপডাউন।
- আপনি যদি একটি শর্টকোড পছন্দ করেন তবে টেনে আনুন শর্টকোড উইজেট এবং লিখুন
[table id=1 /]আপনার নিজের আইডি দিয়ে।
উইজেটে কোনো স্টাইল ট্যাব নেই, তাই রঙ এবং ফন্ট টেবিলপ্রেস সেটিংস এবং আপনার নিজস্ব CSS থেকে আসে। আমাদের 390px টেস্ট ফোনে পাঁচ-কলামের টেবিলটিও ডান প্রান্ত অতিক্রম করে চলে গেছে যতক্ষণ না আমরা চালু করি অনুভূমিক স্ক্রোলিং টেবিলের সেটিংসে।
উপায় 4: একটি টেবিল উইজেট ব্যবহার করুন
একটি অ্যাডন উইজেট পুরো কাজটি এলিমেন্টরের ভিতরে রাখে। আপনি প্যানেলে সেল টাইপ করুন এবং স্টাইল ট্যাবে টেবিলটি স্টাইল করুন, একইভাবে আপনি অন্য যেকোনো উইজেটের সাথে কাজ করেন। আমরা এখানে মাস্টার অ্যাডঅন থেকে ডায়নামিক টেবিল উইজেট ব্যবহার করব।
- মাস্টার অ্যাডঅন ইনস্টল করুন এবং এটি পরীক্ষা করুন ডায়নামিক টেবিল এর উইজেট সেটিংসে সুইচ করা আছে।
- Elementor দিয়ে পৃষ্ঠাটি সম্পাদনা করুন, অনুসন্ধান করুন ডায়নামিক টেবিল এবং এটি টেনে আনুন। এটি একটি নমুনা চার-কলাম টেবিল দিয়ে শুরু হয়।
- খোলা টেবিল হেড. একটি যোগ করুন টেবিল হেডার সেল প্রতি কলাম এবং প্রতিটি টাইপ করুন কলামের নাম.
- খোলা টেবিল বডি. একটি যোগ করুন টেবিল বডি সেল প্রতি সেল, বাম থেকে ডানে। চালু কর নতুন সারি? প্রথমটির পরে প্রতিটি সারির প্রথম ঘরে।
- কোষ একত্রিত করতে, একটি ঘর খুলুন অপশন ট্যাব এবং সেট কলাম স্প্যান বা সারি স্প্যান.
- শিরোনাম, বডি এবং স্ট্রাইপ স্টাইল করুন শৈলী ট্যাব, তারপর প্রকাশ করুন।
প্রতিটি কক্ষ পাঠ্য, একটি আইকন বা একটি চিত্র ধারণ করতে পারে এবং পাঠ্য ক্ষেত্রগুলি গতিশীল ট্যাগ গ্রহণ করে। প্রতিক্রিয়াশীল টেবিল? সেটিংস বিভাগে ডিফল্টরূপে চালু থাকে, তাই 768px পর্যন্ত প্রশস্ত ডিভাইসগুলিতে প্রতিটি সারি লেবেল হিসাবে কলামের নাম সহ একটি কার্ডে পরিণত হয়।
আপনি কিছু ইনস্টল করার আগে এটি দেখতে চান? দ্য গতিশীল টেবিল পৃষ্ঠা তিনটি লাইভ টেবিল এবং আটটি ডেমো লেআউট রয়েছে যা আপনি খুলতে পারেন।
ডায়নামিক টেবিল ফাইল বাছাই, অনুসন্ধান, পৃষ্ঠা বা আমদানি করে না। প্রতিটি সেল হাতে টাইপ করা হয়, যা 30টি কক্ষের জন্য ঠিক এবং 300টির জন্য ক্লান্তিকর, তাই বড় ডেটা সেটের জন্য ওয়ে 3 এ ফিরে যান।
ভুল এড়াতে
- টেক্সট এডিটর উইজেটে টেবিল তৈরি করা। এটিতে কোন টেবিল বোতাম নেই, তাই আপনি যেভাবেই হোক এর পাঠ্য ট্যাবে HTML লিখবেন। HTML উইজেট হল সেই কোডের জন্য পরিষ্কার জায়গা।
- ডেটার জন্য একটি মূল্য উইজেট ব্যবহার করা। মূল্য টেবিল এবং মূল্য সারণী উইজেটগুলি একটি বাই বোতাম সহ পরিকল্পনার জন্য তৈরি করা হয়। তারা তথ্য সারি জন্য ভুল আকৃতি।
- ফোন ভুলে যাওয়া। একটি পাঁচ-কলামের টেবিল খুব কমই একটি 390px স্ক্রিনে ফিট করে। সারিগুলি স্ট্যাক করা উচিত, পাশে স্ক্রোল করা উচিত বা একটি কলাম হারানো উচিত কিনা তা নির্ধারণ করুন।
- উইজেট থেকে 50টি ঘর তৈরি করা। যদি গ্রিড পদ্ধতিতে প্রায় এক ডজনেরও বেশি উইজেটের প্রয়োজন হয়, তাহলে একটি বাস্তব টেবিলে যান।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আমি কিভাবে একটি প্লাগইন ছাড়া Elementor এ একটি টেবিল তৈরি করব?
পৃষ্ঠায় HTML উইজেট টেনে আনুন এবং টেবিল, tr, th এবং td ট্যাগ দিয়ে তৈরি টেবিল কোড পেস্ট করুন, পাশাপাশি সীমানা এবং প্যাডিংয়ের জন্য একটি ছোট শৈলী ব্লক। কয়েকটি কক্ষের জন্য আপনি গ্রিডে একটি ধারক সেট করতে পারেন এবং প্রতিটি ঘরে একটি টেক্সট এডিটর উইজেট রাখতে পারেন।
Elementor Pro একটি টেবিল উইজেট আছে?
নং এলিমেন্টর প্রো মূল্য সারণী এবং বিষয়বস্তুর সারণী যোগ করে এবং কেউই ডেটার সারি এবং কলাম তৈরি করে না। একটি ডেটা টেবিলের জন্য আপনার এখনও HTML, একটি টেবিল প্লাগইন যেমন টেবিলপ্রেস বা একটি অ্যাডন উইজেট প্রয়োজন৷।
Elementor এ একটি টেবিল যোগ করার সবচেয়ে সহজ উপায় কি?
একটি টেবিলের জন্য আপনি Elementor এর ভিতরে সম্পাদনা করবেন, একটি টেবিল উইজেট সবচেয়ে সহজ, কারণ কোষ এবং স্টাইলিং প্যানেলে বসে। একটি দীর্ঘ টেবিলের জন্য যা ইতিমধ্যেই একটি স্প্রেডশীট হিসাবে বিদ্যমান, ফাইলটি টেবিলপ্রেসে আমদানি করা এটি টাইপ করার চেয়ে দ্রুত।
আমি কি এক্সেল থেকে এলিমেন্টরে একটি টেবিল কপি করতে পারি?
সরাসরি উইজেটে নয়। শীটটিকে একটি CSV বা এক্সেল ফাইল হিসাবে সংরক্ষণ করুন এবং এটি টেবিলপ্রেসে আমদানি করুন, তারপর সেই টেবিলটিকে টেবিলপ্রেস টেবিল উইজেটের সাথে রাখুন। একটি টেবিল উইজেটে ঘরের একটি ব্লক আটকানো এটি সব একটি ঘরে রাখে।
এলিমেন্টর টেবিল কি প্রতিক্রিয়াশীল?
এটা নির্ভর করে কিভাবে টেবিল তৈরি করা হয়েছে তার উপর। একটি এইচটিএমএল টেবিল তার কলাম রাখে এবং আপনি CSS যোগ না করলে ফোনে ওভারফ্লো হতে পারে। ডায়নামিক টেবিল 768px এবং নীচে কার্ডগুলিতে সারি স্ট্যাক করে। টেবিলপ্রেসের প্রতিটি টেবিলের সেটিংসে একটি অনুভূমিক স্ক্রোলিং বিকল্প রয়েছে।
চূড়ান্ত চিন্তা
এলিমেন্টরে একটি টেবিল তৈরি করার চারটি উপায় রয়েছে। একটি ছোট টেবিলের জন্য এইচটিএমএল উইজেট ব্যবহার করুন এবং প্লাগইন নেই, বোতাম বা ছবি সহ কয়েকটি কক্ষের জন্য একটি গ্রিড ধারক, দীর্ঘ বা আমদানি করা ডেটার জন্য টেবিলপ্রেস এবং একটি টেবিল উইজেট ব্যবহার করুন যখন আপনি এলিমেন্টরের ভিতরে টেবিলটি সম্পাদনা এবং স্টাইল করতে চান।
যদি শেষটি ফিট হয়, ডায়নামিক টেবিল এর অংশ মাস্টার অ্যাডনস এর অন্যান্য উইজেট সহ।
সম্পর্কিত পড়া
