הצמדת שני td משני tr, כדי שלא יהיה רווח, באמצעות vertical-align
כתבתי טבלת html פשוטה שיש בה שני שורות ובכל שורה עמודה אחת עם תמונה.
כאן:
התמונות הם למעשה תמונה אחת גדולה שנחתכה לשניים, לצורך עבודת html קלה.
הבעייה שלי הייתה, שהייתי אמור להצמיד את התמונות, כך שלא יהיה רווח ביניהם.
בהתחלה כתבתי את הקוד הבא:
1 <table>
2 <tr>
3 <td>
4 <img src="http://blogs.microsoft.co.il/photos/shlomo/images/248506/original.aspx" />
5 </td>
6 </tr>
7 <tr>
8 <td>
9 <img src="http://blogs.microsoft.co.il/photos/shlomo/images/248506/original.aspx" />
10 </td>
11 </tr>
12 </table>
זה הביא לי את התוצאה הבאה:
ואז כמובן שניסיתי להוסיף cellpading=0 cellspacing=0,
1 <table cellpadding="0" cellspacing="0">
2 <tr>
3 <td>
4 <img src="http://blogs.microsoft.co.il/photos/shlomo/images/248506/original.aspx" />
5 </td>
6 </tr>
7 <tr>
8 <td>
9 <img src="http://blogs.microsoft.co.il/photos/shlomo/images/248506/original.aspx" />
10 </td>
11 </tr>
12 </table>
זה לא עזר, זה אמנם קירב קצת, אבל התוצאה הייתה נראת כך:
האופצייה הבאה שלי, הייתה להשתמש ב background של התמונה לעמודה, במקום אובייקט תמונה,
ואז יחד עם ה cellpading ו cellspacing, זה עבד.
1 <table cellpadding="0" cellspacing="0">
2 <tr>
3 <td style="background-image:
4 url(http://blogs.microsoft.co.il/photos/shlomo/images/248506/original.aspx);
5 width:128px; height:58px;">
6
7 </td>
8 </tr>
9 <tr>
10 <td style="background-image:
11 url(http://blogs.microsoft.co.il/photos/shlomo/images/248506/original.aspx);
12 width:128px; height:58px;">
13
14 </td>
15 </tr>
16 </table>
וכמובן שזה עבד רק בתוספת של cellpadding="0" cellspacing="0"
הבעייה שלי הייתה שעל התמונה שלי (
באתר של סלע) מופיע כיתוב של "לסיור וירטואלי", שאמור להיות לינק.
והאופצייה היחידה שעמדה לרשותי, היה, להשתמש ב image map,
הבעייה כמובן, שברגע שהתמונה היא, background, אי אפשר לצרף לה imgae map,
ומצד שני, לא הצלחתי למצוא איך לגרום לתמונות להיות רצופות.
ניסתי לעשות ל td העליון valign=butoom, ולתחתון valign=top,
לא עזר, בין השורות היה רווח.
בסופו של דבר אמר לי מישהו עם הרבה נסיון ב html, שאני אנסה לתת valign לתמונה בעצמה:
1 <table cellpadding="0" cellspacing="0">
2 <tr>
3 <td>
4 <img src="http://blogs.microsoft.co.il/photos/shlomo/images/248506/original.aspx"
5 style="vertical-align:bottom" />
6 </td>
7 </tr>
8 <tr>
9 <td>
10 <img src="http://blogs.microsoft.co.il/photos/shlomo/images/248506/original.aspx" />
11 </td>
12 </tr>
13 </table>
וכבמעשה ניסים, זה עבד.