طراحی سایت ساناتک
0
اضافه کردن یک table برای نمایش رویدادها در وبسایت

ساخت یک table برای سایت

با تگ های گوناگونی که در راستای ساخت یک table استفاده می شوند آشنا شدید. حالا می خواهیم خودمان یک table بسازیم:

1. فایل events.html را در برنامه ویرایش متن خود باز کنید.

2. کد زیر را پایین پاراگرافی که پیش تر اضافه کرده بودیم قرار دهید:

<table class="events" summary="Details of upcoming club events and

dive trips">

<caption>Club events/dive trips for the next six

months</caption>

<tr>

<th>Date</th>

<th>Event Description</th>

<th>Approximate Cost</th>

<th>Contact</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>

<tr>

<td>19 July</td>

<td>7-day trip to Hurghada (package deal) - limited

spaces</td>

<td>&pound;260 pp (all inclusive), departing Luton</td>

<td>Bob Dobalina</td>

</tr>

<tr>

<td>5 August</td>

<td>Ocean &amp; Sports Diver Theory Course</td>

<td>Call for details</td>

<td>Jeff Edgely</td>

</tr>

<tr>

<td>12 August</td>

<td>Murder Mystery Weekend, Cotswolds (no diving!)</td>

<td>&pound;65 pp (accommodation included)</td>

<td>Jill Smith</td>

</tr>

</table>

 به نظر می رسد هنوز این table ظاهر جذابی ندارد، خوشبختانه با CSS طرف هستیم و همه چیز شدنی است، ابتدا بیایید به table خود حاشیه مناسب اظافه کنیم.

table ای ساده و بدون style خاص

table ای ساده و بدون style خاص

style1.cssرا گشوده و قانون جدیدی برای خصوصیت های th و td اضافه کنید

table.events {

border-collapse: collapse;

}

table.events th, table.events td {

padding: 4px;

border: 1px solid #000066;

}

table.events th {

font-size: x-small;

}

table.events td {

font-size: small;

}

 

در اینجا چهار قانون ساختیم.

اولین آن ها به تمامی تگ های table که خصوصیت class با مقدار events دارند اعمال می شود. این قانون از دستور border-collapse برای غیر فعال کردن فاصله بین سلول ها استفاده می کنیم، چیزی که پیش تر دیده بودیم.

دومین قانون از یک selector پیچیده تر استفاده می کند:

table.events th

table.events td

که به تمامی تگ های th و td میان <table class=”events”> و </table> وارد می شود.

متاسفانه در صورت استفاده از table.events th, td، تگ های th درون Table ما و تمامی td های دیگر تحت تاثیر قرار می گیرند.

دو قانون آخر نیز font-size سلول های محتوا و عناوین را دست خوش تغییر می کنند.

حاشیه هایی که ظاهر table را بسیار عوض کردند

حاشیه هایی که ظاهر table را بسیار عوض کردند

در اقدام بعد باید عنوان table را از وسط به قسمت چپ انتقال دهیم تا هم راستای Table ما شود، پیش تر دیده بودیم که تنظیمات پیش فرض برای th به صورتی است که نوشته عنوان را وسط نشان می دهد؛ مشکلی که به راحتی با CSS حل می شود.

در style1.css، مانند کد زیر تگِ th را style-ای جدید می دهیم:

 table.events th {

font-size: x-small;

text-align: left;

}

1. به table.events th یک style جدیدی اعمال می کنیم، یکی برای تنظیم رنگ سفید برای پیش زمینه و نوشته ها و دیگری برای اختصاص تصویر پس زمینه، و مقداری قانون padding:

table.events th {

font-size: x-small;

text-align: left;

background: #241374 url(backgrounds/header-bg.jpg);

color: #ffffff;

padding-top: 0;

padding-bottom: 0;

padding-left: 2px;

padding-right: 2px;

}

 2. می توانیم caption را نیز اندکی آراسته تر کنیم:

table.events caption {

color: #000066;

font-size: small;

text-align: left;

padding-bottom: 5px;

font-weight: bold;

}

table ساخته شده برای سایت

table ساخته شده برای سایت 

 

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

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