با فراگیری هر چه بیشتر
استفاده از CSS ، روند استفاده از table
ها رو به کاهش چشمگیری است. امروزه کمتر صفحه های حرفه ای را مشاهده می کنید که
برای ایجاد قسمت های اصلی آن ها از table استفاده شده باشد.
برای این منظور با استفاده از CSS و div
می توان هر حالتی را پیاده کرد. هم اکنون مناسب ترین استفاده از table
ها نمایش فیلد های یک بانک اطلاعاتی در قالب سطر ها و ستون ها می باشد.
به همین منظور نمایش این سطر و ستون ها به شیوه ای که مخاطب را به سادگی راهنمایی
کند، می تواند در ارزش گذاری محتوای بانک اطلاعاتی شما موثر واقع شود. بهترین و
خواناترین شیوه استفاده از سطرهایی است که یکی در میان رنگ متفاوتی
داشته باشند. برای درک بهتر می توانید به
این مقایسه
که در یکی از منابع این نوشته آمده است توجه کنید.
در این نوشته در ابتدا به نحوه ساختن این table های راه راه
با استفاده از javascript + css و سپس روشی ساده تر با
استفاده از php.
* Zebra Table
/ جدول راه راه – javascript
این قسمت را در
head قرار دهید :
// this function is needed to work around
// a bug in IE related to element attributes
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode("class") != null) {
result = obj.getAttributeNode("class").value;
}
return result;
}function stripe(id) {
// the flag we’ll use to keep track of
// whether the current row is odd or even
var even = false;// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : "#fff";
var oddColor = arguments[2] ? arguments[2] : "#eee";// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }// by definition, tables can have more than one tbody
// element, so we’ll have to get the list of child
// <tbody>s
var tbodies = table.getElementsByTagName("tbody");// and iterate through them…
for (var h = 0; h < tbodies.length; h++) {// find all the <tr> elements…
var trs = tbodies[h].getElementsByTagName("tr");// … and iterate through them
for (var i = 0; i < trs.length; i++) {// avoid rows that have a class attribute
// or backgroundColor style
if (! hasClass(trs[i]) &&
! trs[i].style.backgroundColor) {// get all the cells in this row…
var tds = trs[i].getElementsByTagName("td");// and iterate through them…
for (var j = 0; j < tds.length; j++) {var mytd = tds[j];
// avoid cells that have a class attribute
// or backgroundColor style
if (! hasClass(mytd) &&
! mytd.style.backgroundColor) {mytd.style.backgroundColor =
even ? evenColor : oddColor;}
}
}
// flip from odd to even, or vice-versa
even = ! even;
}
}
}
با استفاده از این تابع در هنگام بارگزاری صفحه در
سمت clinet رنگ مناسب به جدول ها داده می شود. برای استفاده
از ترکیبی مانند حالت زیر در ادامه صفحه باید استفاده کنید :
<style type="text/css">
#playlist {
border: 1px solid #666666;
}
#playlist tbody tr td {
font-family: "lucida grande", verdana, sans-serif;
font-size: 8pt;
padding: 3px 8px;
border-left: 1px solid #D9D9D9;
}
#playlist tbody tr.selected td {
background-color: #3d80df;
color: #ffffff;
font-weight: bold;
border-left: 1px solid #346DBE;
border-bottom: 1px solid #7DAAEA;
}
</style>
.
.
<body onload="stripe('playlist', '#fff', '#edf3fe');">
<div id="bottle">
<table id="playlist" cellspacing="0">
<tbody>
<tr>
<td>1</td>
<td>Lost In The Plot</td>
<td>The Dears</td>
</tr>
<tr>
<td>2</td>
<td>Poison</td>
<td>The Constantines</td>
</tr>
<tr class="selected">
<td>3</td>
<td>Plea From A Cat Named Virtute</td>
<td>The Weakerthans</td>
</tr>
<tr> <td>4</td>
<td>Melissa Louise</td>
<td>Chixdiggit!</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
برای این که بتونید
واقعا از چنین ترکیبی استفاده کنید، بهتره به سورس کد
این صفحه نمونه
نگاهی بیندازید.
– توجه کنید این روش در سمت سرویس گیرنده اتفاق می افتد و در
صورتی که خانه های جدول زیاد باشد امکان دارد باعث وقفه در نمایش صفحه شود.
– به علت استفاده از رویداد pageload در
این ترکیب امکان بروز مشکل در برخی حالت ها برای شما موجود است.
– به علت استفاده از id که خاصیت یکتایی
است شما تنها قادر به استفاده از یک table با این خصوصیات
خواهید بود، مگر آنکه کمی زحمت بکشید و تغییراتی دهید. پیشنهاد می کنم حتما قسمت
Discuss این مقاله
را کامل بخوانید.
* Zebra Table
/ جدول راه راه – php
کمی تا قسمتی ساده تر است، ببینید :
<?php
if (!isset($bgflag)) $bgflag = 0;
if ($bgflag == 1) {
echo ‘<tr valign="top">’;
$bgflag = 2;
} else {
echo ‘<tr valign="top" bgcolor="E3ECED">’;
$bgflag = 1;
}
?>
باید بتوانید از آن
استفاده کنید، اگر مشکلی بود پیغام بگزارید. این مطلب به مرور کامل تر می شود. در
قسمت های بعدی متمایز کردن جدولی که موس بر روی آن است و نمایش تعداد مشخصی از جدول
در هر صفحه…
دیدگاه‌ها
4 پاسخ به “Zebra Table / جدول راه راه”
سلام امیدوارم حالتون خوب باشه. راستش من خیلی دلم می خواد یه چیزی دقیقا مثل این تکنوپدیای شما داشته باشم. البته می دونم که برای اون زحمت زیادی کشیدین اما می خواستم ببینم که میشه فایلهای روی سرور شما رو داشته باشم؟ در ضمن هم می تونم سرور NT داشته باشم هم سرور Linux هر چند که سرور Linux رو ترجیح می دم. منتظر جوابتون هستم. خدانگهدار
ایول !