ویژگی table در CSS
با ویژگی های جدول در CSS، می توانیم جدول ها را مانند زیر استایل دهی و زیبا کنیم.
# | نام | نام خانوادگی | سن |
1 | احسان | اسلامی | 31 |
2 | امیر | پاشایی | 27 |
3 | نگین | سرخوش | 28 |
4 | مهسا | فلاح | 26 |
حاشیه جدول در CSS
با ویژگی border، می توان برای جدول حاشیه ایجاد کرد.
border: solid 1px black;
نکته: برای آشنایی بیشتر با border، به آموزش ویژگی حاشیه در CSS مراجعه کنید.
نکته: برای اطلاعات بیشتر، به آموزش حاشیه جدول در CSS مراجعه کنید.
اندازه جدول در CSS
برای تعیین اندازه ی عرض و ارتفاع یک جدول، باید از ویژگی width و height استفاده کرد.
table {
width: 100%;
}
th {
height: 50px;
}
td {
height: 30px;
}
نکته: برای آشنایی بیشتر با عرض و ارتفاع، به آموزش width و height در CSS مراجعه کنید.
نکته: برای اطلاعات بیشتر، به آموزش اندازه جدول در CSS مراجعه کنید.
چیدمان جدول در CSS
برای تعیین نحوه ی چینش محتوای جدول در CSS از ویژگی text-align و vertical-align استفاده می کنیم.
text-align: center;
نکته: برای آشنایی بیشتر با چینش متن ها، به آموزش چینش متن در CSS مراجعه کنید.
نکته: برای اطلاعات بیشتر، به آموزش چیدمان جدول در CSS مراجعه کنید.
سبک جدول در CSS
با استفاده از ویژگی هایی مانند padding - border و شبه کلاس های nth-child - hover، می توانیم ظاهر جدول خود را زیبا کنیم.
نکته: برای اطلاعات بیشتر، به آموزش سبک جدول در CSS مراجعه کنید.
جدول واکنشگرا در CSS
برای نمایش صحیح جدول در دستگاه های مختلف مانند موبایل و تبلت یا به عبارتی جدول واکنش گرا (Responsive Table)، میتوان از ویژگی overflow استفاده کرد.
overflow-x: auto;
نکته: برای اطلاعات بیشتر، به آموزش واکنشگرا در CSS مراجعه کنید.
خلاصه درس
در این درس با جدول ها (Tables) در CSS:
- حاشیه جدول
- اندازه جدول
- چیدمان جدول
- سبک جدول
- جدول واکنش گرا
آشنا شدیم.