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

علیرضا حاتمی نیا 12722

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

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

جدول ها در HTML

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

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

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

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

برچسب <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>


 

نمایش تگ <td> در 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>

نمایش برچسب <th> در HTML

بسیار خب در اینجا مبحث مقدماتی ساخت جداول در HTML را به پایان می بریم. در آینده و شروع مباحث HTML5 و CSS کار های خارق العاده ای را با جداول انجام خواهیم داد

کلمات کلیدی

لینک های مرتبط

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