এটি একটি ধারাবাহিক টিউন। পড়ুন, সব গুলো পর্ব

• HTML হাতেখড়ি [পর্ব- ১] প্রাথমিক আলোচনা
• HTML হাতেখড়ি [পর্ব-২] হেডিং(Heading), প্যারাগ্রাফ( Paragraph), লিংক( Link)
• HTML হাতেখড়ি [পর্ব-৩] HTML ফরমেটিং (Formatting), লিস্টিং (Listing) এবং কমেন্ট(Comment)
• HTML হাতেখড়ি [পর্ব-4] HTML টেবিল (Table) এবং ইনটিটিস (Entities)
• HTML হাতেখড়ি [পর্ব- ৫] এইচ.টি.এম.এল  ফ্রেম (HTML Frame)
• HTML হাতেখড়ি [পর্ব- ৬] এইচ.টি.এম.এল ফর্মের উপাদান (HTML Forms Element)

আজ আমরা HTML Table এবং HTML Entities নিয়ে  আলোচনা করব নিয়ে।

HTML Table:

প্রথমেই আমাদের মনে যে প্রশ্নগুলো আসতে পারে তা নিম্নরূপ:

• HTML Table কি?

সারি ও কলামের মাধ্যমের যেকোন ডাটা বা তথ্য বা উপাত্তকে ওয়েব পেজে উপস্থাপন বা প্রকাশ আমরা যার মাধ্যমে করে থাকি তাই HTML Table ।

• HTML Table কিভাবে করব?

HTML Table তৈরি করা খুবই সহজ। মনে করুন আপনি আপনার পরীক্ষার নম্বরগুলো ওয়েব পেজে রাখতে চাচ্ছেন। মনে করুন আপনার পরীক্ষার বিষয় মোট 4টি।যথা: ইংরেজী, গণিত, পদার্থ, রসায়ন এবং এই বিষয়গুলোতে আপনি যথাক্রমে নম্বর পেয়েছেন 80, 90, 77, 85। তাহলে আমাদের কলাম করতে হবে মোট তিনটি। এখন বলতে পারেন তিনটি কেন? দুটি হলেই তো হত। অবশ্যই হত। এটা আপনার ইচ্ছার উপর সম্পূর্ণ নির্ভর করে। আর আমাদের সারি বানাতে হবে মোট 5টি। তাহলে আসুন আমরা কোডিংটা করে ফেলি।

<table >
<tr>

<td>নং</td>
<td>বিষয়</td>
<td>নম্বর</td>
</tr>
<tr>
<td>1</td>
<td>ইংরেজী</td>

<td>80</td>
</tr>

<tr>

<td>2</td>
<td>গণিত</td>
<td>90</td>
</tr>
<tr>

<td>3</td>
<td>পদার্থ</td>
<td>77</td>
</tr>
<tr>

<td>4</td>
<td>রসায়ন</td>
<td>85</td>
</tr>

</table>

আউটপুট:

এবারে আসি উপরের কোডিং এর শানে নুযুলটি বলে ফেলি। টেবিল শুরু(<table>) এবং শেষ(</table>) হয় <table> ট্যাগ দিয়ে। <td> ট্যাগের মধ্যে সারিগুলো অবস্হান করে। আর <tr> ট্যাগের মধ্যে কলামগুলো অবস্হান করে। এখন আমরা যেহেতু তিনটি কলাম নিব তাই <tr> ট্যাগের মধ্যে তিনটি <td> ট্যাগ নিব।

HTML Table Border:

আমরা যদি টেবিল এর চারদিকে বর্ডার দিতে চাই টেবিল বর্ডার ট্যাগ ব্যবহার করতে পারি। কোডিংটি নিম্নরূপ:

<table border="1">
<tr>

<td>নং</td>
<td>বিষয়</td>
<td>নম্বর</td>
</tr>
<tr>
<td>1</td>
<td>ইংরেজী</td>

<td>80</td>
</tr>

<tr>

<td>2</td>
<td>গণিত</td>
<td>90</td>
</tr>
<tr>

<td>3</td>
<td>পদার্থ</td>
<td>77</td>
</tr>
<tr>

<td>4</td>
<td>রসায়ন</td>
<td>85</td>
</tr>

</table>

আউটপুট:

এই কোডিংটির সাথে আগের কোডিং এর তেমন কোন পার্থক্য নাই। পার্থক্য শুধু আগের কোডিংটি শুরু হয়েছিল ট্যাগ <table> দিয়ে। আর এখনকার কোডিংটি শুরু হয়েছে <table border="1"> ট্যাগ দিয়ে। আপনি আপনার প্রয়োজনমত ইনভারটেড কমার জায়গায় 1,2,3...... যা খুশি তাই দিতে পারেন।

HTML Table Header:

এবার আসি । উপরের কোডিং এ আমরা নং, বিষয় ও নম্বর কথাগুলো ব্যবহার করেছি। এগুলো হল হেডিং। আর এই হেডিং কে আলাদাভাবে দেখানোর জন্য আমরা <th> ট্যাগ ব্যবহার করি। হেডিং বোঝার জন্য নিম্নের কোডিংটি লক্ষ্য করি।

<table border="1">
<tr>

<th>নং</th>
<th>বিষয়</th>
<th>নম্বর</th>
</tr>
<tr>
<td>1</td>
<td>ইংরেজী</td>

<td>80</td>
</tr>

<tr>

<td>2</td>
<td>গণিত</td>
<td>90</td>
</tr>
<tr>

<td>3</td>
<td>পদার্থ</td>
<td>77</td>
</tr>
<tr>

<td>4</td>
<td>রসায়ন</td>
<td>85</td>
</tr>

</table>

আউটপুট:

আশাকরি কিছুই বলে দেওয়া লাগবে না। সবই আপনারা বুঝতে পেরেছেন।

Cell Padding:

কন্টেন্ট এবং বর্ডার এর মধ্যকার সাদা জায়গা বাড়ানোকে Cell Padding বলা হয়। কোডিংটি নিম্নরূপ:

Cell padding ছাড়া:

<table border="1">

<tr>

<td>বাংলা</td>

<td>ইংরেজী</td>

</tr>

<tr>

<td>সমাজ</td>

<td>বিজ্ঞান</td>

</tr>

</table>

আউটপুট:

Cell padding সহ:

<table border="1"

cellpadding="10">

<tr>

<td>বাংলা</td>

<td>ইংরেজী</td>

</tr>

<tr>

<td>সমাজ</td>

<td>বিজ্ঞান</td>

</tr>

</table>

আউটপুট:

Cell Spacing:

Cell গুলোর মাঝে স্পেস বৃদ্ধি করাকে Cell Spacing বলা হয়। কোডিংটি নিম্নরূপ:

Cell spacing ছাড়া:

<table border="1">

<tr>

<td>বাংলা</td>

<td>ইংরেজী</td>

</tr>

<tr>

<td>সমাজ</td>

<td>বিজ্ঞান</td>

</tr>

</table>

আউটপুট:

Cell spacing সহ:

<table border="1"

cellspacing="10">

<tr>

<td>বাংলা</td>

<td>ইংরেজী</td>

</tr>

<tr>

<td>সমাজ</td>

<td>বিজ্ঞান</td>

</tr>

</table>

আউটপুট:

HTML Entities:

HTML এ কিছু সংরক্ষিত character রয়েছে, এগুলো HTML Entities নামে পরিচিত। একটা উদাহরণ দিলে ব্যাপারটা পরিষ্কার হয়ে যায়। মনে করুন আপনি (<) লেসদেন অথবা গ্রেটারদেন(>) চিহ্ন ব্যবহার করতে চাচ্ছেন। কিন্তু আপনি যদি সরাসরি কোডিং এ সিম্বলটি দেন তাহলে ব্রাউজার এগুলোকে ট্যাগ মনে করে। তাই এগুলো আর ব্রাউজারে প্রদর্শিত হয় না। আর এজন্য এগুলো প্রদর্শনের জন্য কিছু সংরক্ষিত character ব্যবহার করা হয়।

যারা আরো HTML Entities সর্ম্পকে জানতে চান তাদের জন্য অতিরিক্ত কিছু HTML Entities নিম্নে দেওয়া হল:

ISO 8859-1 Characters