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

یک پیشنهاد دیگر در رابطه با table ما وجود دارد، با اینکه ظاهر کار همین حالا نیز زیبا است اما به نظر می رسد استفاده از یک تصویر پس زمینه برای خانه های table بد نباشد:

table.events td {

font-size: small;

background: #e2edff url(backgrounds/td.jpg) repeat-x top;

}

 در اینجا از رنگ آبی بسیار محو استفاده کردیم که به صورت افقی همان گونه که در فصل پنجم توضیح دادیم تکرار می شود و ظاهری جذاب به نمای کلی Table ما اضافه می کند.

style دهی به خانه های table

style دهی به خانه های table

ادغام سلول های Table

پیچیدگی که ممکن است با آن در رابطه با Table ها مواجه شویم ادغام خانه های یک table است.

ساختاری پیچیده برای یک table

ساختاری پیچیده برای یک table

خصوصیات rowspan وcolspan  در ادغام table 

در این مثال عنوان ستون اول و آخر دو سطر را به خود اختصاص داده اند. در بالای table خانه عنوانِ “Event Details” دو ستون را اشغال کرده است، برای رسیدن به چنین نتیجه ای به دو خصوصیت HTML نیاز داریم:rowspan و colspan

کدِ کاربردی مثال ما به شکل زیر می باشد:

<table>

<tr>

<th rowspan="2">Date</th>

<th colspan="2">Event Details</th>

<th rowspan="2">Contact</th>

</tr>

<tr>

<th>Event Description</th>

<th>Approximate Cost</th>

</tr>

<tr>

<td>12 July</td>

<td>Committee meeting, deciding on next year's trips</td>

<td>N/A</td>

<td>Bob Dobalina</td>

</tr>

 توجه کنید که سطر اول از سه سلول تشکیل شده است؛ سطر دوم تنها دو عنوان دارد اما از آنجا که سلول های سمت راست و چپ سطر قبل را با rowspan به مقدار 2 تنظیم کردیم همه چیز به خوبی نشان داده می شود.

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

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