ویژگی 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:

  • حاشیه جدول
  • اندازه جدول
  • چیدمان جدول
  • سبک جدول
  • جدول واکنش گرا

آشنا شدیم.

توسعه دهندگان
احسان اسلامی