این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.

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

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

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

Free-Learn

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

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

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

نام فامیلی امتیاز
صادق اسدی ۸۴
مهدی اکبری ۷۸
مینا محسنی ۶۹
نسیم دانشی ۶۵

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

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

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

حالا دیگه به هراندازه که دلمون بخواد میتونیم سطر ایجاد کنیم و یا مثلا داخل هر یک از سطرها هراندازه که بخوایم میتونیم سلول ایجاد کنیم.

مثال شماره ۱ : ایجاد یه جدول ساده ( ۲ سطر و ۳ ستون )

امتحان کنید

حالا اگه بروی دکمه (امتحان کنید) کلیک نمایید ، میبینید که در خروجی یک جدول ایجاد شده ( البته هیچ استایل خاصی نداره مثلا خط کشی شده نیست یا مثلا رنگ بندی نداره و.. که ان شاالله کمی جلوتر استایل هم بهش میدیم )

Free-Learn

جداول یا Tables در HTML

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

  • th – برای تعیین عنوان ستون های جدول
  • 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

تگ های thead و tbody و tfoot در جدول ها

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

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

امتحان کنید

Free-Learn

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

خب در ادامه ی آموزش کار با جداول یا Tables در HTML میخوایم با جریان حاشیه ها یا Border آشنا شویم.

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

امتحان کنید

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

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

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب