ورود ثبت نام

ساخت جداول گوناگون در 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 278

telegram mosqdevelopers


دسته بندی ها

ios

پست های اخیر

banner

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

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

ادامه مطلب


banner

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

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

ادامه مطلب


banner

لاراول 6

انتظار ها به سررسید و سرانجام...

ادامه مطلب


banner

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

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

ادامه مطلب


banner

padding ها در css

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

ادامه مطلب


RSS RSS

نظرات ارزشمند خود را در مورد وبسایت با ما در میان بگذارید

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