جدول در CSS

جدول در CSS به ایجاد جداول اشاره نمی کنند ، بلکه به سبک آن ها با استفاده از ویژگی ها اشاره می کنند.

نکات اصلی جدول در CSS:

• افزودن جدول HTML معمولی به وب سایت ها دیگر کاربر پسند نیست. سبک سازی جداول برای تفکیک محتوا به روشنی و پیگیری آن بسیار مهم است.
• با CSS ، جداول می توانند حاشیه های سفارشی ، فاصله ، padding ، تراز بندی ، پس زمینه و غیره داشته باشند.

استایل جداول با استفاده از CSS

قبل از شروع به کارگیری ویژگی های CSS ، به یک مثال از جدول HTML سنتی نگاهی بیندازید.

Duration	Price	Country
1week	340$	Austria
1month	1750$	Mexico
1week	460$	Sweden
2weeks	520$	Germany

نکته: سبک سازی یک جدول خوش ساخت آسان است.

مرز

جدول HTML با بخش های جداگانه هم مرز است. ویژگی مختصر CSS حاشیه مرزها را در یک اعلامیه تعیین می کند.

توجه: حاشیه جدول CSS فقط زمانی کار می کند که خاصیت حاشیه سبک (جامد ، نقطه چین ، تیز ، مضاعف و غیره) داشته باشد

مثال زیر عرض حاشیه ، رنگ و سبک عناصر <table>  و <th> و <td> را مشخص می کند. به تأثیر مرزهای دوگانه توجه کنید:

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

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

سقوط مرز

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

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

table {
   border-collapse: collapse;
}

فاصله بین مرزها

ویژگی مرز-فاصله فاصله بین سلولها را در یک جدول تعیین می کند. مقادیر آن فاصله افقی و عمودی را تعیین می کند و از شاخص های طول (px ، cm ، pt و غیره) استفاده می کند.

توجه: ویژگی فاصله-مرز فقط زمانی کار می کند که فروپاشی مرز جدا باشد.

در مثال زیر ، ما از مرز فاصله در مرزهای جداشده جدول استفاده می کنیم:

table {
   border-spacing: 20px 40px;
   border-collapse: separate;
}

ویژگی فاصله مرزی یا یک یا دو مقدار را می پذیرد:

• یک مقدار فاصله عمودی و افقی مرزهای جدول را در HTML نشان می دهد.
• دو مقدار: مقدار اول فاصله افقی را تنظیم می کند ، در حالی که مقدار دوم عمودی را تنظیم می کند.

زیرنویس

قسمت زیرنویس موقعیت جدول را <caption> تنظیم می کند. برای نشان دادن موقعیت می توانید از کلمات کلیدی بالا و پایین استفاده کنید.

به یاد داشته باشید: عنوان باید اولین فرزند عنصر <table> باشد.

در مثال ، عنوان خود را در پایین جدول قرار می دهیم:

caption {
   caption-side: bottom;
}

توجه: از ویژگی تراز منسوخ شده برای نشان دادن موقعیت استفاده نکنید. به جای آن از قسمت زیرنویس استفاده کنید.

سلول های خالی جدول در CSS

ویژگی خالی سلول ها نشان می دهد که سلول های فاقد هرگونه محتوا باید حاشیه و پس زمینه داشته باشند.

در اینجا نکات اصلی ذکر شده است:

• ویژگی سلول های خالی می تواند مقادیر نمایش و پنهان داشته باشد. وقتی برای پنهان کردن تنظیم می شود ، مرزها و پس زمینه سلول های خالی نشان داده نمی شوند.
• سلول های خالی فقط در صورت جدا بودن مرز فروپاشی کار می کند.

مثال زیر از مخفی کردن در سلول های خالی استفاده می کند:

table {
   empty-cells: hide;
   border-collapse: separate;
}

چیدمان جدول

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

• خودکار عرض جداول و سلول ها را با توجه به محتوای داخل محاسبه می کند.
• مجموعه های ثابت که عرض جدول و ستون ها به عناصر <table> و <col> بستگی دارد. عرض همچنین می تواند به ردیف اول سلول ها بستگی داشته باشد.

در مثال ، تفاوت بین دو مقدار طرح جدول را مشاهده می کنید:

table.auto {
   table-layout: auto;
}

table.fixed {
   table-layout: fixed;
}

عرض و ارتفاع

برای تعیین ابعاد جدول CSS ، به دو ویژگی یکپارچه سازی نیاز داریم:

Savings	Lastname	Firstname
$35	Jibbrings	Josh
$26	Ollion	Nancy
$28	Anderson	Ben
$45	Rickler	Tom

• خصوصیت عرض مقدار کشش جدول به صورت افقی را توصیف می کند.
• ویژگی ارتفاع پارامترهای عمودی را تعیین می کند.
• ما می توانیم این مقادیر را با استفاده از شاخص های طول (pt ، px ، cm و غیره) یا درصد (٪) تنظیم کنیم.

مثال زیر عرض و جدول را برای عنصر <th> تنظیم می کند:

table {
    width: 100%;
}

th {
    height: 50px;
}

تراز کردن متن جدول در CSS

مشخصه متن تراز بندی تراز افقی جدول را تعیین می کند.

th {
    text-align: left;
}

این ویژگی می تواند مقادیر زیر را داشته باشد:

• چپ ، مرکز ، راست: توسط همه مرورگرها به جز Internet Explorer و Microsoft Edge پشتیبانی می شود.
• شروع و پایان: توسط همه مرورگرها به جز Internet Explorer و Microsoft Edge پشتیبانی می شود.
• match-parent: در Microsoft Edge ، Internet Explorer و Safari کار نمی کند.
• justify-all: در هیچ مرورگری کار نمی کند.
• رشته برای ترازبندی مبتنی بر کاراکتر: در هیچ مرورگری کار نمی کند.

Savings	Lastname	Firstname
$35	Jibbrings	Josh
$26	Ollion	Nancy
$28	Anderson	Ben
$45	Rickler	Tom

توجه: به طور پیش فرض ، محتوای <th> در مرکز و <td> در سمت چپ تراز می شوند.

تراز کردن عمودی

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

Age	Lastname	Firstname
35	Jibbrings	Josh
26	Ollion	Nancy
28	Anderson	Ben
45	Rickler	Tom

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

توجه: به طور پیش فرض ، هدر و داده ها دارای تراز عمودی میانی هستند.

پدینگ

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

ویژگی نشانگرهای طول (pt ، px ، cm و غیره) ، یا درصدها (٪) را به عنوان مقادیر می پذیرد.

Age	Lastname	Firstname
35	Jibbrings	Josh
26	Ollion	Nancy
28	Anderson	Ben
45	Rickler	Tom

th, td {
    padding: 15px;
    text-align: left;
}

توجه: برای اطمینان از اینکه اطلاعات به اندازه کافی شفاف و واضح خوانده می شوند ، جدول pad HTML را تنظیم کنید.

سبک های پیشرفته جدول

مرزهای افقی جدول در CSS

می توانید مرزهای جدول CSS را به عنوان تقسیم کننده های افقی ردیف ها تنظیم کنید. برای دستیابی به این اثر ، ما به ویژگی مرز پایین نیاز داریم.

ما مقادیر انتهای حاشیه را تعریف می کنیم که عرض ، سبک و رنگ آن را در یک اعلان نشان می دهد.

th, td {
    border-bottom: 2px solid black;
    text-align: left;
}

Age	Lastname	Firstname
35	Jibbrings	Josh
26	Ollion	Nancy
28	Anderson	Ben
45	Rickler	Tom

ماوس

انتخابگر: شناور باعث تعاملی تر بودن جداول می شود. هنگامی که کاربران نشانگرهای ماوس خود را روی ستون یا ردیف قرار می دهند ، جداول یک یا چند ویژگی خاصیت آن را تغییر می دهند.

به عنوان مثال ، می توانید هر بار که کاربران در سطر قرار می گیرند ، رنگ پس زمینه جدول HTML را تغییر دهید:

tr:hover {background-color:#b495c9;}

رنگ ها

شما رنگ زمینه های جدول HTML را تنظیم می کنید تا محتوا جذاب تر و قابل توجه تر شود. با استفاده از ویژگی های رنگ و رنگ پس زمینه ، می توانیم رنگ های مهیج را به محتوای جدول و پس زمینه آن اختصاص دهیم.

می توانید عناصر جدول HTML را با رنگ پس زمینه جداگانه سبک کنید. <header> می تواند یک رنگ داشته باشد ، در حالی که عناصر دیگر دارای رنگ دیگری هستند.

th {
    background-color: #8842d5;
    color: white;
}
tr {
    background-color: #f2f2f2;
}

توجه: می توانید رنگ ها را با استفاده از نام های رنگ ، نشانگرهای RGB یا HEX نشان دهید.

طرح Zebra

برای ایجاد هر دو خط دو رنگ زمینه ، از انتخابگر nth-child () استفاده می کنیم.

همراه با خاصیت رنگ پس زمینه ، به ما در دستیابی به اثر zebra کمک می کند.

برای تعیین رنگ پس زمینه ، از همان شاخص های قبلی استفاده می کنیم.

tr:nth-child(even) {
    background-color: #f2f2f2;
}

نکات مهم جدول در CSS:

• جداول برای داده های جدولی عالی هستند. با این حال ، از آن ها برای چیدمان استفاده نکنید.
• Bootstrap گزینه های زیادی برای یک ظاهر طراحی شده در جداول CSS فراهم می کند.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.