جلسه ۳۲ – استایل Tables در CSS (قدیمی)

استایل css
استایل css

با سلام .در پی آموزش های پیشین استایل css بدون مقدمه آموزش استایل جداول در سی اس اس را شروع میکنیم ،تا به یک جمع بندی در مبحث استایل عناصر در سی اس اس برسیم.

توجه : این مقاله قدیمی در مورد جداول می‌باشد. برای خواندن مقاله جدید ، مقاله استایل دهی به جداول CSS جدید را مطالعه کنید.

استایل عناصر در CSS

 

جدول در CSS

 

در ادامه آموزش css به ظاهر جداول می‌پردازیم، ظاهر یک جدول HTML را می‌توان به کمک CSS به شکل قابل توجهی بهبود بخشید. برای مثال جدول زیر رادر نظر بگیرید.

Country Contact Company
Germany Maria Anders Alfreds Futterkiste
Sweden Christina Berglund Berglunds snabbköp
 Mexico  Francisco Chang  Centro comercial Moctezuma
 Austria  Roland Mendel  Ernst Handel
 UK  Helen Bennett  Island Trading
 Germany Philip Cramer  Königlich Essen
 Canada  Yoshi Tannamuri  Laughing Bacchus Winecellars
 Italy  Giovanni Rovelli  Magazzini Alimentari Riuniti
 UK  Simon Crowther  North/South

 

 

 

جهت مشخص کردن حاشیه ی ( border )جداول در CSS ، کافی است از خاصیت border استفاده کنید .مثال زیر یک حاشیه ی سیاه برای المان های <table> ، <th> و <td> مشخص می کند

table,th,td {

border: 1px solid black;

}

 

توجه داشته باشید که جدول مورد نظر در مثال فوق دارای دو حاشیه است . این امر به این خاطر است کهجدول و المان های <th> و <td> حاشیه های مجزا دارند .
به منظور نمایش تنها یک حاشیه برای جدول مربوطه، از خاصیت border-collapse استفاده کنید .

خاصیت border-collapse

خصوصیت نام برده تعیین می کند آیا حاشیه های جدول در قالب تنها یک خط ( border ) جمع شوند یا بهصورت مجزا و جداگانه تنظیم شوند

table {

border-collapse: collapse;

}

Table, th, td {

Border:1px solid black;

}

 

طول و عرض جدول

طول و عرض یک جدول به ترتیب با خاصیت های height و width مشخص می شود .

مثال زیر پهنای جدول را به % 100 و درازای المان های < th> را 50px قرار می دهد

table, td, th{

border: 1px solid black;

}

table{

width: 100%;

}

th{

height: 50px;

}

تراز بندی متن به صورت افقی (Horizontal text alignment )

خاصیت text-align ترازبندی متن را تنظیم می کند(آن را راست چین، چپ چین، وسط چین) می کند .به صورت پیش فرض، نوشته ی موجود در المان های <th> وسط چین هستند و متن موجود در المان های <td>چپ چین هستند .
مثال ذیل نوشته ی موجود در المان های <th> چپ چین می کند.

 

 

th {

text-align: left;

}

ترازبندی عمودی متن ( vertical text alignment )

 

خاصیت vertical-align ، ترازبندی را به صورت عمودی تنظیم می کند، به عبارتی دیگر جای دهی متن در بالا،پایین و وسط درون جدول .

به صورت پیش فرض، در ترازبندی عمودی، نوشته در وسط جدول قرار می گیرد (برای هر دو المان های <th> و<td> . )

مثال ذیل نوشته را با خاصیت vertical-align برای المان های <td> در پایین جدول قرار می دهد

td {

height: 50px;

vertical-align: bottom;

}

استفاده از خاصیت padding در جدول

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

td {

padding: 15px;

}

تنظیم رنگ جدول

مثال زیر رنگ حاشیه ها، متن و پس زمینه ی المان های <th> را تعیین می کند

table, td, th {

border: 1px solid green;

}

th {

background-color: green;

color: white;

}

آموزش Box در CSS

تمامی عناصر HTML را می توان box در نظر گرفت. در CSS ، عبارت ” Box Model ” هنگام صحبت در موردdesign و layout استفاده می شود.

CSS Box Model ، الزاما یک box است که دور عناصر HTML را می گیرد، و تشکیل شده است از حاشیه ها،قاب ها border) ، padding )، و محتوای واقعی.

box model ، به ما اجازه می دهد قابی را اطراف عناصر و فضای عناصر در رابطه با عناصر دیگر قرار دهیم.تصویر زیر، box model را تشریح می کند

استایلcss
استایل css

 

توضیح بخش های مختلف

  • margin نواحی اطراف border را پاک می کند. margin رنگ پیش زمینه ندارد، و کاملا شفاف است
  • order یک border اطراف padding و content را می پوشاند. border ، از رنگ پیش زمینه boxتاثیر می گیرد
  • padding نواحی اطراف content را پاک می کند. padding از رنگ پیش زمینه box تاثیر می گیرد
  • content محتوای box ، یعنی جایی که متن و تصاویر ظاهر می شوند

به منظور تنظیم صحیح پهنا و ارتفاع عنصر در همه مرورگرها، باید بدانید box model چگونه کار می کند.

 

پهنا و ارتفاع عنصر

نکته مهم هنگامی که خصیصه پهنا و ارتفاع عنصر را با CSS تعیین می کنید، فقط پهنا و ارتفاع ناحیه contentرا تعیین می کنید. به منظور درک اندازه عنصر، همچنین باید padding ، border ، و margin را نیز اضافه کنید.
کل پهنای عنصر در مثال زیر، 300px است

Width:250px;
Padding:10px;
Border:5px solid gray;
Margin:10px;

 

بیایید محاسبه ریاضی اش را هم انجام دهیم.

250px (پهنا)
+ 20px (چپ و راست padding )
+ 10px(چپ و راست border )
+ 20px (چپ و راست margin )
= 300px

 

تصور کنید فقط 250px فضا دارید. بیایید عنصری با پهنای کل بسازیم

Width:220px;
Padding:10px;
Border:5px solid gray;
Margin:0px;

 

کل پهنای عنصر همیشه باید بصورت زیر برگزار شود

کل پهنای عنصر = پهنا + padding چپ + padding راست + border چپ + border راست + margin چپ +margin راست

کل ارتفاع عنصر نیز باید بصورا زیر محاسبه شود

کل ارتفاع عنصر = ارتفاع + padding بالا + padding پایین + border بالا + border پایین + margin بالا +margin پایین

 

مبحث سازگاری مرورگرها

 

اگر مثال قبلی را در Internet Explorer امتحان کرده باشید، دیده اید که کل ارتفاع دقیقا px 111 نبود.
IE ، هنگام تعیین پراپرتی پهنا، padding و border را در پهنا محاسبه می کند، مگر اینکه یک DOCTYPEتعریف شود.برای حل این مشکل، کافیست یک DOCTYPE به کد اضافه کنید

<!DOCTYPE html>

<html lang="en" xmlns="http//www.w3.org/1999/xhtml">
<html>
<head>
<style type="text/css">
div.ex {
width: 220px;
padding: 10px;
border :5px solid gray;
margin: 0px;
}
</style>
</head>

 

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

 

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

7 نظر

7 پاسخ

  1. سلام و خسته نباشید .
    چجوری میتونم کل جدول رو بیارم وسط صفحه ؟

    1. سلام زهرا. برای وسط آوردن جدول توی صفحه خیلی راه های زیادی هست. عموما این موضوع رو با margin: auto انجام میدن، اما من پیشنهاد میکنم از خاصیت های flexbox مثل justify-content و align-items استفاده کنی.
      در موردشون تو مقاله flexbox در CSS بیشتر میتونی مطالعه کنی.

  2. با عرض سلام و خسته نباشید .
    برای تولید جدولی که هاور سه بعدی دارد و trهای همون ردیف به رنگ دیگه ای در میاد وهاور به یک رنگ دیگه یعنی هاور تو هاور هست کلی سرچ کردم ولی نتوستم همچین چیزی رو از اب در بیارم

    1. سلام مهدی، میتونی یه نمونه ازش رو بفرستی تا بررسی کنیم؟ مثلا تو وب سایتی جایی شبیهش رو دیدی؟ یا عکسی ازش داری؟

    2. سلام اون سه بعدی نیست
      اونارو یکی در میون رنگش رو عوض کرده
      واین که وقتی Hoverمیشه
      (1.1)transform scale
      میشه ویه box_shadowهم میدی که یه جورایی سه بعدی دربیا و این که میتونیperspectiveشوهم۱۰۰۰pxبدی برای بهتر دیده شدن همین

  3. خاصیت border-collapse بهتر توضیح می دید دقیقا متوجه نشدم خاصیتش چیه؟

    1. سلام حمیدرضا این مقاله به زودی بروزرسانی میشه و داخلش به صورت کامل هر بخش رو توضیح میدیم ولی فقط برای اینکه کارت راه بیوفته میگم. به صورت پیشفرض در جداول یک خط کل فضا رو مثل Border میگیره و یک خط دیگه هر کدوم از سطر ها و ستون ها رو. برای اینکه این دو خطی ها به یک خط تبدیل بشن از Border-collapse استفاده میکنیم.

      نمونه Border collapse

      دیگه تصویر بالا رو ببینی کامل متوجهشون میشی مطمئنا.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=