Растяжение содержимого таблицы

nicotin · March 31, 2008

<table align="left" cols="5" border="0" width="0" bordercolor="#000000" bgcolor="#efefdd">
 <tr>
 <td align="center" valign="middle" height="150" width="150" bgcolor="#FFFFFF"><a href="genre_pictures_1.htm" target="_self" title="Жанровая живопись"><img src="../pictures/genre_pictures/2003/preview/10.jpg" alt="Жанровая живопись" width="150" height="99" border="0">
Жанровая живопись</a></td></td>
 <td align="center" valign="middle" height="150" width="150" bgcolor="#FFFFFF"><a href="artdecor_1.htm" target="_self" title="Артдеко"><img src="../pictures/artdecor/2002/preview/6.jpg" alt="Артдеко" width="150" height="101" border="0">
Артдеко</a></td></td>
 <td align="center" valign="middle" height="150" width="150" bgcolor="#FFFFFF"><a href="copies_of_picture_1.htm" target="_self" title="Копии картин"><img src="../pictures/copies_of_picture/1999/preview/5.jpg" alt="Копии картин" width="124" height="150" border="0">
Копии картин</a></td></td>
 <td align="center" valign="middle" height="150" width="150" bgcolor="#FFFFFF"><a href="landscape_1.htm" target="_self" title="Пейзаж"><img src="../pictures/landscape/1998/preview/1.jpg" alt="Пейзаж" width="150" height="127" border="0">
Пейзаж</a></td></td>
 <td align="center" valign="middle" height="150" width="150" bgcolor="#FFFFFF"><a href="still_life_1.htm" target="_self" title="Натюрморт"><img src="../pictures/still_life/2006/preview/34.jpg" alt="Натюрморт" width="150" height="118" border="0">
Натюрморт</a></td></td>
 </tr>
</table>

Как видно выше в таблице содержатся картинки. Хотелось бы растянуть эти картинки на всю ширину экрана таким образом, что бы между ними осталось пространство с цветом фона. Пытался тупо писать ширину таблицы 100% но тут не прокатывает так как растягивается и белая подложка.

Кто что посоветует?

nicotin · March 31, 2008

Что бы было понятнее вот что надо:

Scrum · March 31, 2008

попробуй так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 a {
 display: block;
 background: #fff;
 width: 150px;
 height:150px;
 vertical-align: middle;
}

 /*]]>*/
 </style>
</head>

<body>
<table align="left" cols="5" border="0" width="100%" bordercolor="#000000" bgcolor="#efefdd">
 <tr>
 <td><a href="genre_pictures_1.htm" target="_self" title="Жанровая живопись"><img src="../pictures/genre_pictures/2003/preview/10.jpg" alt="Жанровая живопись" width="150" height="99" border="0">
Жанровая живопись</a></td></td>
 <td><a href="artdecor_1.htm" target="_self" title="Артдеко"><img src="../pictures/artdecor/2002/preview/6.jpg" alt="Артдеко" width="150" height="101" border="0">
Артдеко</a></td></td>
 <td><a href="copies_of_picture_1.htm" target="_self" title="Копии картин"><img src="../pictures/copies_of_picture/1999/preview/5.jpg" alt="Копии картин" width="124" height="150" border="0">
Копии картин</a></td></td>
 <td><a href="landscape_1.htm" target="_self" title="Пейзаж"><img src="../pictures/landscape/1998/preview/1.jpg" alt="Пейзаж" width="150" height="127" border="0">
Пейзаж</a></td></td>
 <td><a href="still_life_1.htm" target="_self" title="Натюрморт"><img src="../pictures/still_life/2006/preview/34.jpg" alt="Натюрморт" width="150" height="118" border="0">
Натюрморт</a></td></td>
 </tr>
</table>
</body>

</html>

nicotin · March 31, 2008

Ну в целом пойдет только можно CSS переписать для другого селектора? а то для ссылок в целом писать, получается нехорошо. Все остальные ссылки тоже привращаются в прямоугольные квадраты)

Я не силен в CSS но можно написать для каждой ячейки идентификатор? Что то типа такого:

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
.pic {
 display: block;
 background: #fff;
 width: 150px;
 height:150px;
 vertical-align: middle;
}

 /*]]>*/
 </style>
</head>

<body>
<table align="left" cols="5" border="0" width="100%" bordercolor="#000000" bgcolor="#efefdd">
 <tr>
 <td id="pic"><a href="genre_pictures_1.htm" target="_self" title="Жанровая живопись"><img src="../pictures/genre_pictures/2003/preview/10.jpg" alt="Жанровая живопись" width="150" height="99" border="0">
Жанровая живопись</a></td></td>
 <td id="pic"><a href="artdecor_1.htm" target="_self" title="Артдеко"><img src="../pictures/artdecor/2002/preview/6.jpg" alt="Артдеко" width="150" height="101" border="0">
Артдеко</a></td></td>
 <td id="pic"><a href="copies_of_picture_1.htm" target="_self" title="Копии картин"><img src="../pictures/copies_of_picture/1999/preview/5.jpg" alt="Копии картин" width="124" height="150" border="0">
Копии картин</a></td></td>
 <td id="pic"><a href="landscape_1.htm" target="_self" title="Пейзаж"><img src="../pictures/landscape/1998/preview/1.jpg" alt="Пейзаж" width="150" height="127" border="0">
Пейзаж</a></td></td>
 <td id="pic"><a href="still_life_1.htm" target="_self" title="Натюрморт"><img src="../pictures/still_life/2006/preview/34.jpg" alt="Натюрморт" width="150" height="118" border="0">
Натюрморт</a></td></td>
 </tr>
</table>
</body>

</html>

Фон правда белый пропадает.

И еще хотелось бы что бы первая картина хотя бы пикселей на 30-50 отходила от края, а последняя была не впритык к краю

nicotin · March 31, 2008

Люди отзовитесь!

homm · March 31, 2008

ИдентификаторЫ писать нельзя, идентичикатор должен быть один на всю страницу.

Думаю стоит ознакомится с разделом CSS по шагам здесь:

http://stepbystep.htmlbook.ru/

Sign In

Растяжение содержимого таблицы

Question

nicotin

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

nicotin

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

nicotin

Link to comment

Share on other sites

nicotin

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information