جستجو برای:
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
 
افق وب
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
ورود / عضویت

وبلاگ

افق وب > بلاگ > مقالات آموزشی > برنامه نویسی > HTML-CSS > آموزش رایگان CSS- جلسه 16

آموزش رایگان CSS- جلسه 16

مرداد 12, 1400
HTML-CSS, برنامه نویسی

جدول چیست؟ چطور می توانیم جدول ها را زیباتر طراحی کنیم؟ منظور از استایل دهی به جدول ها چیست؟ در این جلسه قصد داریم به جدول ها در CSS بپردازیم و نحوه ی استایل دهی آنها را با هم یاد بگیریم پس با ما همراه باشید.

 

از آنجایی که جلسات آموزشی ما با هدف خاصی پشت سر هم قرار داده شده اند, در صورتی که هنوز  جلسه 15 از آموزش رایگان CSS  را مطالعه نکرده اید از لینک قرار داده شده, استفاده کنید و ابتدا این جلسه را مطالعه کنید.

 

جدول ها در HTML

در جلسه ی پنجم از آموزش HTML در مورد جدول ها و به طور مشخص در مورد ایجاد جدول ها صحبت کردیم. با استفاده از HTML نیز میتوان به جدول ها استایل دهی کرد اما CSS امکانات گسترده تری را در اختیار ما قرار داده است. پس با HTML میتوان یک جدول ایجاد و با CSS به طراحی و زیباتر کردن آن اقدام کرد. اما این استایل دهی به چه صورت انجام می گیرد؟

 

قبل از اینکه ادامه ی این جلسه را مطالعه کنید پیشنهاد می کنیم بار دیگر نگاهی به جلسه پنجم از آموزش HTML بیندازید و نحوه ی ایجاد یک جدول را مرور کنید.

 

ویژگی ها

ویژگی هایی که در استایل دهی جدول ها در CSS به ما کمک می کنند و در ادامه ی این جلسه قصد داریم به معرفی هر کدام بپردازیم در جدول زیر آمده اند. به نظر شما این جدول چطور میتواند بهتر استایل دهی شود؟

در آخر این آموزش شما قطعا می توانید جدولی بهتر از آنچه ما طراحی کرده ایم طراحی و استایل دهی کنید.

 

border

برای کشیدن خط به دور لبه های جدول

border-collapse

برای تک خطی کردن خط دور لبه های جدول
Text-align

برای ترازبندی متن سلول های جدول

Vertical-align

برای تنظیم تراز متن بصورت عمودی
Padding

برای ایجاد فاصله بین متن و بدنه سلول ها

hover

برای وقتی ماوس میره رو سلول های جدول
()nth-child

تنظیم سطرهای زوج و فرد

 

Border جدول ها

border ها نقش مهمی را در جدول ها بر عهده دارند که در جلسه هفتم آموزش CSS به طور مفصل در مورد آنها صحبت کردیم.

مثال؛

<style>
table {
border: 1px solid blue;
background: aliceblue;
}
th, td {
border: 1px solid lightblue;
padding: 10px;
}
</style>

آموزش رایگان CSS- جلسه 16| جدول ها در CSS
جدول ها در CSS

خاصیت border-collapse

در مثال قبل دیدیم که به طور پیش فرض دو خط دور جدول کشیده می شود. برای اینکه این دوخط را به یک خط تبدیل کنیم باید از خاصیت border-collapse استفاده کنیم. مقادیری که این خاصیت می تواند دریافت کند در زیر آمده است؛

  •  collapse
  •  seperate

خاصیت collapse خط های جدول را به یک خط تبدیل می کند برای مثال نمونه جدول مثال قبل را با ویژگی collapse در زیر می بینید؛

table {
border: 1px solid blue;
background: aliceblue;
border-collapse: collapse;
}

آموزش رایگان CSS- جلسه 16| جدول ها در CSS
جدول ها در CSS

 

🙋‍♀️خب حالا ویژگی seperate چه کاری انجام میدهد؟

✔ دقیقا بر عکس collapse عمل می کند. یعنی اگر نیاز به جدول با حاشیه ی دو خط داشته باشیم از این ویژگی استفاده می کنیم. border-collapse جدول ها به طور پیش فرض دارای این مقدار هستند.

 

خاصیت Text-Align

با استفاده از این خاصیت می توانیم متن موجود در جدول ها را تراز کنیم. یعنی تعیین کنیم که وسط چین, چپ چین یا راست چین باشند. مقادیری که text-align می تواند دریافت کند در زیر آورده شده است؛

  •  left برای چپ چین
  •  center برای وسط چین
  •  right برای راست چین

خاصیت vertical-align

خاصیت vertical-align نیز مانند خاصیت Text-Align برای تراز کردن متن موجود در جدول مورد استفاده قرار می گیرد. با این تفاوت که متن را به صورت عمودی تراز می کند.

خاصیت vertical-align می تواند سه مقدار زیر را دریافت کند؛

  •  top
  •  bottom
  •  middle

مثال؛

table {
border: 1px solid blue ;
background: aliceblue;
border-collapse: collapse;
}
th, td {
border: 1px solid lightblue;
padding: 10px;
height: 60px;
width: 100px;
text-align: right;
vertical-align: bottom;
}

آموزش رایگان CSS- جلسه 16| جدول ها در CSS
جدول ها در CSS

 

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

نکته؛ دقت کنید که برای اعمال دو خاصیت vertical-align و text-align لازم است که سلول های جدول فضای خالی برای ایجاد تغییرات را داشته باشند. یعنی ابتدا باید با استفاده از سایر خاصیت ها ابعاد سلول ها را بزرگ کنیم تا این تغییرات به خوبی نشان داده شوند.

padding در جدول

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

th, td {
border: 1px solid lightblue;
text-align: center;
padding: 10px 30px;
}

 

آموزش رایگان CSS- جلسه 16| جدول ها در CSSآموزش رایگان CSS- جلسه 16| جدول ها در CSS

 

ویژگی hover

ویژگی hover یکی از جذاب ترین ویژگی هایی است که CSS در اختیار ما قرار داده. با استفاده از این ویژگی میتوانیم تعریف کنیم که وقتی موس روی یک عنصر قرار گرفت, رنگ عنصر یا پس زمینه ی آن چه تغییری کند.

<style>
th:hover, td:hover {
background: #2395af;
color: #fff;
}
</style>

 

ویژگی nth-child

این ویژگی به ما این امکان را می دهد تا فرزندان یک عنصر را بر اساس ترتیبشان انتخاب کنیم. یکی از جذاب ترین استفاده ها از این ویژگی انتخاب آیتم های زوج و فرد از بین فرزندان یک عنصر است.
از این خاصیت زمانی استفاده می شود که میخواهیم ردیف های فرد یا زوج دارای رنگ پس زمینه ی مجزا باشند یا موارد مشابه این؛

<style>
thead tr {
background: #608990;
color: #fff;
}
tfoot {
background: #989898;
}
tbody tr:nth-child(odd) {
background: #e0fbff;
}
</style>

آموزش رایگان CSS- جلسه 16| جدول ها در CSS

آموزش رایگان CSS- جلسه 16| جدول ها در CSS

 

تمرین؛ با توجه به جلسه پنجم HTML و این جلسه جدولی ایجاد کنید که دارای یک هدر باشد و از پنج سطر تشکیل شده باشد و تعداد ستون های هر سطر مطابق تصویر متفاوت است با استفاده از ویژگی های جدول استایل دهی را مانند تصویر ایجاد کنید.

راهنمایی: برای استایل دهی عناصر از ویژگی nth-child استفاده کنید.

 

دوره ی آموزش html و css

در پایان

در این جلسه با استایل دهی جدول ها آشنا شدیم. اگر نکته ای وجود دارد که متوجه آن نشده اید یا سوالی دارید, در بخش نظرات از ما بپرسید. ما در سریع ترین زمان به سوال ها و نظرات شما پاسخ خواهیم داد.

 

 

4.5/5 - (2 امتیاز)
برچسب ها: Cssآشنایی با cssآموزش رایگان CSSجدول ها در CSS
درباره پروین رستمی

عضو تیم تحریریه افق وب

جدیدتر شروع محتوا نویسی, آیا شما میتوانید یک محتوانویس شوید؟ (جلسه 0)
قبلی انتخاب سبک نوشتاری در محتوا نویسی ( جلسه 1)

دیدگاهتان را بنویسید لغو پاسخ

تازه های آموزش
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
  • 10 تکنیک برای افزایش فالوور اینستاگرام (جلسه 28)
  • راه اندازی کمپین در شبکه های اجتماعی (جلسه 27)
  • آموزش 0 تا 100 ایمیل نویسی (جلسه 26)
آموزش رایگان ووکامرس
آموزش رایگان المنتور
آموزش رایگان html -css
درباره افق وب

ما در افق وب آرزو داریم هرکسی بتواند وبسایت خودش را مطابق سلیقه دلخواه خودش طراحی کند و در این مسیر تمامی آموزش های لازم را از پایه و با بالاترین کیفیت ممکن به صورت کاملا کاربری ارائه میدهیم

دسترسی بیشتر
  • قوانین و شرایط
  • ارتباط با ما
  • استخدام
  • تدریس خصوصی وردپرس
ارتباط با ما
  • تهران، رباط کریم، مجتمع اداری پردیسان
  • 02156434684
  • info@ofoghweb.com
تمامی حقوق برای افق وب محفوظ می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://ofoghweb.com/?p=14084
ورود به سیستم ×

ورود با کد یکبارمصرف
واتساپ
ارسال مجدد کد یکبار مصرف(00:30)
آیا حساب کاربری ندارید؟
نام‌نویسی

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به صفحه ورود به سایت
  • (+98) جمهوری اسلامی ایران
مرورگر شما از HTML5 پشتیبانی نمی کند.