چپتر قبلی
دیزاین جدول با CSS
شکل یک جدول به همراه زبان CSS میتواند به کلی تغیر کند.
| تخلص | نام |
|---|---|
| نیازی | احمد |
| پروانه | محمد نادر |
| طاهری | محمد طاهر |
سرحد جدول
برای تعیین کردن سرحد یک جدول باید از کد border CSS استفاده کنیم.
در مثال پائین یک سرحد سیاه رنگی برای Element های table و th و td در نظر گرفته شده است.
{
border:1px solid black;
}
تشریح
در مثال فوق کدهای CSS برای دیزاین سرحد یک جدول استفاده شده اند.
در این مثال 3 Element زبان برنامه نویسی HTML با کامه از همدیگر جدا شده اند . و این یکی از طریقه های است که ما میتوانیم چندین Element زبان برنامه نویسی HTML را نوشته و همه گی را با هم با استفاده از زبان برنامه نویسی CSS استایل دهیم.
به خاطر داشته باشید که در مثال فوق Element table دارای دو سرحد خواهد بود.
طول و عرض یک جدول
طول و عرض یک جدول در زبان برنامه نویسی CSS توسط کد های width و height تعیین میشوند.
در مثال پائین طول یک جدول به 100% قیمت گذاری میشود و عرض td 50px تعیین میشود.
{
height:100%;
}
td
{
width:50px;
}
تشریح
در مثال فوق طول یک جدول به 100% قیمت گذاری شده است. و این معنی را میدهد که تمامی این جدول را به صورت نارمل و استندرد نمایش بده.
در خط پائین تر عرض td به 50px قیمت گذاری شده است و مشخص شده است که از این اندازه پیشروی نشود.
جهت متن در جدول
جهت یک متن در داخل جدول با استفاده از text-align و vertical-align تعیین میشود.
text-align : برای تعیین کردن جهت متن به صورت افقی استفاده میشود.
vertical-align : برای تعیین کردن جهت متن به صورت عمودی استفاده میشود.
{
text-align:right;
}
تشریح
در مثال فوق از text-align استفاده شده است. و قیمت های را که این کد به خود میگیرد عبارتند از :
left , right , center , justify
{
vertical-align:bottom;
}
تشریح
در مثال فوق از vertical-align استفاده شده است. و قیمت های را که این کد به خود میگیرد عبارتند از :
top , bottom , middle
رنگ آمیزی جدول
برای رنگ آمیزی یک جدول مثل رنگ نمودن متن و رنگ نمودن پشت زمینه با CSS از همان گدهای که قبلاً خواندیم استفاده میشود. و مثال آن قرار ذیل میباشد.
{
background-color:red;
color:white;
border:1px double white;
}
مثال بالا نیازی به تشریح ندارد. و اگر شما نتوانستید که درکش کنید پس یکبار دیگر پشت زمینه را مطالعه کنید.
چپتر بعدی