در اين نوشته مي خواهيم کمي در مورد Css و Table ها صحبت کنيم. اکثر طراحان وب مي دانند که اين روز ها متد هاي طراحي در حال تغيير است و طرح هاي حرفه اي محسوب مي شوند که در ساختار آنها تا آنجا که امکان دارد از Table کمتر استفاده شده باشد و يا در اصطلاح Table less باشند.
شايد پياده سازي بسيار از موارد مورد نياز در يک طراح با استفاده از ديگر عناصر XHTML بسيار ساده تر از استفاده از Table ها باشد اما در برخي مواقع هيچ راه گريزي نيست.
يکي از خواسته هاي که پياده سازي آن با Table مي تواند راحت ترين راه ممکن باشد ، نمايش جداول اطلاعاتي است که در برخي از کارها نياز به استفاده از آنها مي شود. در برخي از اين موارد ، کاربران و يا طراحان فکر مي کنند که استفاده Table نمي تواند آنگونه که مي خواهند طرح را نمايش دهد به عبارت ديگر فکر مي کنند که Table ها زياد انعطاف پذير نيستند.
اما با استفاده از Css مي توان به عناصر Table نيز ظاهري متعارف داد تا هم حجم کمتري را به خود اختصاص دهند و هم بهتر نمايش داده شوند. اکنون مي خواهيم يک نمونه جدول را با استفاده از Css پياده سازي کنيم و ظاهري متناسب به آن دهيم.
به سراغ طرح خود برويم، مي خواهيم جدولي از اطلاعات مورد نظر شبيه چيزي که در تصوير مي بينيد ايجاد کنيم. ابتدا عناصر xhtml را پياده سازي مي کنيم.
در ويرايشگر خود يک پرونده جديد xhtml ايجاد کنيد و کد هاي زير را در بدنه صفحه قرار دهيد. دقت کنيد نوع قرار گيري کد هاي زير براي نمايش صحيح تر طرح نهايي بسيار مهم هستند.
بخش XHTML
<table cellpadding="0" summary="ليست اجناس شرکت..." dir="rtl">
<colgroup>
<col id="idCol" />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>نام</th>
<th>بخش</th>
<th>قيمت</th>
<th>وضعيت</th>
</tr>
</thead>
<tbody>
<tr>
<td>19</td>
<td>دوربين ديجيتال</td>
<td>الکترونيک</td>
<td>$250</td>
<td>موجود</td>
</tr>
<tr>
<td>25</td>
<td>گوشي موبايل</td>
<td>الکترونيک</td>
<td>$600</td>
<td>موجود</td>
</tr>
<tr>
<td>37</td>
<td>Mp3 پلير</td>
<td>الکترونيک</td>
<td>$75</td>
<td>وجود ندارد</td>
</tr>
<tr>
<td>78</td>
<td>پلي استيشن 3</td>
<td>بازي</td>
<td>$550</td>
<td>موجود</td>
</tr>
</tbody>
</table> |
بخش Css
در ادامه به بخش Css مي رسم ، اکنون مي خواهيم نماي بهتري به Table خود بدهيم. ابتدا يک شکل ساده براي جدول خود در نظر مي گيريم ، Css مورد نظر مي تواند چيزي شبيه اين باشد:
table {
border: #ccc 1px solid;
border-collapse: collapse;
font-family: Tahoma, Helvetica, sans-serif;
font-size: 0.7em;
height: 60px;
text-align: right;
}
col {
border-right: #ccc 1px solid;
}
col#idCol {
width: 45px;
} |
بعد از انجام اين کار زمان آن مي رسد که طرح مورد نظر را براي جدول خود پياده سازي کنيم:
th {
border-right: #ccc 1px solid;
font-size: 1em;
height: 25px;
text-align: right;
padding: 0px 4px 0px 60px;
}
tbody tr {
border-bottom: #eee 1px solid;
font-size: .9em;
line-height: 1.8em;
}
tbody tr:hover {
background: #f1f1f1
}
td {
padding: 0 4px 0 4px;
} |
اکنون جدول ما نماي خيلي بهتري نسبت به قبل پيدا کرده است ، اما اگر بخواهيم نماي جالبتري به آن بدهيم مي توانيد براي عناوين ستون ها از تصوير بک گراند استفاده کنيم.
th {
background: #e6e2d9 url("thbackground.jpg") bottom left repeat-x;
border-right: #ccc 1px solid;
font-size: 1em;
height: 25px;
text-align: left;
padding-right: 4px;
} thead th:hover {
background: url("thbackgroundhover.jpg") bottom left repeat-x;
} |
توجه کنيد که مشخصه hover عناصر در IE6 قابل اجرا نيست ، منتها مي توانيد با استفاده از jQuery اين مشکل را نيز به سادگي حل کنيد که به خودتان مي سپارم حل آن را.
منبع:http://ipooya.com/خ