# HTML table ট্যাগ কি এবং এটি কিভাবে কাজ করে

*<s>Post No:09</s>*  
  
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা Html এর Table ট্যাগ সম্পর্কে জানবো।  
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:  
[**hashnode.com/@Labib**](http://hashnode.com/@Labib)

  
HTML table  & Image ট্যাগ কি এবং এটি কিভাবে কাজ করে?  চুলুন আমরা আজ জেনে নেই html  table ট্যাগ সম্পর্কে ।

এই পোস্ট এ আমরা যা শিখতে যাচ্ছি,

*   HTML Table Tag কি?
    
*   HTML Image Tag কি?
    
*   কিভাবে এটি ব্যাবহার করতে পারি ?
    

**HTML Table Tag**

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

১. &lt;table&gt;&lt;/table&gt;

২. &lt;tr&gt;&lt;/tr&gt; (tr তে table row)

৩. &lt;td&gt;&lt;/td&gt; (td তে table data)  

 এই ৩টি ট্যাগ দিয়ে একটা টেবিল বানাতে পারবেন। পুরো grid সিস্টেম বানানো যাবে। row এবং column দিয়ে  

tr দিয়ে row বা সারি এবং td দিয়ে column বা স্তম্ভ বানানো হয়। চলুন একটি সাধারণ টেবিল তৈরী করা যাক,

তার জন্যে আপনার প্রয়োজন হবে একটি HTML ফাইল এবং যেকোনো CODE এডিটর।  একটি HTML FILE  আপনার কোড  এডিটর এ ওপেন করেন আর নিচের কোড গুলো লিখলে আপনি আউটপুটে নিচের মতো একটি টেবিল দেখতে পাবেন।

![](https://lh6.googleusercontent.com/JCsRWz-oXlUZZc7HUpkYpu4qpm_kM2HMpXA_i23ZRTy5Nsawlcil6-o7--_UROE6WtvAk9I4HXLqkwsrhi9Q-7U_8xtLJzCaBBSklzcOZ8pdk5G5DTaA9QJoXq-z_yeyob0J7zcx8Q7UpGGCx0qRGQ_6Oh5ANUALaeWuENYPnhkBFyYj5s6NQNf-WYXg align="left")

  

প্রদর্শন:

![](https://lh6.googleusercontent.com/h-WYTrXcyNjSAFG89pTnPr5OdfrHHdzIEN3_MJagPIKQ4_14AZrcSFIwNoWPfG3MqoK6kjdwo7IXa5baLXPo9sdDWGEbmHNGcy4AyUl6NFS8h4ITB6QVbJxsz4_6E9Hq7PVhdLYRMckuhC_B3xAV4fL6-FTXJGziLAYbYTxD-i39LOGSecKftoI6Iz_F align="left")

আমি দুটি row এবং ৩টি করে কলাম ব্যবহার করেছি আপনি ইচ্ছে মত row ব্যবহার করতে পারবেন।

**টেবিল শিরোনাম**

&lt;th&gt; নামে একটা ট্যাগ আছে এটা দেয়া টেবিলের হেডার বানানো যায় যেমন

![](https://lh4.googleusercontent.com/IrwgkRRhbpp_fQ0ICCuXK_Z3psM4qeE1rpAyLQi23LvVTCiB87Mjy8c-QXTr1HXFxuKNoXjU_COBBikfniTbiF5MGswBJjDTwPCtI5_FqIuCYf1SeEGuLYxcTv1YxBhdrpGKaKewwu9ZWu5d0dqjLKLJGawQ7KKmGHijB4hdCa0kz4ykS3p5VWwdZQuQ align="left")

প্রদর্শন:

![](https://lh3.googleusercontent.com/qj3M21U9zP-LuFkQtECNKKw1KY7mQMYYvw5f6VC8GXzjsndBDBp_OF_nomuiuqp1WPxgM_opYwKgdZwCM5kFrF-fLu_-OJLHS7KqcmkHVtRnGBFhB7mb7SMipU8swct3kyz18Hc7TFu7PYznd-NBQOMbk27w487a2HRAQDQdkwfCfo5H0Ziqs7792uZ8 align="left")

দেখুন th  এলিমেন্টের লেখাগুলি হেডিং আকারে দেখাচ্ছে।

তবে টেবিল দেয়ার উপযুক্ত নিয়ম হচ্ছে টেবিলের হেডার, বডি এবং ফুটার সহ দেয়া। এজন্য কিছু ট্যাগ আছে (thead, tbody, tfoot ) এগুলি ব্যবহার করলে গ্রামাটিকালি টেবিলটি সঠিক হয় এরুপ একটি উদাহরন:

![](https://lh3.googleusercontent.com/QAe7HWtgM7NcFZjNjWbGHYr5zbsxgcFruvKeGkWSEsuY1sVZcB4vUz9TaFsvfG6e9OVFZRIG52BNn-p87vi8zMI0YobcNe4O64R6yjHVpA7jL4MzPWGXfLfBnXR86hLXIIiWprFKkQEtnpgOrhXC0sAN2-TgtMvUca_DlsHT0wqjVIhYy0xRSUpS2BS4 align="left")

প্রদর্শন:

![](https://lh3.googleusercontent.com/b9Z9CJLGM6SHdSY-gl_C03Nytv4hMTmVyeo6S4YWaHvvS-RtbNq4O9nXw2bypo7TtyoPWoHsQ57Euh26xxbXDjnxzSlH02idkONqh0vsp_wJOMRyPXcvWp0FwxUu4h7zwNvbeQj2lhnME9Ox0Vdr9LgpizbENFjvgSg7ru6EeZq-OO2FDhUZjLBhhqCC align="left")

&lt;tfoot&gt; ট্যাগ &lt;tbody&gt; এর আগে দেয়া হয়েছে, আর এভাবেই ব্রাউজার সঠিকভাবে দেখাতে পারে।(দেখুন tfoot এর ডেটা নিচেই দেখাচ্ছে)

উপরের টেবিলগুলিতে বর্ডার না দেয়াতে ভাল দেখাচ্ছে না এজন্য &lt;table&gt; এলিমেন্টে বেশ কয়েকটি এট্রিবিউট আছে যেগলি দিয়ে টেবিল সুন্দর সাজানো যায়। যেমন টেবিলে বর্ডার দিতে চাইলে &lt;table border="1"&gt; এভাবে দিবেন  ফলে টেবিলটি কিছুটা সুন্দর লাগবে আবার আছে cellpadding এবং cellspacing এদুটি দিয়ে cell বা অংশগুলির মধ্যে যথাক্রমে প্যাডিং (কনটেন্ট থেকে বর্ডারের দুরত্ব) এবং দুরত্ব বাড়ানো যায় যেমন উপরের টেবিলে &lt;table border="1" cellpadding="10"&gt; এটা যোগ করে আমাদের Code এডিটরে রান করিয়ে দেখতে পারেন।

**rowspan এবং colspan**

td, th এ rowspan এবং colspan এট্রিবিউট দুটি ব্যবহার করে জটিল ধরনের টেবিল বানানো যায়্। rowspan এর সংখ্যাত্নক মান দিয়ে ঠিক করা যায় cell টি কতটি row এর সমান হবে যেমন :

![](https://lh3.googleusercontent.com/w9TS6SrbCMNGNr_sK-5q1iW5pbHXRRDvsFX9Dea9DgHMAFK5XIGDMIVk6iGT8ouiO1F5rTnUbJU4p2T_P5RK-3UJFc77xm-tbUoH7ijcz8_uvFlPwT6lse77-KzHKLn00HiVlGBHkF_pJw2B6mIuGbC6kKyEQX1A_xbsmz8GocDqa0J24Ftg9H_1dPJD align="left")

প্রদর্শন:

![](https://lh3.googleusercontent.com/VJHcpVCe8gp_ZsKT5K7ynVpCXgTThL6DfeQnAS3CLzczXXqZCPp6gSL-qMzG0I0gtqiFsGTf9m6OlySfzglpwyy2kttB3sZmGvdwJUWQTvM8obK4iGDeW_fVxXFrvIKCEE_SE1ve-mLXmo4iJ68-Ui3jgK9SsKOl5A4RFp6gm2t860-GU9o1JCCfKycw align="left")

কোথায় th, td ইত্যাদি দিয়েছি ভালভাবে লক্ষ্য করুন নাহলে কিছুই বুঝবেননা। দেখুন দুটি row এর জায়গা কিভাবে একটি cell th(Web Language)  দিয়ে দখল করা হয়েছে, rowspan দিয়ে।

colspan এর সংখ্যাত্নক মান দিয়ে ঠিক করা যায় cell টি কতটি col এর সমান হবে যেমন :

![](https://lh5.googleusercontent.com/KkHWTO7QuImijW_tM3Mnrf2MnlF988d_MsGtfNVUEsn1yxFX1hnlKxSZ7sdfFTftCu1T4_pyM-_kEI3ZMLGOSOivY2Mo34uhlGfJT6V6s8sJeAmWFrpPl2quPhY_tTBCFu0i6AGpoCdjthsjQQ96o9pBIstkJOmRJXOh5X1R80VEIYQxITVNZYkGYY4o align="left")

ব্যাস এবার রান করিয়ে দেখুন একটি কলামেই কাজ হয়ে গেছে।

প্রদর্শন:

![](https://lh5.googleusercontent.com/9yWD-YTSUTooW1ica14_QnwLSRCD09prfArGA26kz0UgOKvBl2_BUayY-Pu632dZ6opOzMswUblTspS3kl03MvKxsj_naTLSVJXXquEkDL_zV2t0B3eIAB8cveC0dkSntvpwW6o8rgMno0vyPaZ_gIiDNtxjubD4bVu_402oa3PLlJkd_5VrX93Cgsue align="left")

\*\* একটা cell এর ভিতর (td এর ভিতর) যেকোন এইচটিএমএল এলিমেন্ট রাখতে পারেন। img, p বা যেকোন কিছু।

\*\* গুরত্বপূর্ন এট্রিবিউটগুলিই শুধু আলোচনা করা হচ্ছে, এগুলি ছাড়াও align, bgcolor ইত্যাদি কমন এট্রিবিউটগুলি ব্যবহার করা যাবে।

**HTML img Tag**

আমরা আমাদের ওয়েবসাইট এ যে ইমেজ গুলা দেখতে পাই তা মূলত img ট্যাগ এর মাধ্যমে নেয়া হয়। চলুন দেখে নেই কিভাবে img ট্যাগের মাধ্যমে ইমেজকে ওয়েবসাইটে দেখানো হয়।  এর জন্যে আপনাকে একটি html ফাইল যেকোনো কোড এডিটর এ ওপেন করে ওই ফাইল এ নিচের মতো করে ইমেজ ট্যাগটি ব্যাবহার করতে হবে। তবে ইমেজ এর img  ট্যাগে আমাদের একটি attribute ব্যাবহার করতে হয়।  তাহলো  src attribute , মূলত এই src  এই আপনার ইমেজ টি বা ইমেজ লিংকটি দেখিয়ে দিতে হয়।  আমরা প্রাকটিক্যাল দেখি তাহলে আরো ক্লিয়ার হতে পারবো।

![](https://lh6.googleusercontent.com/KsXqVSvJ23bb1TGC9UM3DAFTe09kkKGOkfN53iSdSx6XnPJQTxApe0frYgIzTdfqIUqPdx9GJ1f4YAr3PCPYyyQ4sIdP3USihtLaBa85Gjh7CsVnFSevIIwM831fTjn9N_1MRv2C17kR27ZJ459tpf8ytxX_Ts1f-3gEuqQHIv4pE4QIx33DJMw2lNZU align="left")

Output:

![](https://lh6.googleusercontent.com/OzILo6MxkPKZjaXoUHFNnsq7cAaq0bLZHbQGgwhdiL1QCFlG3LmpLQZW9wC_NAF08wgEOXc4JlZVO8aXrD_TRnJPXxgdZM5S1-O1P39dyLEroVOIJmE5SYUbzByMf4gQ8bltKJ3cjtnaMvrGWPGrtbxpgPIF15BqyFH9C6y8xqfwlp2TAuAqN2u9Wss7 align="left")