উদাহরণ ১: সাধারণ টেবিল

একটি সাধারণ টেবিল যা ছাত্রদের তথ্য প্রদর্শন করে।

কোড:

<table>
    <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>
        

ব্যাখ্যা: <th> হেডার এবং <td> ডেটা সেল নির্দেশ করে।

উদাহরণ ২: হেডার, বডি এবং ফুটার সহ টেবিল

টেবিলে <thead>, <tbody>, এবং <tfoot> ব্যবহার।

কোড:

<table>
    <thead>
        <tr>
            <th>পণ্য</th>
            <th>মূল্য</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>বই</td>
            <td>২০০ টাকা</td>
        </tr>
        <tr>
            <td>পেন</td>
            <td>১০ টাকা</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>মোট</td>
            <td>২১০ টাকা</td>
        </tr>
    </tfoot>
</table>
        

ব্যাখ্যা: <thead>, <tbody>, এবং <tfoot> টেবিলের সেকশন আলাদা করে।

উদাহরণ ৩: স্প্যান সহ টেবিল

কলস্প্যান এবং রোস্প্যান ব্যবহার করে সেল একত্রিত করা।

কোড:

<table>
    <tr>
        <th colspan="2">ছাত্রের তথ্য</th>
    </tr>
    <tr>
        <td>নাম</td>
        <td>রাহিম</td>
    </tr>
    <tr>
        <td rowspan="2">বিষয়</td>
        <td>গণিত</td>
    </tr>
    <tr>
        <td>বিজ্ঞান</td>
    </tr>
</table>
        

ব্যাখ্যা: colspan কলাম এবং rowspan সারি একত্রিত করে।

উদাহরণ ৪: সিএসএস দিয়ে টেবিল স্টাইলিং

উপরের টেবিলগুলো সিএসএস দিয়ে স্টাইল করা হয়েছে। স্টাইলিং কোড:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 10px 0;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #3498db;
        color: white;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    tr:hover {
        background-color: #e6f3ff;
    }
</style>
        

ব্যাখ্যা: সিএসএস ব্যবহার করে টেবিলে বর্ডার, প্যাডিং, হেডার ব্যাকগ্রাউন্ড এবং হোভার ইফেক্ট যোগ করা হয়েছে।