آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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

دوره های مرتبط با این مقاله

جدول در CSS

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

Country
Contact
Company
Germany
Maria Anders
Alfreds Futterkiste
Sweden
Christina Berglund
Berglunds snabbköp
Mexico
Francisco Chang
Centro comercial Moctezuma
Austria
Roland Mendel
Ernst Handel
UK
Helen Bennett
Island Trading
Germany
Philip Cramer
Königlich Essen
Canada
Yoshi Tannamuri
Laughing Bacchus Winecellars
Italy
Giovanni Rovelli
Magazzini Alimentari Riuniti
UK
Simon Crowther
North/South
France
Marie Bertrand
Paris spécialités
USA
Liz Nixon
The Big Cheese
Denmark
Palle Ibsen
Vaffeljernet

جهت مشخص کردن حاشیه ی (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;
        } 
امتحان کنید
  • 5258
  •    2846
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .