سوال در مورد table های اچ تی ام ال

Printable View

04-05-2012, 18:04
diana_1989

سوال در مورد table های اچ تی ام ال

سلام دوستان
میخوام با زبان html یه جدول مثه شکل زیر درست کنم
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
کدی که نوشتم اینه :
[HTML]<html>

<meta http-equiv="content-type" content ="text/html; charset=utf-8"/>
<body>
<table border="1" width="100%" dir= "rtl" >
<tr>
<td align="center" colspan="2">
<b>سلول اول</b>
</td>
</tr>
<tr>
<td align="center">
سلول دوم
</td>
<td align="right">
سلول سوم
</td>

</tr>
</table>
</table>
</body>
<html>[/HTML]

اما مثه شکلی که میخوام نمیشه . در واقع میخوام اندازه ستون های سطر دو کوچیک بزرگ باشه ک این امکان با برچسب <td> نیس باید چیکار کنم ؟
04-05-2012, 19:21
neopersia

سلام

برای سلول جدول هم میشه از width استفاده کرد.
البته اگر از این کد برای چیدمان صفحه استفاده میکنید از پایه اشتباهه!

[HTML]<table border="1" width="100%" dir="rtl">
<tr>
<td align="center" colspan="2">
<b>سلول اول</b>
</td>
</tr>
<tr>
<td align="center" width="25%">
سلول دوم
</td>
<td align="right" width="75%">
سلول سوم
</td>
</tr>
</table>[/HTML]
04-05-2012, 20:55
diana_1989

[HTML]<html>
<body>
<table width="100%">
<tr>
<td align="center">
<a href="http://www.yahoo.com/" target="_blank"> www.yahoo.com </a>
</td>
<td align="center">
<a href="http://www.google.com/" target="_blank"> www.google.com </a>
</td>
<td align="center">
<a href="http://www.facebook.com/" target="_blank"> www.facebook.com </a>
</td>
</tr>
</table>
<br>
<table border="2" width="100%" hight="90%">
<tr>
<td align="center" width="70%" hight="90%">
سلول اول
</td>
<td align="center" width="30%" hight="90%">
ستون دوم
مخصوص عکس
<img src=""/>
</td>
</tr>

</table>

<body>
<html>[/HTML]

ممنون از لطفتون . خودمم متوجه شدم ک این کدی ک نوشتم درست نیس . چون وقتی میخواستم لینک بدم اشتباه میشد
این کد اصلیه ک نوشتم واسه شکل بالا
اما چند تا اشکال داره و اونم اینه ک تیبل اول حاشیه اش دیده نمیشه . من میخوام فقط بین لینک ها بوردرش دیده نشه .مسلما وقتی از مشخصه border استفاده نمیکنم کلا هیچی دیده نمیشه . راه حلش چیه ؟
دوما برای جدول پایینی با اینکه طول و عرضشو مشخص میکنم کوچیک دیده میشه ارتفاعش . همچنین وقتی تو تگ img عکس میذارم متناسب با عکس تغییر سایز میده سلولش . باید چیکار کنم ؟
04-05-2012, 21:36
m.m.m5651

نقل قول:

نوشته شده توسط diana_1989 [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

دوما برای جدول پایینی با اینکه طول و عرضشو مشخص میکنم کوچیک دیده میشه ارتفاعش . همچنین وقتی تو تگ img عکس میذارم متناسب با عکس تغییر سایز میده سلولش . باید چیکار کنم ؟

در مورد دومی بگم که:
باید با style، بهش max-width بدید.
04-05-2012, 23:53
diana_1989

نقل قول:

نوشته شده توسط m.m.m5651 [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

در مورد دومی بگم که:
باید با style، بهش max-width بدید.

متوجه منظورتون نشدم :41:
07-05-2012, 21:59
diana_1989

کسی کمک نمیکنه ؟ ؟ ؟:41:
07-05-2012, 23:23
mohrd

سلام.
بهتره از styleها استفاده کنید. راحت تره و نتیجه هم زیباتر خواهد بود:
[HTML]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.table1{
border: 1px solid #000;
}
.table1 td{
border: 0;
}

.table2{
table-layout: fixed;
border-left: 1px solid #000;
}
.table2 td{
overflow: hidden;
border: 1px solid #000;
border-left: 0;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" class="table1">
<tr>
<td align="center">
<a href="http://www.yahoo.com/" target="_blank"> www.yahoo.com </a>
</td>
<td align="center">
<a href="http://www.google.com/" target="_blank"> www.google.com </a>
</td>
<td align="center">
<a href="http://www.facebook.com/" target="_blank"> www.facebook.com </a>
</td>
</tr>
</table>
<br>
<table border="0" cellspacing="0" width="100%" height="90%" class="table2">
<tr>
<td align="center" width="70%" height="90%">
سلول اول
</td>
<td align="center" width="30%" height="90%">
ستون دوم
مخصوص عکس
<img src=""/>
</td>
</tr>

</table>
</body>
</html>[/HTML]
استایل table-layout: fixed تعیین میکنه که اندازه ی سلول ها از چیزی که شما تنظیم کرده اید پیروی کنه و متناسب با محتوا تغییر نکنه (البته یکی از خواص مهم table همین متغیر بودن بر اساس محتواست. اگر قراره که fix باشه، میتونید از سایر تگ ها مثل div استفاده کنید)
و overflow: hidden هم میگه که محتوایی که بزرگتر از طول/عرض تعیین شده هست رو نمایش نده. عملاً با این استایل مرورگر محتوای اضافه رو کات میکنه.

اون border ها هم فکر نمیکنم نیاز به توضیح داشته باشه. اگر مشکلی داشتید بفرمایید.
در مورد cellspacing هم باید بگم که این مشخصه مربوط به فاصله ی سلول ها در جدول هست. که عملاً نقش استایل margin رو بازی میکنه (و میتونید به جای اون از margin برای td ها استفاده کنید)
در ادامه ی توضیح بالا، باید بگم که اکثر مشخصه هایی که ما برای table تعریف میکنیم (مثل cellpadding و cellspacing و border) روی td ها و th ها (مربوط به heading جدول) تاثیر میگذارند..

سؤالی بود بفرمایید.
موفق باشید ./.
07-05-2012, 23:55
diana_1989

ممنون از لطفتون اما متوجه این قسمت ها نشدم ... همیشه تو style باید از کلاس بندی استفاده کرد؟ یعنی اول کلاسا رو تعریف کنیم بعد تو تیبل ها ازش استفاده کنیم ؟
این قسمت از کد رو هم متتوجه نمیشم اندازه هاشو :

[HTML]border: 1px solid #000;[/HTML]

و چرا در تیبل 2 از بوردلفت استفاده شد :
[HTML] border-left: 0;[/HTML]

فرمودین cellspacing مربوط به فاصله ی سلولهاس . یعنی حالا ک 0 در نظر گرفتین فاصله ای نمیفته ؟
[HTML]cellspacing="0"[/HTML]
09-05-2012, 20:14
mohrd

نقل قول:

نوشته شده توسط diana_1989 [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

ممنون از لطفتون اما متوجه این قسمت ها نشدم ... همیشه تو style باید از کلاس بندی استفاده کرد؟ یعنی اول کلاسا رو تعریف کنیم بعد تو تیبل ها ازش استفاده کنیم ؟
این قسمت از کد رو هم متتوجه نمیشم اندازه هاشو :

[HTML]border: 1px solid #000;[/HTML]

و چرا در تیبل 2 از بوردلفت استفاده شد :
[HTML] border-left: 0;[/HTML]

فرمودین cellspacing مربوط به فاصله ی سلولهاس . یعنی حالا ک 0 در نظر گرفتین فاصله ای نمیفته ؟
[HTML]cellspacing="0"[/HTML]

سلام.
خیر. میشه همون استایل ها رو در style هم تعریف کرد. اما اگر 2 المنت داشته باشید که استایل های مشابهی داشته باشند، باید همه ی استایل ها رو در style تعریف کنید که کار نسبتاً اضافه ای حساب میشه. و بهتره یک کلاس تعریف کنید و به اون المنت ها بدید.

در:

کد:

border: 1px solid #000;

این کد border به صورت خلاصه هست. در اصل باید از border-style، border-width، border-color و ... استفاده کرد. البته روش خلاصه بهتره. پارامتر اول ضخامت کادر هست، دومی استایلش و سومی رنگش.

برای اینکه در تیبل 2، ما اومدیم و بردر پیشفرض تیبل رو 0 کردیم. و به td ها بردر دادیم. چون بردر سمت چپ اضافه بود (2 تا td کنار هم، عملاً خط بینشون 2 برابر میشد) اومدیم و گفتیم که بردر چپ نداشته باشه. که این مشکل پیش نیاد.
اما به دلیل اینکه با اینکار، آخرین td هم بردر چپ نداره، و در نتیجه کل جدول هم بردر چپ نداره، اومدیم و به خود جدول (table) یک بردر چپ دادیم.

خیر. با cellspacing="0" ما فاصله ی پیشفرض جدول رو صفر کردیم. و به جای اون، از margin در td ها استفاده کردیم....

موفق باشید ./.