آموزش جدول های CSS

جدول در CSS

ظاهر یک جدول HTML را می توان به کمک CSS به شکل قابل توجهی بهبود بخشید . برای مثال جدول زیر را در نظربگیرید :

جهت مشخص کردن حاشیه ی (border) جداول درCSS ، کافی است از خاصیت border استفاده کنید .

مثال زیر یک حاشیه ی سیاه برای المان های < table>، < th> و < td> مشخص می کند :

مثال:

        table,th,td {
            border: 1px solid black;
        }

توجه داشته باشید که جدول مورد نظر در مثال فوق دارای دو حاشیه است . این امر به این خاطر است که جدول و المان های < th>/ حاشیه های مجزا دارند .

به منظور نمایش تنها یک حاشیه برای جدول مربوطه، از خاصیت border-collapse استفاده کنید .

خاصیت border-collapse

خصوصیت نام برده تعیین می کند آیا حاشیه های جدول در قالب تنها یک خط (border) جمع شوند یا به صورت مجزا و جداگانه تنظیم شوند :

مثال:

        table {
            border-collapse: collapse;
        }

        Table, th, td {
            border: 1px solid black;
        }

طول و عرض جدول

طول و عرض یک جدول به ترتیب با خاصیت های height و width مشخص می شود .

مثال زیر پهنای جدول را به %100 و درازای المان های < th> را 50px قرار می دهد :

مثال:

        table, td, th{
            border: 1px solid black;
        }
        table{
            width: 100%;
        }
        th{
            height: 50px;
        } 

تراز بندی متن به صورت افقی (Horizontal text alignment)

خاصیت text-align ترازبندی متن را تنظیم می کند (آن را راست چین، چپ چین، وسط چین) می کند .

به صورت پیش فرض، نوشته ی موجود در المان های < th> وسط چین هستند و متن موجود در المان های < td> چپ چین هستند .

مثال:

th { 
    text-align: left; 
}

ترازبندی عمودی متن (vertical text alignment)

خاصیت vertical-align، ترازبندی را به صورت عمودی تنظیم می کند، به عبارتی دیگر جای دهی متن در بالا، پایین و وسط درون جدول .

به صورت پیش فرض، در ترازبندی عمودی، نوشته در وسط جدول قرار می گیرد (برای هر دو المان های < th> و < td> ) .

مثال ذیل نوشته را با خاصیت vertical-align برای المان های < td> در پایین جدول قرار می دهد :

مثال:

td { 
    height: 50px; 
    vertical-align: bottom; 
}

استفاده از خاصیت padding در جدول

جهت کنترل فاصله ی بین حاشیه و محتوای یک جدول، لازم است خاصیت padding را روی المان های < td> و < th> اعمال کنید :

مثال:

td { 
    padding: 15px; 
} 

تنظیم رنگ جدول

مثال زیر رنگ حاشیه ها، متن و پس زمینه ی المان های < th> را تعیین می کند :

مثال:

        table, td, th {
            border: 1px solid green;
        }
        th {
            background-color: green;
            color: white;
        }