جدول در CSS

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

طبق روال همبشه ابتدا توضیحی اجمالی را در مورد table ها در html میخوانیم:

در گذشته جداول یا همان Table ها در HTML کاربرد بسیار زیادی داشتند. تا حدی که بسیاری از سایت ها، قالب و نمای خود را به طور کامل بر مبنای جداول پیاده سازی میکردند. امروز دیگر طراحی قالب سایت بر مبنای جداول کاملا منسوخ شده (هرچند متاسفانه هنوز گاهی شاهد استفاده از table ها در طراحی سایت ها هستیم) اما جدول های HTML هنوز زنده و پر کاربرد هستند و کارایی خود را از دست نداده اند. در حال حاضر برای طراحی قالب ایمیل یکی از بهترین و مطمئن ترین روش ها، اتکا به همین جداول اج تی ام ال است و البته فکر نمیکنم نیازی به اشاره کردن به این موضوع باشد که جداول هنوز هم در نمایش اطلاعات به کاربران نقش مهمی دارند.

در اچ تی ام ال برای تعریف یک جدول از تگ table استفاده میکنیم. هر جدول میتواند شامل سربرگ جدول، ردیف ها و سلول های اطلاعات باشد.

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

ظاهر یک جدول HTML را می توان به کمک CSS به شکل قابل توجهی بهبود بخشید .

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

 table,th,td {
 border: 1px solid black;
{

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

خاصیت border-collapse

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

table {
 border-collapse: collapse;
 }
 Table, th, td {
 Border:1px solid black;
 }

جدول در CSS

طول و عرض جدول

طول و عرض یک جدول به ترتیب با خاصیت های height و width مشخص می شود. مثال زیر پهنای جدول را به %۱۰۰ و در ازای المان های <th> را 50px قرار می دهد

مثال

table, td, th{
 border: 1px solid black;
 }
 table{
 width: 100%;
 }
 th{
 height: 50px;
 }

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

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

th {
 text-align: left;
}

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

خاصیت align-vertical ،ترازبندی را به صورت عمودی تنظیم می کند، به عبارتی دیگر جای دهی متن در بالا، پایین و وسط درون جدول . به صورت پیش فرض، در ترازبندی عمودی، نوشته در وسط جدول قرار می گیرد (برای هر دو المان های مثال ذیل نوشته را با خاصیت align-vertical برای المان های <td> در پایین جدول قرار می دهد.

مثال

td {
 height: 50px;
 vertical-align: bottom;
}

جدول در CSS

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

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

td {
 padding: 15px;
}

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

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

مثال

table, td, th {
 border: 1px solid green;
 }
 th {
 background-color: green;
 color: white;
 }

ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری جدول در CSS پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت. پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید