استایل جدول (Tables) در CSS

استایل جدول (Tables) در CSS که قصد داریم ظاهر یک جدول HTML را می‌توان به کمک CSS به شکل متفاوت و زیباتر طراحی کرد و شما در این آموزش یاد خواهید گرفت.

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

جهت مشخص کردن حاشیه ی (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 را تشریح می کند:

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

• Margin: نواحی اطراف border را پاک می کند. margin رنگ پیش زمینه ندارد، و کاملا شفاف است.
• Border: یک 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 سایت شاه کد را مطالعه نمایید. با ما همراه باشید.