ساخت یک 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>£260 pp (all inclusive), departing Luton</td>
<td>Bob Dobalina</td>
</tr>
<tr>
<td>5 August</td>
<td>Ocean & 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>£65 pp (accommodation included)</td>
<td>Jill Smith</td>
</tr>
</table>
به نظر می رسد هنوز این table ظاهر جذابی ندارد، خوشبختانه با CSS طرف هستیم و همه چیز شدنی است، ابتدا بیایید به table خود حاشیه مناسب اظافه کنیم.
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 ما شود، پیش تر دیده بودیم که تنظیمات پیش فرض برای 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 ساخته شده برای سایت
