نحوه ایجاد جدول در HTML

1395/9/24 علیرضا حاتمی نیا 7276

با سلام مجدد خدمت شما علاقه مندان به مباحث آموزش برنامه نویسی و آموزش طراحی وب
علیرضا حاتمی نیا هستم با آموزش قسمت هفتم طراحی وب در خدمت شما عزیزان هستم.

در جلسه پیش با نحوه ایجاد پیوند یا لینک در صفحه وب آشنا شدیم
در این جلسه نحوه ایجاد جدول در صفحه وب را خواهید آموخت.

یکی از مباحث بسیار پرکاربرد در طراحی وب ایجاد جدول در صفحه می باشد. با کمک جداول شما می توانید اطلاعات مورد نظر را به صورت سازماندهی شده و دسته بندی به کاربران نمایش دهید. مثلا نمایش  لیست نمرات دانش آموزان، اعلام نتایج مسابقات فوتبال، جدول قیمت محصولات یک فروشگاه ، لیست کارکنان یک شرکت و ....
نکته : در گذشته از جداول برای چینش عناصر صفحات نیز استفاده میشد ولی با پیشرفت html و css دیگر از جداول برای این منظور استفاده نمی شود.

ساختار یک جدول :
هر جدول شامل یک یا چند ردیف Row و ستون column می باشد که محل تلاقی هر ردیف با یک ستون را سلول یا  cell می ناند که اطلاعاتی مانند متن، تصویر و ... در هر سلول جای میگیرد.

ساختار جدول در HTML

تگ <table> برای ایجاد جدول :
هر جدول در HTML با تگ باز و بسته <table></table> شروع و خاتمه میابد. داخل این دو تگ برچسب هایی برای معرفی سطرها و ستون ها قرار می گیرند.

 

<table>
.
.
.
</table>

ایجاد سطر :
برای ایجاد سطر در جدول از برچسب  بازو بسته <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>


 

آموزش جدول در HTML


برچسب <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 کار های خارف العاده ای را با جداول انجام خواهیم داد.
در پایان یک ویدیو آموزشی برای این قسمت تهیه کردم که می توانید از طریق لینک زیر مشاهده و دانلود نمایید.
با تشکر از همراهی شما عزیزان

دانلود ویدیو

 

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت