آموزش طراحی، تنظیمات و کار با جداول در css

بازدید: 369 بازدید
آموزش کار با جداول در css

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

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

در نگاهی دیگر میتوان کل صفحه وب سایت را یک جدول در نظر گرفت. و از طریق آن برای سایر عناصر برنامه ریزی کرد.

در آموزش امروز قصد داریم نحوه کار با جداول در css و مدیریت و تنظیمات آن را با هم مرور کنیم.

با ما همراه باشید.

ظاهر جداول در صفحات وب سایت را میتوان از طریق css مدیریت کرد.
در این حالت شما کنترل کاملی در خصوص تمامی جوانب جدول در اختیار دارید. و با کمی تمرین میتوانید جدول را به بهترین شکل طراحی کنید.
در آموزش امروز همراه ما باشید تا طراحی و تنظیمات و کار با جداول در css را با هم مرور کنیم.

Table Borders

برای یادآوری کار با جدول در html و تگ های مربوط به آن به این لینک مراجعه کنید.

برای مشخص کردن خطوط و حاشیه های جدول، css ویژگی table border را در اختیار شما قرار میدهد.

برای مثال برای ایجاد جدول زیر کافیست کد زیر را در بخش کدهای css وارد کنید.در این مثال ما برای مقادیر اصلی جدول که <th>، <td> ، و <table>  هستد، یک  خط ساده با رنگ سیاه را تعریف کرده ایم.

جدول1

 

کد این جدول :

[php]
table, th, td {
border: 1px solid black;
}
[/php]
میتوانید از این لینک این کد را تمرین کنید.

[cdb_icon_box icon_style=”icon-font” icon=”fa fa-power-off” icon_position=”left” icon_type=”circle” icon_size=”icon-box-large” title=”دقت کنید:” title_text_transform=”” title_text_font_weight=”” icon_color=”#1e73be” icon_background_color=”#b7b7b7″ icon_border_color=”#f4a9a4″]

همانطور که مشاهده میکنید این جدول دارای حاشیه های دوخط است. این به این دلیل است که هم خاصیت  <th> و هم <td> دارای حاشیه ای جدا برای خود هستند. برای آموزش تگ های <th> و <td>  میتوانید به این لینک مراجعه کنید.[/cdb_icon_box]

border-collapse

برای اینکه تنها یک حاشیه در اطراف خانه های جدول ایجاد شوند میتواندی از ویژگی border-collapse استفاده کنید.  این خصوصیت تعیین می کند که حاشیه های جدول در قالب یک جدول باشند که یا به صورت مجزا دارای حاشیه باشند:

[php]
table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}
[/php]

نتیجه حاصل از کد بالا را از طریق این لینک ببینید.

 

اگر میخواهید تنها یک حاشیه خارجی در اطراف جدول(و نه در اطراف خانه های جدول) داشته باشید، کافیست ویژگی border را برای table تعریف کنید:

[php]
table {
border: 1px solid black;
}
[/php]

نتیجه را ببینید.

طول و عرض جدول

طول جدول با مقدارheight، و عرض آن باwidth ، مقداردهی می شوند.

مثال زیر نحوه کدنویسی و مقداردهی طول و عرض جدول را مشخص می کند. در این کد، مقدار 100%برای پهنای جدول در نظر گرفته شده است. و برای هر یک از خانه های جدول نیز مقدار 50px تعریف شده است:

[php]
table {
width: 100%;
}

th {
height: 50px;
}
[/php]
نتیجه را مشاهده کنید.

 

 

تراز بندی افقی متن

ویژگی text-alignدر ترازبند متن به شما کمک میکند. شما میتوانید مقادیر چپ، راست، و وسط را برای این ویژگی تعریف کنید.

متن های موجود در عنصر < th>  وسط چین و متون موجود در عنصر  < td> چپ چین هستند.

در مثال زیر تراز متن در عنصر < th> را چپ چین تعریف کرده ایم:
[php]
th {
text-align: left;
}
[/php]
نتیجه را مشاهده کنید.

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

ویژگی vertical-align متن را به صورت عمودی در جدول تراز بندی می کند. شما میتوانید مقادیر بالا، پایین و وسط را برای این ویژگی تعریف کنید. در تراز بندی عمودی، متون به طور پیشفرض در هردو عنصر

< th> و< td> در وسط قرار میگیرد.

در مثال زیر، مثدار پایین را برای این ویژگی تعریف کرده ایم:

[php]
td {
height: 50px;
vertical-align: bottom;
}
[/php]
نتیجه را ببینید.

 

ویژگی padding

در آموزش های قبل با padding آشنا شده اید. میتوانید برای یادآوری بیشتر به این لینک مراجعه کنید. برای مقداردهی paddng در جداول از کد زیر استفاده کنید.

[php]
th, td {
padding: 15px;
text-align: left;
}
[/php]
نتیجه را مشاهده کنید.

ویژگی Table Color

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

(اموزش رنگ ها در css)

کد تعیین رنگ th

[php]
th {
background-color: #4CAF50;
color: white;
}
[/php]

نتیجه را از اینجا ببینید و تمرین کنید.

 

جداول انعطاف پذیر

جداولی که با خاصیتResponsive مقداردهی می شوند میتوانند همزمان با تغییر اندازه صفحه نمایش، خود را همسان سازی کنند. همچنن این جداول برای نماش در صفحات انواع ابزارهای الکترونیکی مناسب هستند. مانند موبایل، تبلت، کامپیوتر و…

برای اینکه جدولی را responsive کنید نیاز دارید که یک بخش <div> تعریف کنید.

کدزیر نمونه ای از این وضعیت است:

[php]

… table content …

[/php]

نتیجه را از اینجا ببینید.

 

تمرینات بیشتر در سایت w3schools:

 

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

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.