লিস্ট এবং টেবিল

🔖 লিস্ট এবং টেবিল (Lists & Tables)

ওয়েবসাইটে অনেক সময় ডেটাকে পয়েন্ট আকারে বা ছক/টেবিল আকারে দেখাতে হয়। এর জন্য HTML এ লিস্ট এবং টেবিল ট্যাগ রয়েছে।

📌 HTML লিস্ট (Lists)

লিস্ট প্রধানত দুই প্রকার: ১. Unordered List (<ul>): বুলেট পয়েন্ট আকারে দেখায়। ২. Ordered List (<ol>): ১, ২, ৩ বা A, B, C ইত্যাদি ক্রমানুসারে দেখায়।

যেকোনো লিস্টের আইটেম বোঝাতে <li> (List Item) ট্যাগ ব্যবহার করা হয়।

lists.html


<!-- Unordered List -->
<h3>বাজারের তালিকা:</h3>
<ul>
  <li>চাল</li>
  <li>ডাল</li>
  <li>তেল</li>
</ul>
 
<!-- Ordered List -->
<h3>কাজের সিরিয়াল:</h3>
<ol>
  <li>সকালে ঘুম থেকে ওঠা</li>
  <li>ব্যায়াম করা</li>
  <li>কাজ শুরু করা</li>
</ol>

📌 HTML টেবিল (Tables)

ডেটাকে সারি (Row) এবং কলাম (Column)-এ সাজানোর জন্য <table> ট্যাগ ব্যবহার করা হয়।

টেবিল তৈরিতে সাধারণত নিচের ট্যাগগুলো লাগে:

<table>: মূল টেবিল কন্টেইনার।
<tr> (Table Row): টেবিলের সারি বা লাইন।
<th> (Table Heading): টেবিলের হেডার (বোল্ড টেক্সট)।
<td> (Table Data): টেবিলের ভেতরের ডেটা বা সেল।

table.html


<table border="1">
  <tr>
    <th>নাম</th>
    <th>বয়স</th>
    <th>পেশা</th>
  </tr>
  <tr>
    <td>আরিফ</td>
    <td>২৫</td>
    <td>ডেভেলপার</td>
  </tr>
  <tr>
    <td>রহিম</td>
    <td>৩০</td>
    <td>ডিজাইনার</td>
  </tr>
</table>

💡

প্রকৃত প্রোজেক্টে আমরা টেবিলের ডিজাইন সুন্দর করার জন্য border="1" অ্যাট্রিবিউট ব্যবহার না করে CSS ব্যবহার করি।