آموزش HTML5
آموزش HTML5

table در html

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

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

 

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

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

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

گروه بندی های ستونی

به وسیله این نوع گروه بندی میتوانیم سلول های چندین ستون را به نوعی با هم مرتبط کرده و یکسری خواص مشترک را برای آن ها تعیین کنیم. برای گروه بندی های ستونی به دو طریق می توان عمل کرد:

استفاده از تگ </ col> : با اسنفاده از این تگ تهی که نیز باید بعد از تگ آغازین جدول قرار بگیرد می توان یک یا چند ستون را به هم مربوط و در واقع با هم گروه بندی کرد:

بدین منظور هر عنصر  </ col> نشان دهنده یک گروه ستونی خواهد بود. اما می توان با استفاده از صفت span مشخص کرد که گروه ما شامل چند ستون از جدول باشد. به عنوان مثال در کد زیر سه گروه تشکیل می شود. که گروه ستونی اول شامل اولین ستون جدول، گروه دوم شامل سه ستون بعدی آن و گروه سوم شامل دو ستون بعد از آن ها خوهد بود:

 

دقت کنید که تگ colgroup جزء تگ های تهی نیست اما محتوای آن در این حالت می بایست خالی باشد.

برای مشخص کردن اینکه یک گروه ایجاد شده به وسیله تگ <colgroup> شامل چند ستون از جدول باشد دو راه وجود دارد: یکی از استفاده از صفت span که تعداد گروه های هر ستون را مشخص می کند. به این مورد در بالا اشاره کردیم.

راه دیگر استفاده از تعدادی تگ <col> داخل تگ <colgroup> است. در واقع تعداد تگ های <col> به کار رفته در داخل هر <colgroup> تعداد  ستون های آن گروه ستونی را مشخص می کند. به عنوان مثال کد زیر دقیقا همان نتیجه ای را خواهد داشت که کد فوق با استفاده از صفت span می کرد:

 

اصطلاحا به گروه های ستونی که با استفاده از تگ <colgroup> ایجاد می شوند، گروه ستونی ساختاری و به گروه هایی با استفاده از تگ <col> ایجاد می شوند. گروه های ستونی غیر ساختاری می گویند.

تفاوت گروه های ساختاری و غیر ساختاری است که از صفت “rules=”group برای نمایش مرز گروه ها در جداول استفاده می شود است. در این صورت فقط مرز گروه های ستونی ساختاری نمایش داده خوهد شد.

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

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net