نسخه آزمایشی

جلسه ۶ فیلم آموزشی جداول در HTML
جلسه ۶ فیلم آموزشی جداول در HTML

فیلم آموزشی رایگان جداول در HTML

 جلسه ششم: آموزش رایگان جداول در HTML

با سلام به کاربران خوب learningtv.ir

در این فیلم آموزشی که برای شما در نظر گرفتیم یاد می گیریم که چطور در صفحات وب یک جدول ایجاد کنیم.همچنین یاد می گیریم که چطور برای جدول عنوان یا caption در نظر بگیریم و یا چطور سلولهای آن را به صورت افقی یا عمودی با هم ادغام کنیم.در این فیلم یاد می گیریم که چطور از thead,tbody,tfoot استفاده کنیم و چه کابردهایی دارد.

دانلود رایگان فیلم آموزشی جداول در HTML

مدت فیلم آموزشی:۲۰ دقیقه + زبان فارسی

حجم فایل:۱۶٫۲ مگابایت

**************

نحوه تعریف جدول:

عبارت border=1 باعث خواهد شد تا سلول ها و border ها از یکدیگر متمایز باشند.البته توصیه می شود بر اساس استانداردهای HTML5 هر گونه استایل دهی در داخل CSS صورت پذیرد.

نحوه تعریف ردیف و سلول:

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

تگ Caption جهت عنوان گذاری جدول:

از تگ <caption> جهت عنوان گذاری برای جدول استفاده می شود.نکات مهم در استفاده از این تگ این است که قاعدتا باید بلافاصله بعد از تگ <table> قرار بگیرد و از طرفی در هر تگ <table> حداکثر یک تگ <caption> استفاده نمود.این تگ همچنین باید بسته شود.هنگام استفاده از تگ <caption> عنوان جدول به طور پیشفرض در بالای جدول و وسط قرار می گیرد.بعد که CSS را فرا گرفتیم ، می توانیم با استفاده از text-align و caption-side این عنوان را جابجا کنیم.

تعیین header جدول:

برای اینکه معمولا ردیف اول جداول به صورت عنوان هر ستون یا header تعیین می شود این کار را در صفحات وب و در جداول در HTML می توانیم با استفاده از تگ <th> انجام بدهیم.استفاد از تگ <th> به جای <td> در سر ستون ها باعث می شود که این ردیف کمی bold تر قرار بگیرد و در وسط هر سلول جای بگیرد و از داده های جدول متمایز شود.در صورتی که استفاده از تگ <td> باعث می شود که متن به صورت نرمال و پیشفرض چپ-چین باشد.

 

 

ادغام (merge) کردن سلول ها :

با استفاده از دو attribute با نام های rowspan و colspan می توانیم خانه های یک جدول را به صورت عمودی یا افقی (ستونی یا ردیفی) ادغام کنیم.

 

در کد بالا طرز استفاده از rowspan  و colspan را یاد گرفتید.

استفاده از تگهای thead,tbody,tfoot:

گاهی پیش می آید جداول ما آنقدر بزرگ است که مثلا هنگام پرینت یا پیشنمایش بخشی از آن چند تکه می شود در صفحات مختلف.خب در این موارد گاهی برای کاربر فهم داده سخت است که مثلا نام ستون این داده چیست.اینجوری همیشه باید به نام ستون در صفحه اول مراجعه کند.حالا اگر سرستون ها و یا فوتر همیشه در همه صفحات قراربگیره اصولی تر هست.خب برای این مهم از تگهای thead,tbody,tfoot استفاده می کنیم.جدول به سه بخش هدر،بدنه،فوتر تقسیم می شود و در میان این تگها قرار میگرد.معمولا هدر و فوتر یک ردیف هستند و ولی ممکن است که چند ردیفی هم باشند.

 

نکته جالب این هست که می توانید حتی جای این سه بخش رو عوض کنید ولی در خروجی تغییری داده نمی شود.مثلا تگ <thead> را به انتها ببریم و مثلا <tbody> اول و <tfoot> در وسط قرار بگیرد  باز هم در خروجی همان ترتیب صحیح نمایش داده می شود(می توانید امتحان کنید (:dash2:) )

*** صمیمانه پذیرای پیشنهاد، انتقاد و نظر شما در مورد کیفیت فیلم های آموزشی هستیم ***

۲ نظر برای "جلسه ۶ فیلم آموزشی جداول در HTML"


  1. ابراهیم گفت:

    خیلی ممنون عالی عالی عالی

ارسال دیدگاه

نام (*)
پست الکترونیکی (*)
وبسایت

There are no products