آموزش جدول - Tables در CSS | آموزش کامل + نمونه کد

قبلی بعدی

ویژگی table در CSS

با ویژگی های جدول در CSS، می‌ توانیم جدول ها را مانند زیر استایل دهی و زیبا کنیم.

با ویژگی border، می توان برای جدول حاشیه ایجاد کرد.

border: solid 1px black;

نکته: برای آشنایی بیشتر با border، به آموزش ویژگی حاشیه در CSS مراجعه کنید.

نکته: برای اطلاعات بیشتر، به آموزش حاشیه جدول در CSS مراجعه کنید.

برای تعیین اندازه ی عرض و ارتفاع یک جدول، باید از ویژگی width و height استفاده کرد.

table {
    width: 100%;
}
th {
    height: 50px;
}
td {
    height: 30px;
}

نکته: برای آشنایی بیشتر با عرض و ارتفاع، به آموزش width و height در CSS مراجعه کنید.

نکته: برای اطلاعات بیشتر، به آموزش اندازه جدول در CSS مراجعه کنید.

برای تعیین نحوه ی چینش محتوای جدول در CSS از ویژگی text-align و vertical-align استفاده می کنیم.

text-align: center;

نکته: برای آشنایی بیشتر با چینش متن ها، به آموزش چینش متن در CSS مراجعه کنید.

نکته: برای اطلاعات بیشتر، به آموزش چیدمان جدول در CSS مراجعه کنید.

با استفاده از ویژگی هایی مانند padding - border و شبه کلاس های nth-child - hover، می توانیم ظاهر جدول خود را زیبا کنیم.

نکته: برای اطلاعات بیشتر، به آموزش سبک جدول در CSS مراجعه کنید.

برای نمایش صحیح جدول در دستگاه های مختلف مانند موبایل و تبلت یا به عبارتی جدول واکنش گرا (Responsive Table)، می‌توان از ویژگی overflow استفاده کرد.

overflow-x: auto;

نکته: برای اطلاعات بیشتر، به آموزش واکنش‌گرا در CSS مراجعه کنید.

در این درس با جدول ها (Tables) در CSS:

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی