PDA

View Full Version : Tableهای دورگرد


Mojtaba_ss
شنبه 15 اردیبهشت 1386, 14:14 عصر
با سلام به همه دوستان
چطور میشه که بدون استفاده از Image و عکس Table های دورگرد درست کرد؟
MehranZand
شنبه 15 اردیبهشت 1386, 14:22 عصر
تا اونجا که من میدونم راهی وجود ندارد .
با تگ fieldset می توانید در IE بوردرهای گرد شده داشته باشید.
Mojtaba_ss
شنبه 15 اردیبهشت 1386, 14:54 عصر
میشه نمونشو برام بزارید؟
MehranZand
شنبه 15 اردیبهشت 1386, 15:45 عصر
نمونه خاصی نداره همینطور که عرض کردم میتونید یه تگ fieldset داشته باشید
درونش یک تگ table با متعلقات.


<fieldset style="width: 300px; height: 30px;">
<table style="width:100%" cellpadding="0" cellspacing="2" border="0">
<tr>
<td style="width:100%">Sample!</td>
</tr>
<tr>
<td style="width:100%">Sample!</td>
</tr>
</table>
</fieldset>


اگر دوست داشته باشی میتونی از یک تگ legend هم درون fieldset استفاده کنی
برای داشتن یه عنوان برای fieldset.
Mojtaba_ss
شنبه 15 اردیبهشت 1386, 16:34 عصر
دوست عزیز من این کدها رو نوشتم ولی بوردر گردی بوجو نیومد!!!
MehranZand
شنبه 15 اردیبهشت 1386, 17:14 عصر
از چه مرورگری استفاده کردی؟
Mojtaba_ss
شنبه 15 اردیبهشت 1386, 17:22 عصر
IE
ازت ممنونم که برام وقت گذاشتی
همین الان نمونشو پیدا کردم که بدون عکس تیبل دورگرد درست می کنه،خرت و پرت زیاد داره
ترو تمیزش می کنمو همینجا میزارمش
بازم از وقتی که برام گذاشتی ممنونم.
MehranZand
شنبه 15 اردیبهشت 1386, 17:40 عصر
تگ بالا هیچ مشکلی با IE نداره! اما با firefox یا netscape بصورت گوشه
دار نشون میده.
شما میتونی راه هایی پیدا کنی گوشه table ها را گرد کند! مثل این style

<table border="1" style="-moz-border-radius:5px;">
<tr>
<td>test
</td>
</tr>
</table>
بوسیله این استایل گوشه ها گرد میشوند ولی فقط برای مرروگر firefox عمل
خواهد کرد.
اما راه معمولش کاری است که همه میکنند و اون استفاده از ایمیج های گوشه گرد هست
که با هیچ مرروگری هم مشکل نداره!
Mojtaba_ss
شنبه 15 اردیبهشت 1386, 17:55 عصر
دوست عزیز اینم کدی که من پیدا کردم،تو IE استفاده کردمو کار می یکنه،تو بقیه ها امتحان نکردم.
بازم ازت ممنونم.
Alireza_Salehi
شنبه 15 اردیبهشت 1386, 18:07 عصر
1. میتونید 4 تا تصویر gif درست کنید برای هر کدام از گوشه ها و اونها رو روی گوشه های جدول بندازید ، خیلی راحته، تو همه مرورگرها هم کار میکنه !

مثالش هم در این سایت : http://www.efeh.com/cats.asp?cat=1
قسمت عنوان ستون های پایین صفحه یا منوی بالای صفحه رو ببینید!

برای این که راحت تر ببینید چی کار کرده این ToolBar (http://www.windowsmarketplace.com/details.aspx?view=info&itemid=2695980) رو روی IE نصب کنید (بعد از نصب و اجرا برید منوی Find بعد SelectElementByClick بعدش هم روی قسمت مورد نظر کلیک کنید جزئیاتش رو بهتون نشون میده) و جزئیات صفحه رو به دقت بررسی کنید.
MehranZand
شنبه 15 اردیبهشت 1386, 18:26 عصر
2. از AJAX استفاده کنید.

بیشتر توضیح میدید
MehranZand
شنبه 15 اردیبهشت 1386, 18:53 عصر
دوست عزیز اینم کدی که من پیدا کردم،تو IE استفاده کردمو کار می یکنه،تو بقیه ها امتحان نکردم.
بازم ازت ممنونم.

کاره جالبی کرده. اما باز هم از استایل های استاندارد استفاده نشده.
Alireza_Salehi
شنبه 15 اردیبهشت 1386, 19:02 عصر
بیشتر توضیح میدید

همون 4 تا عکس بهتره ، AJAX زیاد در این مورد جالب نمیشه (RoundedCornersExtender)!
achilles
شنبه 15 اردیبهشت 1386, 19:26 عصر
نه تنها همون 4 تا عکس بهتره، بلکه استفاده از اون 4 تا عکس (در حقیقت 4+4 تا عکس)، واجبه!!

شما با استفاده از یه فایل CSS که حجم محتویاتش در حالتِ حداکثر، کمتر از یکی از اون Style های مورد استفاده تو این صفحه هست و 8 تا عکس که حجم هر کدوم بطور متوسط 100 بایت هست، میتونید جدولهایی درست کنید که گوشه گرد هستند و اون فایل CSS و عکسهای مربوطه، تا وقتی کاربر Delete Temporary Internet Files نکنه، دیگه Download نمیشن!

ضمناً خیلی زیباتر از این هم خواهندشد!
و باز هم ضمناً با همه ی Browser ها هم سازگار خواهند بود!
و باز هم ضمناً استاندارد خواهند بود...


استفاده از AJAX هم برای اینکار، به نظر من برابر است با بلند کردن یک قاشق غذا بوسیله ی بیل مکانیکی!!!


شاد باشید و سرفراز
Mojtaba_ss
یک شنبه 16 اردیبهشت 1386, 08:59 صبح
من خیلی از سایت ها رو دیدم که چهار تا عکس گذاشتنو Table دورگرد درست کردن.
صفحه رو save کردم و خواستم که اون table رو درست کنم ولی همش بین عکس ها یه فاصله کوچولو می افته.
تنظیمات style رو هم مثل style همون صفحه save شده درست می کنم ولی باز این مشکل وجود داره.
اگه نمونه کد سادشو دارین بهم بدید.
ممنون
Alireza_Salehi
یک شنبه 16 اردیبهشت 1386, 09:28 صبح
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html dir="rtl">
<head>
<style> /* Rule 39 of /css/standard.css */ TABLE { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 8pt; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT-FAMILY: Tahoma} /* Rule 23 of /css/standard.css */ TD { FONT-SIZE: 8pt; MARGIN: 2px; DIRECTION: rtl; FONT-FAMILY: Tahoma; TEXT-ALIGN: justify} /* Rule 22 of /css/standard.css */ BODY { MARGIN: 0px; DIRECTION: rtl} /* Rule 25 of /css/standard.css */ TD.Title2 { FONT-SIZE: 8pt; MARGIN: 2px; DIRECTION: rtl; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #ffc1e2; TEXT-ALIGN: justify} /* Rule 41 of /css/standard.css */ P { FONT-SIZE: 8pt; MARGIN: 2px; DIRECTION: rtl; FONT-FAMILY: Tahoma; TEXT-ALIGN: justify} </style>
</head>
<body>
<div align="center">
<table id="table19" height="57" cellspacing="5" cellpadding="0" width="510" border="0">
<tbody>
<tr>
<td width="249" height="19">
<div align="center">
<center>
<table id="table20" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td class="Title2" valign="top" width="12">
<img src="http://www.efeh.com/images/public/topRight_2.gif" border="0" /></td>
<td class="Title2">
????? ?? ????<p style="text-align: left">
<b>&nbsp;&nbsp;??? ???????</b></p>
</td>
<td class="Title2" valign="top" width="12">
<img src="http://www.efeh.com/images/public/topLeft_2.gif" border="0" /></td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
achilles
یک شنبه 16 اردیبهشت 1386, 17:47 عصر
من خیلی از سایت ها رو دیدم که چهار تا عکس گذاشتنو Table دورگرد درست کردن.
صفحه رو save کردم و خواستم که اون table رو درست کنم ولی همش بین عکس ها یه فاصله کوچولو می افته.
تنظیمات style رو هم مثل style همون صفحه save شده درست می کنم ولی باز این مشکل وجود داره.
اگه نمونه کد سادشو دارین بهم بدید.
ممنون

اون فاصله ی کوچیک مال یه تگ CSS هست به اسم border-collapse که باید مقدارش رو برابر collapse قرار بدی.
به این CSS نگاه کن:



.RoundedTable{
border-collapse: collapse;
height: 100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 100%
}

.RoundedTableTR{
background-image: url(tb_tr.gif);
background-repeat: no-repeat;
height: 6px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 5px
}

.RoundedTableTM{
background-image: url(tb_t.gif);
background-repeat: repeat-x;
height: 6px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px
}

.RoundedTableTL{
background-image: url(tb_tl.gif);
background-repeat: no-repeat;
height: 6px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 5px
}

.RoundedTableMR{
background-image: url(tb_r.gif);
background-repeat: repeat-y;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 5px
}

.RoundedTableMM{
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
vertical-align: middle
}

.RoundedTableML{
background-image: url(tb_l.gif);
background-repeat: repeat-y;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 5px
}

.RoundedTableBR{
background-image: url(tb_br.gif);
background-repeat: no-repeat;
height: 6px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 5px
}

.RoundedTableBM{
background-image: url(tb_b.gif);
background-repeat: repeat-x;
height: 6px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px
}

.RoundedTableBL{
background-image: url(tb_bl.gif);
background-repeat: no-repeat;
height: 6px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 5px
}
MehranZand
یک شنبه 16 اردیبهشت 1386, 19:16 عصر
border-collapse تنظیم کننده مدل استفاده بوردر ها در Table هست.
که دارای 2 خاصیت Separate و Collapse است.
که بصورت پیش فرض Separate میباشد یعنی بوردر در Table جدا شده می باشد
و به صورت یک تکه در نظر گرفته نمی شود!

و برای داشتن Table با گوشه های Round شده بوسیله Image تنظیم خاصیت
Border , Cellspacing , cellpadding به صفر در تیبل کافی به نظر میرسه.