آموزش تگ table در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ table در HTML با من همراه باشید.

آموزش تگ table در HTML

Free-Learn

تگ Table در HTML

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

تعدادی / یکسری تگ نیز وجود دارد که همگی درون تگ <table> و برای ایجاد جدول مورد استفاده قرار میگیرند، این تگ ها عبارتند از :

  • <tr> – برای ایجاد سطرهای جدول
  • <th> – برای ایجاد ستون های جدول
  • <td> – برای ایجاد سلول یا همون خانه های جدول
  • <caption> – برای ایجاد عنوان یا کپشن برای جدول
  • <thead> – برای ایجاد یک هدر ثابت برای جدول
  • <tbody> – برای ایجاد یک بدنه ثابت برای جدول
  • <tfoot> – برای ایجاد یک فوتر ثابت برای جدول
  • <col> – برای تعریف خواص یا استایل گروهی به سلول های جدول
  • <colgroup> – برای تعریف خواص یا استایل گروهی به سلول های جدول

از تگ های پراستفاده برای ایجاد جدول در یک صفحه وب ، تگ Table برای ایجاد اسکلت جدول و تگ tr برای ایجاد سطرهای جدول و تگ th برای ایجاد ستون های جدول و تگ td برای ایجاد سلول های جدول می باشد.

Free-Learn

مثال از تگ table در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : جدول پیشفرض بدون هیچ استایلی

امتحان کنید

مثال شماره ۲ : جدول با استایل (مشخص کردن اندازه جدول و خط دور لبه)

امتحان کنید

مثال شماره ۳ : جدول بهمراه کپشن یا عنوان

امتحان کنید

مثال شماره ۴ : استفاده از تگ های thead و tbody و tfoot در تگ table بصورت نامرتب (برای اینکه ثابت کنیم این تگ ها در هنگام نمایش ثابت می باشند) مثلا تگ thead را در آخر جدول گذاشتیم ولی خب در خروجی تگ thead در ابتدای جدول قرار میگیرد.

امتحان کنید

مثال شماره ۵ : یک جدول با استایل و رنگ بندی (استفاده از CSS)

امتحان کنید

مثال شماره ۶ : برای مشاهده آموزش نحوه ( ادغام کردن ستون های جدول و سطرهای جدول ) لطفا بروی لینک های مربوطه کلیک نمایید.

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ table در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی بله بله بله بله بله

Free-Learn

جدول صفات تگ table در HTML

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

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

نام صفت مقدار توضیح
align left
center
right
مشخص میکند که تراز یا موقعیت قرار گیری جدول چگونه باشد.()
bgcolor rgb(x,x,x)
xxxxxx#
colorname
رنگ پس زمینه جدول را مشخص میکند.()
border ۱
۰
یک خط به دور لبه های جدول میکشد.()
cellpadding pixels ایجاد یک فاصله/فضای خالی بین دیواره سلول و محتوای سلول.()
cellspacing pixels ایجاد یک فاصله/فضای خالی بین سلول های جدول.()
frame void
above
below
hsides
lhs
rhs
vsides
box
border
نحوه نمایش حاشیه/بوردر یا خط دور لبه (خارجی) را مشخص میکند.()
rules none
groups
rows
cols
all
نحوه نمایش حاشیه/بوردر یا خط دور لبه (داخلی) را مشخص میکند.()
summary text یک توضیح/شرح یا خلاصه از محتوای جدول را مشخص میکند.()
width pixels
%
اندازه عرض جدول را مشخص میکند.()

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ table از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

تمامی صفات تگ table در HTML5 منسوخ شده و پشتیبانی نمی شود، لذا باید از CSS بجای این صفات استفاده نمایید.

کمی قبلتر طراحان وب ، از جدول برای ایجاد بخش ها یا قسمت ها و یا بطور کلی برای قالب بندی سایت استفاده میکردند ولی امروزه با وجود تگ DIV دیگه نباید اصلا از جدول استفاده نمایید.

استفاده از جدول برای قالب بندی یک وبسایت از نظر موتورهای جستجوگر همچون گوگل کاری بسیار غیرحرفه ای و اشتباه می باشد و در سئو نیز تاثیر بسیار منفی دارد.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ table را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.


Free-Learn