آموزش کار با جداول یا Tables در HTML

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

آموزش کار با جداول یا Tables در HTML

Free-Learn

کار با جداول یا Tables در HTML

جدول یا جداول یا به انگلیسی Tables به مجموعه از اطلاعات که بصورت سطر و ستونی در کنار همدیگر تنظیم شده اند گفته می شود ، جدول ها یکی از بهترین روش های ارائه و درک سریع و بالا از اطلاعات می باشد.

ما در زبان HTML و بطور کلی در یک صفحه ی وب میتوانیم به راحتی از جدول ها استفاده نماییم و آنها را ایجاد نماییم، برای مثال لطفا به جدول زیر توجه نمایید.

Name Family WebSite
Sadegh Asadi Free-Learn
Sadegh Asadi Free-Learn
Sadegh Asadi Free-Learn
Sadegh Asadi Free-Learn

در HTML ما نیز میتوانیم از جدول ها یا Tables استفاده نماییم، برای ایجاد یک جدول در HTML باید از تگ <table> و برای ایجاد سطرهای جدول از تگ <tr> و در نهایت برای ایجاد خانه ها یا سلول های جدول از تگ <td> استفاده کرد.

شکل کلی یک جدول در HTML بصورت زیر می باشد :

تگ table بدنه اصلی و وجودی جدول رو ایجاد میکند و با استفاده از تگ tr سطر رو ایجاد میکنیم سپس با استفاده از تگ td میایم و یک سلول یا خانه ایجاد میکنیم و در نهایت هم تگ td را میبندیم و هم تگ tr که سطرمون هست.

حال لطفا به مثال زیر توجه نمایید :

امتحان کنید

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

Free-Learn

جداول یا Tables در HTML

خب دوستان من در ادامه میخوام شمارو با یکسری تگ و ویژگی سی اس اس که میتوان بروی جدول ها اعمال کرد آشنا کنم، لطفا در ادامه با من همراه باشید.

  • th – برای تعیین عنوان ستون های جدول
  • Caption – برای تعیین عنوان یا کپشِن جدول
  • Thead – برای تعیین هدر یا سربرگ جدول
  • Tbody – برای تعیین بدنه اصلی جدول
  • Tfoot – برای تعیین فوتر یا پابرگ جدول
  • Css Border – ایجاد خط به دور جدول و سلول ها
  • Css Border-Collapse – تک خطی کردن خط دور جدول
  • Css Padding – ایجاد فاصله بین محتویات جدول
  • Css Text-align – تعیین محل قرار گیری محتوای جدول
  • Css Border-Spacing – ایجاد فاصله بین سلول های جدول
  • ColSpan – برای ادغام ستون ها
  • RowSpan – برای ادغام سطرها

Free-Learn

تگ Th جدول در HTML

تگ <th> برای تنظیم عناوین ستون های یک جدول می باشد. لطفا به مثال زیر توجه نمایید و همچنین برای مشاهده خروجی دستورات زیر بروی دکمه (امتحان کنید) کلیک نمایید.

امتحان کنید

Free-Learn

تگ caption در جدول ها

با استفاده از تگ caption میتونیم یک کپشن – عنوان را برای جدول مان مشخص نماییم، که البته باید توجه داشته باشید تگ caption حتما بلافاصله بعد از تگ table قرار بگیرد.

امتحان کنید

Free-Learn

تگ thead در جدول ها

ما در HTML با استفاده از تگ thead میتوانیم یک هدر بصورت ثابت در جدول مان ایجاد نماییم، میگم ثابت چونکه هرچیزی که درون این تگ قرار بگیره بصورت ثابت در بالاترین قسمت جدول قرار میگیرد.

یعنی شما اگر ۱۰۰ تا تگ tr و td هم بزارید بالای تگ thead ، در خروجی بازم اطلاعات تگ thead در ابتدا و بالاترین قسمت جدول قرار میگیرد.

امتحان کنید

Free-Learn

تگ tbody در جدول ها

ما با استفاده از تگ tbody در جدول ها در HTML میتونیم بدنه ی اصلی جدول مان را مشخص نماییم، یعنی در واقع هر چیزی که درون این تگ قرار بگیرد به عنوان بدنه اصلی جدول در نظر گرفته می شود.

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

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

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

امتحان کنید

Free-Learn

تگ tfoot در جدول ها

این تگ هم که از اسمش مشخصه، این تگ میاد و فوتر یا پایینی ترین بخش یک جدول را ایجاد/مشخص میکند، پس در HTML برای ایجاد یک فوتر برای جدول باید از تگ tfoot استفاده نماییم.

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

سوال : اگه من در حالت نوشتاری بیام و تگ thead رو بزارم بعد از تگ tbody آیا در خروجی مشکلی ایجاد می شود؟ آیا در خروجی بازم تگ thead در ابتدای جدول نمایش داده می شود؟

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

حال لطفا به مثال زیر توجه نمایید : (در مثال زیر از سه تگ thead,tbody,tfoot استفاده شده است و مکان آنها نیز نامرتب می باشد)

امتحان کنید

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

Free-Learn

ویژگی border در جدول ها

با استفاده از ویژگی border ما میتونیم یک خط را به دور لبه های جدول مان بکشیم.

امتحان کنید

Free-Learn

ویژگی border-collapse در جدول ها

اگر در مثال قبلی به جدول مان توجه کرده باشید میبینید که ۱ خط به دور خوده جدول و ۱ خط هم به دور لبه های خانه های جدول کشیده شده است، برای اینکه فقط ۱ خط به دور لبه های هم جدول و هم خانه ها داشته باشیم باید از ویژگی border-collapse استفاده نماییم.

امتحان کنید

Free-Learn

ویژگی padding در جدول ها

با استفاده از ویژگی padding میتونیم یک فضای مشخصی را بین محتویات و سلول ها ایجاد نماییم.

امتحان کنید

Free-Learn

ویژگی text-align در جدول ها

با استفاده از ویژگی text-align میتونیم تراز یا محل قرار گیری محتویات سلول های جدول را مشخص نماییم.

امتحان کنید

Free-Learn

ویژگی border-spacing در جدول ها

با استفاده از ویژگی border-spacing میتونیم یک فاصله ی مشخصی را بین سلول های یک جدول تنظیم نماییم.

توجه داشته باشید که اگر از ویژگی border-collapse استفاده کرده باشید، ویژگی border-spacing عمل نخواهد کرد.


امتحان کنید

Free-Learn

صفت colspan در جدول ها

ما با استفاده از صفت colspan میتونیم اندازه یک ستون از جدول را به تعداد هرچند ستون که بخواهیم تنظیم نماییم.

امتحان کنید

Free-Learn

صفت rowspan در جدول ها

با استفاده از صفت rowspan میتونیم اندازه یک سطر از جدول را به تعداد هرچند سطر که بخواهیم تنظیم نماییم.

امتحان کنید

Free-Learn

مثال های بیشتر از جدول ها در HTML

مثال شماره ۱ : (یک جدول شیک)

امتحان کنید

خب دوستان به پایان بخش آموزش کار با جداول یا Tables در HTML رسیدیم – امیدوارم که مشکلی در این بخش نداشته باشید و لطفا اگه مشکلی هست از اینجا مشکل تان را برای بنده ارسال نمایید تا بتونم پاسخ بدم.

Free-Learn

  • خلاصه ی این بخش
  • برای ایجاد یک جدول در یک صفحه ی وب باید از تگ <table> استفاده کرد.
  • برای ایجاد سطرهای جدول باید از تگ <tr> استفاده کرد.
  • برای ایجاد ستون های جدول یا سلول های جدول باید از تگ <td> استفاده کرد.
  • برای ایجاد عنوان های ستون های جدول باید از تگ <th> استفاده کرد.
  • با استفاده از تگ های <thead> و <tbody> و <tfoot> میتوان به ترتیب هدر و بدنه و فوتر یک جدول را ایجاد کرد.
  • برای ادغام کردن چند ستون از جدول باید از صفت colspan استفاده کرد.
  • برای ادغام کردن چند سطر از جدول باید از صفت rowspan استفاده کرد.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید