آموزش کار با جدول ها در html

آموزش کار با جدول ها در html

در جلسه یازدهم آموزش جامع html سایت بیست آموز به به یکی از پرکاربردترین و مهم ترین مباحث html یعنی آموزش کار با جدول ها در html  می رسیم.

  • کار با جدول ها در html کاربرد بسیار زیادی در طراحی صفحات وب منظم و قانومند دارد.
  • جدول یا Table بخش جداناپذیر صفحات وب سایت های مختلف هستند.
  • اگر از جدول یا table به شکل صحیح استفاده شود ، می تواند به سایت شما هم از نظر کاربران سایت و هم از نظر موتورهای جستجو اعتبار خوبی ببخشد.
  • متاسفانه بسیاری از طراحان صفحات وب با عدم استفاده صحیح و به موقع از جدول ها نه تنها ظاهر و زیبایی سایت خود را درست شکل نمی دهند ، بلکه یک نمره منفی نیز از موتورهای جستجو دریافت می کنند.

با این توضیحات ،جلسه آموزش کار با جدول ها در html را شروع می کنیم.

آموزش کار با جدول ها در html

بخش اول – کاربرد جدول یا table در صفحات وب و روش ایجاد جدول

  • تعریف جدول یا Table و کاربرد آن در طراحی صفحات وب
  • تاثیر جدول در ساختار سایت
  • آیا از جدول میتوان به عنوان ساختار و طرح اصلی سایت استفاده کرد؟
  • تاثیر جدول در رتبه بندی یا SEO سایت
  • تعریف تگ باز و بسته ی <table></table>
  • نحوه استفاده از تگ table
  • تعریف تگ باز و بسته ی <tr></tr>
  • نحوه استفاده از تگ tr
  • کاربرد تگ tr در ایجاد جدول
  • تعریف تگ باز و بسته ی <td></td>
  • نحوه استفاده از تگ td
  • کاربرد تگ td در ایجاد جدول

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش دوم- تعریف مختصر صفت های منسوخ یا Depricate شده جدول ها در html5

  • کاربرد صفت align در جدول
  • کاربرد صفت bgcolor در جدول
  • کاربرد صفت border در جدول
  • کاربرد صفت cellpadding در جدول
  • کاربرد صفت cellspacing در جدول
  • کاربرد صفت frame در جدول
  • کاربرد صفت rule در جدول
  • کاربرد صفت summary در جدول
  • کاربرد صفت width در جدول

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش سوم- نحوه ایجاد و مدیریت کادر حاشیه یا border جدول ها در html

  • نحوه تنظیم اندازه ، رنگ و ظاهر کادر حاشیه یا border جدول ها 
  • آشنایی با دستور border  جهت تنظیم کادر حاشیه جدول ها
  • آشنایی با دستور border-collapse در css و کاربرد آن

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش چهارم – نحوه مدیریت بر فاصله محتوای سلول های جدول با حاشیه سلول های جدول 

  • آشنایی با مفهوم cell padding و کاربرد آن
  • نحوه تنظیم cell padding یا فاصله محتوای سلول تا کادر سلول با استفاده از دستورات css
  • کاربرد دستور padding در جدول ها

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش پنجم – نحوه تعیین چیدمان افقی محتوای جدول ها 

  • آموزش نحوه تعیین چیدمان افقی محتوا یا text alignment جدول ها با استفاده از دستورات css

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش ششم- نحوه تنظیم فاصله بین سلول های جدول 

  • دلیل تنظیم فاصله بین سلول های جدول
  • نحوه تنظیم فاصله بین سلول های جدول با استفاده از دستورات css
  • دلیل کار نکردن فاصله بین سلول جدول ها در html

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش هفتم – نحوه ادغام سطرها و ستون ها دلخواه جدول در html

  • دلیل عمل ادغام سازی سطرها و ستون های جدول
  • نحوه کارکرد عمل colspan در ادغام سازی ستون های جدول
  • نحوه کارکرد عمل rowspan در ادغام سازی ستون های جدول

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش هشتم – نحوه اضافه کردن عنوان یا caption به جدول در html

  • دلیل به کار گیری عنوان یا caption به جدول
  • تشریح تگ باز و بسته ی <caption></caption>
  • تغییر شکل ظاهری عنوان یا captionها توسط دستورات css

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش نهم- تغییر شکل ظاهری جدول ها با استفاده از class یا id جدول

  • نحوه تغییر شکل ظاهری جدول ها بر اساس class یا id جدول

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش دهم – تغییر شکل سطرهای  جدول به صورت یکی در میان

  • تغییر شکل سطرهای  جدول به صورت یکی در میان با استفاده از دستورات css
  • کاربرد دستور nth-child در تغییر ظاهری جدول ها

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش یازدهم – تشریح عملکرد تگ های <col></col> و  <colgroup></colgroup>

  • دلیل استفاده از تگ های <col></col> و  <colgroup></colgroup>
  • تشریح عملکرد تگ colgroup
  • تشریح عملکرد تگ col
  • قوانین استفاده از تگ های <col></col> و  <colgroup></colgroup>

هشدار-اصلی-فیلم

درحال بارگذاری...

بخش دوازدهم – تشریح تگ های <thead></thead> و <tbody></tbody> و <tfoot></tfoot>

  • دلیل استفاده از تگ های <thead></thead> و <tbody></tbody> و <tfoot></tfoot>
  • تشریح عملکرد تگ thead
  • تشریح عملکرد تگ tbody
  • تشریح عملکرد تگ tfoot

هشدار-اصلی-فیلم

درحال بارگذاری...