طراحی سایت ساناتک
0
style دادن به table

ظاهر ساده و پیش فرض یک table

ظاهر ساده و پیش فرض یک table

حاشیه، فاصله و هم راستا کردن

td {

border: 1px solid black;

}

 حاشیه یک پیکسلی در نظر گرفته شده برای هر سلول

حاشیه یک پیکسلی در نظر گرفته شده برای هر سلول

شاید نتیجه کار با آنچه در نظر داشتید مغایرت داشته باشد، فاصله بین حاشیه های سلول ها به cell spacing معروف است؛ می توانیم آن را غیر فعال کنیم، این کار با استفاده از دستور border-collapse صورت می گیرد.

بیایید cell spacing را غیر فعال کرده و تغییراتی دیگر را نیز به table خود وارد کنیم. عناوین table به صورت پیش فرض وسط قرار می گیرند، آن ها را به گوشه سمت چپ می بریم. وسط بودن عناوین اندکی اشتباه به نظر می رسد، دلیل هم آن است که محتوای سایر سلول ها سمت چپ قرار گرفته است.

table {

border-collapse: collapse;

border: 1px solid black;

}

th {

text-align: left;

background: gray;

color: white;

padding: 0.2em;

}

td {

border: 1px solid black;

padding: 0.2em;

}

table بدون فاصله بین سلول ها

table بدون فاصله بین سلول ها

 دسته بندی table ها

table ها استفاده های متعددی دارند، و هر کدام از آن ها ممکن است ظاهری متفاوت داشته باشد. بر همین اساس بهتر است از class های متعددی در CSS selector برای آن ها استفاده کنیم.

برای مثال فرض می کنیم در سایت table های زیر را نیاز داریم:

1. rates (ارزیابی ها)

2. schedule (برنامه ریزی ها)

3. events (رویدادها)

می توانید برای هر table یک style rule متفاوت درون CSS معرفی کنید:

table.rates {

/* declarations for rates tables */

}

table.schedule {

/* declarations for schedule tables */

}

table.events {

/* declarations for events tables */

}

 سپس زمانی که نیاز به یک table خاص در HTML خود داشته باشید، تنها باید خصوصیت class در نظر گرفته شده برای آن را ذکر کنید:

<table class="rates">

 

تعداد بازدید: 243
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
verification
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید