ورود ثبت نام

ساخت جداول گوناگون در css

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

حاشیه های جداول

برای تشخیص سطر و سطون های جداول اول باید به آن حاشیه اضافه کرد.یا همان border:
name last name age
amir mosavi 24
shahin karimi 30

table,th,td{
border: 1px solid black;
}
برای برداشتن خطوط داخلی سلول های جداول گوناگون از collapse استفاده میکنیم:
table{
border-collapse: collapse;
}
table,th,td{
border: 1px solid black;
}

name last name age
amir mosavi 24
shahin karimi 30

جداول گوناگون در css هم میتوانند عرض و ارتفاع بگیرند و نوشته های آنها بصورت وسط چین یا چپ چین یا راست چین شوند.به مثال زیر توجه کنید:
name last name age
amir mosavi 24
shahin karimi 30

table{
width: 100%;
}
th{
height: 60px;
}
tr{
text-align: center;
}

پراپرتی بعدی vertical-align است که نوشته را به صورت عمودی میچیند:
name last name age
amir mosavi 24
shahin karimi 30
td{
height: 50px;
vertical-align: bottom;
}

حالا میخواهیم جداول زیبا درست کنیم با استفاده از padding ها:
name last name age
amir mosavi 24
shahin karimi 30

table,th,td{
text-align: left;
border: 1px solid #ddd;
}
table{
border-collapse: collapse;
width: 100%;
}
th,td{
padding: 15px;
}

حال میخواهیم به جای این که چهار جهت سطر ها border داشته باشه فقط جهت پایین آن border داشته باشد یعنی border-bottom و اگر موس روی هر کدام از سطر ها رفت رنگ پس زمینه آن عوض شه:
name last name age
amir mosavi 24
shahin karimi 30
th,td{
text-align: left;
border-bottom: 1px solid #ddd;
padding: 15px;
}
table{
border-collapse: collapse;
width: 100%;
}
tr:hover{
background-color: #ffccff;
}

امید وارم لذت برده باشید. تا قسمت بعد...

0 106

telegram mosqdevelopers


دسته بندی ها

ios

پست های اخیر

banner

بازی های اول شخص برتر سال 2019 و 2020

درودی بیکران خدمت شما امروز با...

ادامه مطلب


banner

کتابخوان های الکترونیکی برتر

به نام خدا ؛ تاحالا شده وقتت ت...

ادامه مطلب


banner

ساخت جداول گوناگون در css

به نام خدا. در این قسمت میخوا...

ادامه مطلب


banner

مدل باکس در css

به نام خدا در این قسمت قسط د...

ادامه مطلب


banner

padding ها در css

به نام خدا در این قسمت قسط د...

ادامه مطلب


RSS RSS

© کلیه حقوق مادی و معنوی متعلق به تیم برنامه نویسی Mosquito Network می باشد