نحوه ایجاد جدول در HTML
Your browser doesn't support video.
Please download the file: video/mp4
با سلام مجدد خدمت شما علاقه مندان به مباحث آموزش برنامه نویسی و آموزش طراحی وب. علیرضا حاتمی نیا هستم با آموزش قسمت هفتم طراحی وب در خدمت شما عزیزان هستم.
در جلسه پیش با نحوه ایجاد پیوند یا لینک در صفحه وب آشنا شدیم. در این جلسه نحوه ایجاد جدول در HTML را خواهید آموخت.
جدول ها در HTML
یکی از مباحث بسیار پرکاربرد در طراحی وب ایجاد جدول در صفحه می باشد. با کمک جداول شما می توانید اطلاعات مورد نظر را به صورت سازماندهی شده و دسته بندی به کاربران نمایش دهید. مثلا نمایش لیست نمرات دانش آموزان، اعلام نتایج مسابقات فوتبال، جدول قیمت محصولات یک فروشگاه ، لیست کارکنان یک شرکت و ....
نکته : در گذشته از جداول برای چینش عناصر صفحات نیز استفاده میشد ولی با پیشرفت html و css دیگر از جداول برای این منظور استفاده نمی شود.
ساختار یک جدول HTML
هر جدول شامل یک یا چند ردیف Row و ستون column می باشد که محل تلاقی هر ردیف با یک ستون را سلول یا cell می نامند که اطلاعاتی مانند متن، تصویر و ... در هر سلول جای میگیرد.
برچسب <table>
هر جدول در HTML با تگ باز و بسته <table></table> شروع و خاتمه میابد. داخل این دو تگ برچسب هایی برای معرفی سطرها و ستون ها قرار می گیرند.
<table>
.
.
.
</table>
برچسب <tr>
برای ایجاد سطر در جدول از برچسب بازو بسته <tr></tr> که مخفف عبارت table row است استفاده می شود. که هر تگ باز و بسته <tr></tr> حکم یک سطر برای جدول را دارد.
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
در مثال بالا جدولی با 3 سطر ایجاد کردیم.
برچسب <td>
در داخل برچسب <tr></tr> می توانیم توسط برچسب باز و بسته <td></td> یک سلول برای آن سطر ایجاد کنیم. هر <td> که مخفف عبارت table data است حاوی اطلاعات جدول می باشد.
<table>
<tr>
<td> سلول1 در سطر1 </td> <td> سلول2 در سطر1 </td>
</tr>
<tr>
<td> سلول1 در سطر2 </td><td> سلول2 در سطر2 </td>
</tr>
</table>
برچسب <th>
گاهی اوقات لازم برای جدول سر ستون تعریف کنید. این سر ستون سطری ست که حاوی سلول هایی ست که دارای عنوان هر ستون است. برای ایجاد سر ستون در جدول از تگ <th></th> استفاده می کنیم. متنی که در <th> قرار می گیرد عنوان ستون در نظر گرفته می شود و به صورت پیش فرض به صورت برجسته Bold و وسط چین نمایش داده میشود.
نکته: در این قسمت مقدار خصویت border را برابر 1 قرار می دهیم تا حاشیه جدول به خوبی نمایش داده شود.
<table border=1>
<tr>
<th> عنوان 1 </th> <th> عنوان 2 </th>
</tr>
<tr>
<td> سلول1 در سطر1 </td> <td> سلول2 در سطر1 </td>
</tr>
<tr>
<td> سلول1 در سطر2 </td><td> سلول2 در سطر2 </td>
</tr>
</table>
بسیار خب در اینجا مبحث مقدماتی ساخت جداول در HTML را به پایان می بریم. در آینده و شروع مباحث HTML5 و CSS کار های خارق العاده ای را با جداول انجام خواهیم داد
نظرات کاربران
4 سال پیش
فرزاد علیپور
خیلی ممنون و بسیار عالی