ظاهر یک جدول 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، به ما اجازه می دهد قابی را اطراف عناصر و فضای عناصر در رابطه با عناصر دیگر قرار دهیم.

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

  • 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>

منبع: w3school