এক্সএইচটিএমএল (XHTML) ডকুমেন্টে টেবিল ব্যবহার করা ওয়েব পেজে তথ্য উপস্থাপন করতে সহায়ক। টেবিলের মাধ্যমে ডেটা সহজভাবে শো করা যায়, তবে এর সাথে স্টাইলিং এবং স্প্যানিংয়ের ব্যবহারে টেবিলটি আরও পড়তে সুবিধাজনক এবং আকর্ষণীয় হয়ে ওঠে।
এখানে আমরা এক্সএইচটিএমএল টেবিল স্টাইলিং এবং স্প্যানিংয়ের গুরুত্বপূর্ণ কিছু দিক ব্যাখ্যা করবো।
১. এক্সএইচটিএমএল টেবিলের মৌলিক গঠন
একটি এক্সএইচটিএমএল টেবিলের মৌলিক গঠন সাধারণত তিনটি প্রধান ট্যাগ নিয়ে গঠিত: <table>, <tr>, <td> এবং প্রযোজ্য হলে <th>। এছাড়া, টেবিলের কলাম ও সারি স্প্যান করতে colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করা হয়। নিচে একটি সাধারণ এক্সএইচটিএমএল টেবিলের উদাহরণ দেখানো হয়েছে।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Sample Table</title>
</head>
<body>
<h1>Student Information</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>John Doe</td>
<td>15</td>
<td>A</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>14</td>
<td>B</td>
</tr>
<tr>
<td>Sam Brown</td>
<td>16</td>
<td>A+</td>
</tr>
</table>
</body>
</html>
ব্যাখ্যা:
<table>: এটি টেবিলের মূল ট্যাগ, যা টেবিলের পুরো কাঠামো ধারণ করে।<tr>: টেবিলের প্রতিটি সারি (row) নির্দেশ করে।<th>: টেবিলের হেডার (শিরোনাম) সেল। এটি সাধারণত বোল্ড এবং সেন্টার করা থাকে।<td>: টেবিলের ডাটা সেল, যেখানে টেবিলের সাধারণ তথ্য থাকে।
২. টেবিল স্টাইলিং
এক্সএইচটিএমএল টেবিল স্টাইলিংয়ের জন্য আপনি CSS (Cascading Style Sheets) ব্যবহার করতে পারেন। CSS ব্যবহার করে টেবিলের স্টাইল যেমন সীমা (border), প্যাডিং, ব্যাকগ্রাউন্ড, রঙ, টেক্সট অ্যালাইনমেন্ট ইত্যাদি কাস্টমাইজ করা যায়। নিচে কিছু সাধারণ CSS স্টাইলিংয়ের উদাহরণ দেওয়া হলো।
২.1 টেবিলের সীমানা এবং প্যাডিং
<style type="text/css">
table {
border-collapse: collapse; /* টেবিলের সীমানা একত্রিত করবে */
width: 100%; /* টেবিলের প্রস্থ ১০০% নির্ধারণ করবে */
}
th, td {
border: 1px solid black; /* সীমানার কালার এবং আকার নির্ধারণ */
padding: 8px; /* সেলের মধ্যে প্যাডিং */
text-align: left; /* টেক্সট বামদিকে সাজানো */
}
th {
background-color: #f2f2f2; /* হেডার সেলে ব্যাকগ্রাউন্ড কালার */
}
</style>
২.2 টেবিলের স্টাইলিং প্রয়োগ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Styled Table</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
td {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Styled Student Information</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>John Doe</td>
<td>15</td>
<td>A</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>14</td>
<td>B</td>
</tr>
<tr>
<td>Sam Brown</td>
<td>16</td>
<td>A+</td>
</tr>
</table>
</body>
</html>
ব্যাখ্যা:
border-collapse: collapse;: এটি টেবিলের সীমানা একত্রিত করে।width: 80%;: টেবিলের প্রস্থ ৮০% নির্ধারণ করে।background-color: সেলগুলোর ব্যাকগ্রাউন্ড কালার নির্ধারণ করে।padding: 10px;: সেলের মধ্যে ১০ পিক্সেল প্যাডিং যোগ করে।
৩. স্প্যানিং (Spanning) ব্যবহার
টেবিলের সেলগুলোকে একাধিক কলাম বা সারি জুড়ে ছড়িয়ে দেওয়া বা "স্প্যান" করতে colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করা হয়।
৩.1 Colspan (কলাম স্প্যান)
colspan অ্যাট্রিবিউটটি একটি সেলকে একাধিক কলাম জুড়ে প্রসারিত করতে ব্যবহার করা হয়।
<tr>
<td colspan="2">John Doe</td>
<td>A</td>
</tr>
ব্যাখ্যা:
- এখানে
colspan="2"ব্যবহার করে "John Doe" সেলটি দুইটি কলাম জুড়ে প্রসারিত করা হয়েছে।
৩.2 Rowspan (সারি স্প্যান)
rowspan অ্যাট্রিবিউটটি একটি সেলকে একাধিক সারি জুড়ে প্রসারিত করতে ব্যবহার করা হয়।
<tr>
<td rowspan="2">John Doe</td>
<td>15</td>
<td>A</td>
</tr>
<tr>
<td>16</td>
<td>B</td>
</tr>
ব্যাখ্যা:
- এখানে
rowspan="2"ব্যবহার করে "John Doe" সেলটি দুটি সারি জুড়ে প্রসারিত করা হয়েছে।
৩.3 স্প্যানিং সহ একটি টেবিল উদাহরণ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Table with Spanning</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>Student Information with Spanning</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td rowspan="2">John Doe</td>
<td>15</td>
<td>A</td>
</tr>
<tr>
<td>16</td>
<td>B</td>
</tr>
<tr>
<td colspan="2">Jane Smith</td>
<td>A+</td>
</tr>
</table>
</body>
</html>
ব্যাখ্যা:
rowspan="2": "John Doe" সেলটি দুটি সারি জুড়ে প্রসারিত হয়েছে।colspan="2": "Jane Smith" সেলটি দুইটি কলাম জুড়ে প্রসারিত হয়েছে।
এক্সএইচটিএমএল টেবিলের মাধ্যমে আপনি ডেটা সহজে এবং স্পষ্টভাবে উপস্থাপন করতে পারেন। colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করে আপনি টেবিলের সেলগুলিকে একাধিক কলাম বা সারি জুড়ে প্রসারিত করতে পারেন। এছাড়া, CSS ব্যবহার করে টেবিলের স্টাইলিং করে সেটিকে আরও আকর্ষণীয় এবং ব্যবহারযোগ্য করতে পারেন।
Read more
