میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

جداول Table در CSS

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

ظاهر یک جدول در HTML با استفاده از CSS می تواند تا حد زیادی بهبود یابد.در این فصل به نحوه ی فرمت دهی قسمت های مختلف یک جدول می پردازیم.

 


Border ها در جداول

برای مشخص کردن border های جدول در CSS، از صفت border استفاده می کنیم.

در مثال زیر یک border مشکی برای عناصر <table> ، <th> و <td> مشخص شده است :

 

css-table

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

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

 


صفت  border-collapse

از صفت  border-collapse برای تبدیل border های دوتایی جدولی که باید به یک border کاهش پیدا کند استفاده می شود :

csstable2

table { 
border-collapse: collapse;
 } 

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

اگر شما بخواهید فقط یک border اطراف جدول رسم شود، صفت border را فقط برای تگ <table> تنظیم کنید :

csstable3

table { 
border: 1px solid black;
 }

صفات طول و عرض برای یک جدول

طول و عرض یک جدول با استفاده از صفات width و height در زبان CSS مشخص میشوند.

در مثال زیر مقدار طول جدول برابر با ۱۰۰% و عرض عناصر <th> با مقدار ۵۰ پیکسل تنظیم شده اند.

 

 

FirstnameLastnameSavings
PeterGriffin$۱۰۰
LoisGriffin$۱۵۰
JoeSwanson$۳۰۰

 

th { 
text-align: left; 
}

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

از صفت text-align برای ترازبندی افقی (مانند چپ، راست و وسط) محتوا در <th> یا <td> استفاده می شود.

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

در جدول مثال زیر متون داخل عناصر <th> چپ چین شده اند:

th { 
text-align: left;
 }

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

با استفاده از صفت vertical-align (با استفاده از مقادیر top ، bottom و middle) میتوان متون داخل عناصر <th> یا <td> را به صورت عمودی ترازبندی کرد.

به صورت پیشفرض، ترازبندی عمودی برای محتوای یک جدول ، وسط (middle) است (برای هر دو عنصر <th> و <td>).

در مثال زیر ترازبندی افقی برای عناصر <td> با مقدار bottom تنظیم شده است :

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

تنظیم Padding برای جداول

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

 

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

 


جداکننده های افقی

برای افزودن جداکننده های افقی به جدول صفت border-bottom را برای عناصر <th> و <td> تنظیم میکنیم :

th, td {
 border-bottom: 1px solid #ddd;
 }

استفاده از امکان hover برای جدول

از انتخاب کننده ی hover: در تگ <tr> برای هایلایت کردن ردیف هایی که موس روی آنها قرار میگیرد استفاده میکنیم :

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

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

برای اینکه خوانایی داده ها در جداول بهتر شود می توان از انتخاب کننده ی ()nth-child و صفت background-color برای ردیف های زوج و فرد یک جدول استفاده کرد.

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

رنگ یک جدول

در مثال زیر رنگ پس زمینه برای جدول و رنگ متون عناصر <th> مقدار جداول Table در CSSشده اند :

th { 
background-color: #4CAF50;
 color: white; 
}

جدول های واکنش گرا

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

برای این کار جدول مورد نظر را داخل یک عنصر div قرار داده و مقدار صفت style آن را برابر overflow-x:auto قرار دهید :

<div style="overflow-x:auto;"> 
<table> 
... table content ...
 </table> 
</div>

 


امیدواریم آموزش جداول Table در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
csstable csstable در cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfجداول Table در CSSجداول در CSSدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟