• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

25221 ۱۰ مهر ۹۱
1 2
یادآوری : در جلسه قبل با طریقه ایجاد یک جدول آشنا شدیم.

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

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

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

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    HassanTakno(۲۰ تیر ۱۳۹۲)

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

    • ‏‏
      سجاد دریس(۲۱ تیر ۱۳۹۲)

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

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۱ مرداد ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram