За последние 24 часа нас посетили 17493 программиста и 1623 робота. Сейчас ищут 1855 программистов ...

Резина, таблица

Тема в разделе "HTML и CSS", создана пользователем GudGuy, 14 мар 2010.

  1. GudGuy

    GudGuy Активный пользователь

    С нами с:
    14 июн 2007
    Сообщения:
    909
    Симпатии:
    0
    Адрес:
    Москва
    день добрый, товарищи.
    А подскажите, пожалуйста как реализовать следующую таблицу.
    [​IMG]
    Я ни как не могу добиться что бы оба столбца тянулись одновременно=(
     
  2. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    А куда тянулись-то?
    Код в студию
     
  3. GudGuy

    GudGuy Активный пользователь

    С нами с:
    14 июн 2007
    Сообщения:
    909
    Симпатии:
    0
    Адрес:
    Москва
    HTML:
    1.     <table  style="padding:0; margin:0" border=1 height=240 width=100% cellpadding="0" cellspacing="0">
    2.         <tr>
    3.             <td rowspan=3 width=80%>1</td>
    4.             <td valign=top height=240 width=493>
    5.                 <img border=0 src="./img/logo.jpg">
    6.             </td>
    7.  
    8.             <td height=240 width=90% valign=bottom align=left style="background-image: url(./img/gr.jpg);background-repeat:repeat-x ">
    9.                 <?echo $top?>
    10.                 <img src="./img/none.gif">
    11.                 <br>
    12.             </td><td rowspan=3 width=100%>2</td>
    13.             <td valign=top height=240>
    14.                 <?echo $img?>
    15.             </td>
    16.         </tr>
    17.         <tr>
    18.             <td align=left colspan=2 style="background-image: url(./img/line.jpg); height:18px; background-repeat:no-repeat ">
    19.                <div width=150 style="color: #C04400; font-weight: normal; font-size: 21px; line-height:80%; margin:0; padding:0 0 0 135px; height:18px; font-family:Tahoma;">
    20.                     (495) 933 58 60
    21.                 </div>
    22.             </td><td>3</td>
    23.         </tr>
    24.  
    25.         <tr>
    26.             <td  style="background-image: url(./img/bl.jpg);background-repeat:repeat-x "></td>
    27.             <td colspan=1 style="background-image: url(./img/bl_dop.jpg);background-repeat:repeat-x ">
    28.                 <!--[if IE]>
    29.                <img src=./img/bl_dop.jpg>
    30.                <div style="position: absolute;  z-index: 3;top: 310px;left:360px; margin-bottom:0"><?echo $men?></div>
    31.  
    32.                <![endif]-->
    33.                 <![if !IE]>
    34.                 <div style="position: relative; height:41px; z-index: 3;margin-left:-130px; padding-top:6px; margin-bottom:0"><?echo $men?></div>
    35.                 <![endif]>
    36.             </td>
    37.             <td>5</td>
    38.         </tr>
    39.     </table>
    тянется только самый левый столбец. код такой странный, потому что сначала сверстал, а потом появились нове пожелания к вёрстке. мне, в общем показалось, что на картинке достаточно понятно=))
     
  4. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    А, прости. У меня Imageshack Добавлен в adblock.
    А как вообще таблица работает? :)
    Посчитай сумму % и пикселей, которые ты указал.
     
  5. Volt(220)

    Volt(220) Активный пользователь

    С нами с:
    11 июн 2009
    Сообщения:
    1.640
    Симпатии:
    1
    Таблица как на рисунке:
    [css]table {
    width:100%;
    height:240px;
    border-collapse:collapse;
    }

    td {
    border:1px solid black;
    }

    .c200{
    width:200px;
    height:65%;
    }

    .c100{
    width:100px;
    }

    .h24{
    height:28%;
    }
    [/css]
    HTML:
    1. <tr>
    2.     <td rowspan='3'>&nbsp;</td>
    3.     <td class='c200'>&nbsp;</td>
    4.     <td class='c200'>&nbsp;</td>
    5.     <td rowspan='3'>&nbsp;</td>
    6.     <td rowspan='3' class='c100'>&nbsp;</td>
    7. </tr>
    8. <tr>
    9.     <td colspan='2'>&nbsp;</td>
    10. </tr>
    11. <tr>
    12.     <td colspan='2' class='h24'>&nbsp;</td>
    13. </tr>