ওয়েব ডিজাইন (পর্ব ০৮) সিম্পল টেবিল, টেবিল লেআউট, রো কলাম মার্জ, সিএসএস দিয়ে টেবিল

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো, সিম্পল টেবিল, টেবিল লেআউট, রো কলাম মার্জ, টেবিল লেআউট।

টেবিলঃ(TABLE)

আমরা কোনো দরকারি তথ্য শেয়ার করার জন্য সারণি আকারে প্রকাশ করে থাকি। এই সারণি বানানো দেখবো HTML and CSS দিয়ে।

আমরা সর্বপ্রথম শুধু HTML দিয়ে টেবিল বানানো দেখবো উপরের ফটো এর মতো।

<table border="1">
<tr>
    <th>No.</th>
    <th>Full Name</th>
    <th>Position</th>
    <th>Country</th>
</tr>
<tr>
    <td>01</td>
    <td>Bill Gates</td>
    <td>Founder Micorosoft</td>
    <td>American</td>
</tr>
<tr>
    <td>02</td>
    <td>Steve Jobs</td>
    <td>Founder Apple</td>
    <td>American</td>
</tr>
<tr>
    <td>03</td>
    <td>Larry Page</td>
    <td>Founder Google</td>
    <td>American</td>
</tr>
<tr>
    <td>04</td>
    <td>Mark Zuckerberg</td>
    <td>Founder Facebook</td>
    <td>California</td>
</tr>
</table>

border="1" এট্রিবিউট না দিলে বর্ডার দেখা যাবেনা।সিএসএস ব্যবহার করলে এই এট্রিবিউট দেওয়ার প্রয়োজন নাই।

রো কলাম মার্জ দিয়ে টেবিলঃ(Row column merge with table)

রো কে মার্জ করার জন্য rowspan এট্রিবিউট এবং কলাম কে মার্জ করার জন্য colspan  এট্রিবিউট ব্যবহার করা হয়।

নিচের কোড গুলো খেয়াল করুন

<table border="1">
<tr>
    <th rowspan="2">Gender</th>
    <th colspan="2">Average</th>
    <th rowspan="2">Rad eyes</th>
</tr>
<tr>
    <th>Height</th>
    <th>Weight</th>
</tr>

<tr>
    <th>Male</th>
    <td>1.8</td>
    <td>0.005</td>
    <td>45%</td>
</tr>

<tr>
    <th>Female</td>
    <td>1.6</td>
    <td>0.003</td>
    <td>40%</td>
</tr>
</table>

টেবিল লেআউটঃ(Table Layout)

টেবিল দিয়ে ওয়েবসাইট লেআউট তৈরি করার জন্য এখানে শুধু HTML ব্যবহার করা হয়েছে।

নিচের কোড গুলো খেয়াল করুন কিভাবে উপরের মতো লেআউট তৈরি করা যায়।

<table border="5">
    <tr>
        <th colspan="3" align="center">LOGO</th>
    </tr>
    <tr>
    <td width="20%" height="300px">Menu</td>
    <td width="70%" height="300px">Content</td>
    <td width="10%" height="300px">Advertisement</td>
    </td>
    </tr>
    <tr>
        <td colspan="3" align="center">Footer</td>
    </tr>
</table>

সিএসএস দিয়ে টেবিলঃ(CSS WITH TABLE)

সিএসএস দিয়ে টেবিল বানানোর জন্য কোনো এট্রিবিউট দেওয়া প্রয়োজন নাই। একটা টেবিলের জন্য নিচের কোড গুলোই যথেষ্ট।

table, td, th{
    border:1px solid black;
}

তবে যদি আপনি ২ বর্ডার এক করতে চান তবে নিচের এই সিএসএস টা এপ্লাই করতে পারেন।

border-collapse: collapse;

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।