آموزش ایجاد جدول در صفحات html
جدول‌ها با توجه به اینکه می‌توانند به روش مرتب و منظمی اطلاعات را به کاربرهای سایت در صفحات html نشان دهد اهمیت خاصی نزد طراحان سایت دارند.
اگر بخواهید اطلاعات را به شکل ظاهری مناسبی به شکل دسته بندی‌شده در ردیف‌ها و ستون‌های مختلف به نمایش بگذارید، یکی از گزینه‌های پرکاربرد جدول است. جدول از جمله المان‌های html است که با تگ <table> به نمایش در می‌آید و خود آن نیز شامل چندین تگ دیگر است که در ادامه این مقاله آموزشی نیوسان‌وب به طور کامل به همه آنها خواهیم پرداخت.
جدول چیست؟
جدول به طراحان سایت این امکان را می‌دهد تا اطلاعات مورد نظرشان را در رذیف‌ها و ستون‌های خاصی به نمایش در آوردند. این المان به صورت یک تگ آغازین و یک تگ پایانی است که در داخل آنها تیتر جدول، سرستون‌ها، ردیف‌ها، ستون‌ها و سایر الزامات موردنیاز برای ساخت یک جدول قرار می‌گیرند. کدهای html زیر را ببینید که برای ساخت یک جدول از آنها بهره گرفته ایم:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newsunweb.com</title>
<style>
table, th, td {
border: 1px solid black;
}
caption{
font-weight: bold;
font-size: larger;
}
</style>
</head>
<body>
<div>
<table>
<caption>Class Members</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Javad</td>
<td>Mehdinia</td>
<td>Male</td>
<td>Tehran</td>
</tr>
<tr>
<td>Sara</td>
<td>Abdi</td>
<td>Female</td>
<td>Ahvaz</td>
</tr>
<tr>
<td>Taher</td>
<td>Doseri</td>
<td>Male</td>
<td>Dubi</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Count: 3</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
همانطور که در کدهای html بالا مشاهده می‌شود، از چند تگ در جدول استفاده شده است که در ادامه هر یک را توضیح خواهیم داد. این تگ‌ها عبارتند از thead، tbody، tfoot، tr، th، td. البته ممکن است جدولی وجود داشته باشد که برخی از این تگ‌ها را نداشته باشد. توجه کنید که مرورگر در حالت پیش‌فرض، جداول را بدون خطوط مرزی یا border نشان می‌دهد که ما برای اینکه در جدول بالا بتوتن در ابتدای کار، درک صحیحی از جدول و محدوده‌های آن داشت، با استفاده از style در بخش head، خطوط مرزی را به جدول و تگ‌های داخلی آن نسبت داده‌ایم. اگر با این نحوه از استایل‌دهی آشنایی ندارید، نگران نباشید و در اینجا هم هدف ما یادگیری آن نیست؛ چرا که در مقالات بخش CSS به آنها خواهیم پرداخت؛ ضمن اینکه اگر در شروع کار یادگیری هستید، می‌توانید از استایل‌دهی inline که قبلا توضیحات و آموزش‌های لازم را در خصوص آنها داده‌ایم بهره بگیرید. اما نکته‌ای که وجود دارد این است که اگر از استایل دهی inline استفاده کنید، مجبور هستید برای هر td یا th و table از یگ استایل تکراری استفاده کنید و حجم کار را افزایش دهید. البته در بخش css خواهیم گفت که بهترین شیوه برای استایل‌دهی به المان‌های html به چه نحو است اما در حال حاضر نمی‌خواهیم شما را با آن درگیر کنیم و هدف فقط یادگیری المان table است.
انواع تگ‌های مربوط به المان table
در این بخش در خصوص انواع تگ‌هایی که در ئاخل جداول html استفاد می‌شوند تا اسکلتبندی استاندارد آن را تشکیل دهند، نکات لازم را ذکر می‌کنیم تا آشنایی کافی را با هر یک کسب کنید.
تگ caption
از تگ caption در جدول برای ایجاد یک عنوان برای جدول استفاده می‌شود. مرورگرها وقتی با caption برخورد می‌کنند، متن داخل آن را به صورت وسط‌چین در عرضی که جدول به خود اختصاص داده‌است، تنظیم می‌کنند. توجه کنید که اگر از برخی نسخه‌های بوت‌استرپ استفاده کنید، این captipn ممکن است به قسمت تحتانی جدول منتقل شود که اگر لازم باشد، بایدبا استفاده از CSS آن را override یا بازنویسی کنید.
تگ thead
تگ thead، هدر یا سربرگ یک جدول را در بر می‌گیرد.
تگ tbody
تگ tbody، بدنه اصلی یک جدول را به خود اختصاص می‌دهد.
تگ tfoot
از تگ tfoot می‌توان برای بخش تحتانی جدول استفاده کرد که معمولا یک جمع‌بندی کلی از یک جدول یا اطلاعاتی مختصر از آن را در اختیار کاربرها قرار می‌دهد.
تگ tr
تگ tr یک ردیف از جداول html است که می‌تواند در thead، tbody یا tfoot قرار بگیرد.
تگ th
از تگ th در مثال بالا در داخل tr بخش هدر یا همان thead جدول استفاده شده است. در واقع هر th، نشانگر یک سرستون است که در هدر جدول مثال مورد نظر ما جای گرفته است.
تگ td
تگ td در داخل tr یا ردیف‌های بدنه اصلی جدول قرار می‌گیرد. در واقع tdها همان سلول‌ها یا خانه‌های بدنه اصلی جداول html هستند که نمایش اطلاعات موردنیاز به کاربر توسط آنها انجام می‌شود. البته از td برای نمایش اطلاعات در داخل tr واقع شده در داخل tfoot هم استفاده می‌شود.
نکته1: اگر در داخل یک td از صفت colspan برابر با یک عدد استفاده شود، به اندازه همان عدد مشخص شده، تعدادی از سلول‌های مجاور با هم ادغام می‌شوند تا طبق نیازمندی‌های کاربر و طراح سایت، اطلاعات به نحو مطلوب به کاربر نمایش داده شود.
نکته 2: از th برای نشان دادن عنوان هر ردیف هم می‌توان استفاده کرد که روش استفاده از آن بهتر است با اختصاص صفت scope برابر با col یا row مشخص شود. وقتی که از th استفاده می‌شود، مرورگر به صورت پیش‌فرض کلمات داخل آن را به صورت توپر یا bold نشانی می‌دهد.
یک مثال از جدول html
برای مثال، جدول html زیر را مشاهده کنید که رتبه‌های اول تا سوم تیم‌های لیگ فوتبال آلمان (بوندسلیگا) را در پایان هفته بیست و هفتم فصل 2021-2022 نشان می‌دهد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newsunweb.com</title>
<style>
table, th, td {
border: 1px solid black;
}
caption{
font-weight: bold;
font-size: larger;
}
</style>
</head>
<body>
<table>
<caption>German Bundesliga (2021-2022)</caption>
<thead>
<tr>
<th scope="col">Team</th>
<th scope="col">P</th>
<th scope="col">W</th>
<th scope="col">D</th>
<th scope="col">L</th>
<th scope="col">F</th>
<th scope="col">A</th>
<th scope="col">GD</th>
<th scope="col">Pts</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Bayern Munich</th>
<td>27</td>
<td>20</td>
<td>3</td>
<td>4</td>
<td>81</td>
<td>28</td>
<td>53</td>
<td>63</td>
</tr>
<tr>
<th scope="row">B Dortmund</th>
<td>27</td>
<td>18</td>
<td>3</td>
<td>6</td>
<td>67</td>
<td>38</td>
<td>29</td>
<td>57</td>
</tr>
<tr>
<th scope="row">B Leverkusen</th>
<td>27</td>
<td>14</td>
<td>6</td>
<td>7</td>
<td>66</td>
<td>41</td>
<td>25</td>
<td>48</td>
</tr>
</tbody>
</table>
</body>
</html>
خروجی کدهای بالا به شکل زیر است:
دقت کنید که پس از یادگیری css، با ایجاد استایل‌های مناسب، شکل ظاهری بهتری را برای جداول ایجاد خواهیم کرد.
جمع‌بندی و سخن پایانی
در این مقاله آموزشی که در خصوص المان جدول در صفحات html بود، در خصوص جدول و انواع تگ‌های آن، توضیحاتی را خدمت همراهان نیوسان‌وب ارائه کردیم که با مثال‌های لازم آنها را توضیح دادیم. جدول‌ها اهمیت زیادی در نمایش اطلاعات به کاربر دارند پس نکاتی که در اینجا گفته شد را به دقت مطالعه کنید تا در صورت نیاز بتوانید از آنها طبق نیازمندی‌های سایت یا پروژه‌هایتان استفاده کنید. در پایان سوالات یا نقطه نظرات ارزشمند خود هم می‌توانید در پایین همین مقاله در بخش نظرات ارسال نمایید تا در فرصت مناسب پاسخ داده شوند.
لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.