آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه دوم)

- visibility ۴ mode_comment
history یاداوری :

در جلسه قبل با طریقه ایجاد یک جدول آشنا شدیم.

گفتیم که یک جدول در html با تگ <table> ساخته می شود و از تگ <tr> برای ساختن ردیف و از تگ <th> و <td> برای ساختن ستون های جدول استفاده می کنیم.

گفتیم که همیشه تگ های <th>که برای نوشتن تیترهای جدول ( table heading ) و تگ <td> که برای نوشتن داده های جدولی ساده ( table data ) استفاده میکنیم. حتما باید در تگ <tr> قرار بگیرند.

با صفت های این تگ ها آشنا شدیم از جمله border , bgcolor , align و ... که کار هر کدام را نیز در جلسه قبل توضیح دادیم. در این جلسه با طریقه گروه بندی سلول ها آشنا خوهیم شد. 

تگ <caption> : از این تگ برای ایجاد یک عنوان برای جدول استفاده می شود. این تگ باید بلافاصله بعد از تگ آغازین table و قبل از اولین ردیف جدول قرار گیرد. به صورت زیر :

به صورت پیش فرض مرورگر ها متن داخل این تگ را بالا و وسط جدول نمایش می دهند. تگ <caption> از صفت زیر پشتیبانی میکند.

align : محل قرارگیری عنوان جدول را مشخص می کند و مقادیر زیر را می پذیرد:

  • right : عنوان در سمت راست جدول قرار میگیرد.
  • left : عنوان در سمت چپ جدول قرار میگیرد.
  • top : عنوان در بالای جدول نمایش داده می شود.
  • bottom : عنوان جدول در پایین جدول نمایش داده می شود.

گروه بندی ردیفی و ستونی جداول

ما می توانیم سلول های جدول را به صورت گروهی از ستون ها و گروهی از ردیف ها تقسیم بندی کرده و خواص مشابهی را به آن ها اعمال کنیم.

گروه بندی ردیفی

ما می توانیم ردیف های جدول را به سه نوع گروه ردیفی تقسیم کنیم : foot , body , head و برای اینکار از سه تگ <tfoot> , <tbody> , <thead> استفاده می کنیم.

هر سه این عنصر ها داری صفات align و valign می باشند که در جلسه قبل به آن ها اشاره شده است.

معمولا از گروه بندی های ردیفی هنگامی استفاده می شود که جدول بسیار طولانی است. یکی از مزیت های این نوع گروه بندی هنگام print گرفتن از این نوع جدول هاست که معمولا چند صفحه ای می شوند و میخواهیم که عنوان و پایه جداول در همه صفحات  چاپی تکرار شوند. یک نمونه از این گروه بندی ردیفی را در زیر مشاهده می کنید.

نتیجه در مرورگر :

info نکته :

همیشه ردیف هایی که داخل تگ <thead> قرار می گیرند بالای جدول و ردیف هایی که داخل تگ <tfoot> قرار می گیرند در پایین جدول ظاهر میشوند.

info نکته :

هر جدول می تواند شامل چندین عنصر <tbody> اما فقط دارای یک عنصر <tfoot> و <thead> باشد. نکته دیگر اینکه طریقه قرار گرفتن این تگ ها به این صورت است که اول تگ <thead> سپس تگ <tfoot> و در آخر تگ یا تگ های <tbody> قرار می گیرند

comment دیدگاه کاربران
HassanTakno

سلام
سجاد جان لطفا از گروه بندی ستونی و تگ هم عکسی نمونه ای چیزی بزار. این قسمت رو من نفهمیدم چی شد.
ممنون

سجاد دریس

سلام.
این یه نمونه.

البته این تگiهای col و colgroup منسوخ شده iهستند و فقط مرورگرهای قدیمی ازشون پشتیبانی میکنن

Sahar66

سلام وقتتون بخیر…
فرض کنیم که ما توی یک ردیف چند تا سلول داریم و میخوایم که یک صفت مثل رنگ آبی رو برای همشون اعمال کنیم، باز هم میشه از تگ col استفاده کرد؟

لقمان آوند

به td هایی که می خواید یک کلاس css نسبت بدید و در css رنگ آبی رو برای اون کلاس بزارید .

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.