Как сделать сайт с табличной версткой резиновым?

Статус
Закрыто для дальнейших ответов.
M

Maks_X

Новичок
Регистрация
12.12.2011
Сообщения
3
Добрый вечер! Я столкнулся с определенной сложностью, как сделать сайт резиновым, если он сделан в табличной верстке? У меня есть шаблон, я его мучаю достаточно долго, изменение размера под 100% не помогает. Помогите, пожалуйста, разобраться. Заранее благодарен.

HTML: 
<HTML>
<HEAD>
<TITLE>Company</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<link rel="stylesheet" href="main.css" type="text/css">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 background="images/bgb.gif">
<table width="778" border="0" cellspacing="0" cellpadding="0" background="images/index_02.gif">
  <tr>
    <td width="483"><img src="images/index_01.gif" width=165 height=30 alt="" usemap="#Map" border="0"></td>
    <td width="68"><a href="#"><img src="images/index_04.gif" width=68 height=30 alt="" border="0"></a></td>
    <td width="70"><a href="#"><img src="images/index_05.gif" width=70 height=30 alt="" border="0"></a></td>
    <td width="56"><a href="#"><img src="images/index_06.gif" width=56 height=30 alt="" border="0"></a></td>
    <td width="101"><a href="#"><img src="images/index_07.gif" width=98 height=30 alt="" border="0"></a></td>
  </tr>
</table>
<table width="778" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/index_08.jpg" width=778 height=125 alt=""></td>
  </tr>
</table>
<table width="778" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#"><img src="images/index_09.gif" width=95 height=39 alt="" border="0"></a><a href="#"><img src="images/index_10.gif" width=103 height=39 alt="" border="0"></a><a href="#"><img src="images/index_11.gif" width=100 height=39 alt="" border="0"></a><a href="#"><img src="images/index_12.gif" width=110 height=39 alt="" border="0"></a><a href="#"><img src="images/index_13.gif" width=99 height=39 alt="" border="0"></a><img src="images/index_14.jpg" width=271 height=39 alt=""></td>
  </tr>
</table>
<table width="778" border="0" cellspacing="0" cellpadding="0">
  <tr valign="top">
    <td width="210" background="images/index_20.gif" rowspan="2">
	  <table width="210" border="0" cellspacing="0" cellpadding="0">
	    <tr>
		  <td width="210"><img src="images/index_15.gif" width=210 height=41 alt=""></td>
	    </tr>
	  </table>
	  <table width="210" border="0" cellspacing="0" cellpadding="10">
	    <tr>
		  <td width="210" class="main"><b><span class="blue">11-02-2003<a href="#"></a></span></b><b class="green"><a href="#"><span class="green"><br>
		    Информация</span></a></b>, С одной стороны, статистика – это совокупность числовых показателей, характеризующих общественные явления и процессы (статистика труда, статистика транспорта.</td>
	    </tr>
	  </table>
	  <table width="210" border="0" cellspacing="0" cellpadding="0" height="20">
	    <tr>
		  <td width="105" align="right"><img src="images/index_37.gif" width=13 height=11 alt="">
		  </td>
		  <td width="105"><a href="#" class="blue"><b>Подробно</b></a></td>
	    </tr>
	  </table>
	  <table width="100%" border="0" cellspacing="0" cellpadding="0">
	    <tr>
		  <td><img src="images/index_29.gif" width=210 height=11 alt=""></td>
	    </tr>
	  </table>
	  <table width="210" border="0" cellspacing="0" cellpadding="10">
	    <tr>
		  <td width="210" class="main"><b><span class="blue">11-02-2003<a href="#"></a></span></b><b class="green"><a href="#"><span class="green"><br>
		    Информация</span></a></b>, С одной стороны, статистика – это совокупность числовых показателей, характеризующих общественные явления и процессы (статистика труда, статистика транспорта.</td>
	    </tr>
	  </table>
	  <table width="210" border="0" cellspacing="0" cellpadding="0" height="20">
	    <tr>
		  <td width="105" align="right"><img src="images/index_37.gif" width=13 height=11 alt="">
		  </td>
		  <td width="105"><a href="#" class="blue"><b>Подробно</b></a></td>
	    </tr>
	  </table>
	  <table width="210" border="0" cellspacing="0" cellpadding="0">
	    <tr>
		  <td width="210"><img src="images/index_40.gif" width=210 height=42 alt=""></td>
	    </tr>
	  </table>
	  <br>
	  <img src="images/index_44.jpg" width=210 height=89 alt=""><br>
	  <br>
	  <table width="209" border="0" cellspacing="0" cellpadding="0">
	    <tr>
		  <td width="209" align="center"><b><span class="blue">Ваш E-mail </span>
		    </b>
		    <input type="text" name="textfield" size="10">
		  </td>
	    </tr>
	  </table>
	  <table width="210" border="0" cellspacing="0" cellpadding="0" height="50">
	    <tr>
		  <td width="210" align="center"><a href="#"><img src="images/index_47.jpg" width=129 height=32 alt="" border="0"></a></td>
	    </tr>
	  </table>
    </td>
    <td width="356" background="images/index_32.jpg">
	  <table width="356" border="0" cellspacing="0" cellpadding="0" height="142" background="images/index_22.jpg">
	    <tr>
		  <td width="207" valign="top">
		    <table width="207" border="0" cellspacing="0" cellpadding="0">
			  <tr>
			    <td width="207"><img src="images/index_16.jpg" width=207 height=51 alt=""></td>
			  </tr>
		    </table>
		    <table width="207" border="0" cellspacing="0" cellpadding="5" background="images/index_22.jpg" height="91">
			  <tr>
			    <td width="207" class="main"><font color="#FFFFFF"><b>Информация </b>С одной стороны, статистика – это совокупность числовых показателей, характеризующих общественные явления и процессы (статистика труда, статистика транспорта
				  .</font></td>
			  </tr>
		    </table>
		    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="20">
			  <tr>
			    <td width="105" align="right"><img src="images/index_25.jpg" width=10 height=9 alt="">
				  &nbsp;</td>
			    <td width="105"><a href="#" class="blue"><b><font color="#FFD62F">
				  Подробно</font></b></a></td>
			  </tr>
		    </table>
		  </td>
		  <td width="149" valign="top"><img src="images/index_17.jpg" width=149 height=142 alt=""></td>
	    </tr>
	  </table>
	  <table width="356" border="0" cellspacing="0" cellpadding="0">
	    <tr>
		  <td width="356"><img src="images/index_28.jpg" width=356 height=45 alt=""></td>
	    </tr>
	  </table>
	  <table width="100%" border="0" cellspacing="0" cellpadding="5" background="images/index_32.jpg">
	    <tr>
		  <td valign="top" class="main"><img src="images/index_34.jpg" width=129 height=128 alt="" align="left"><span class="green">Информация</span>, С одной стороны, статистика – это совокупность числовых показателей, характеризующих общественные явления и процессы (статистика труда, статистика транспортаС одной стороны, статистика – это совокупность числовых показателей, характеризующих общественные явления и процессы (статистика труда, статистика транспортаС одной стороны, статистика – это совокупность числовых показателей, характеризующих общественные явления и процессы (статистика труда, статистика транспорта</td>
	    </tr>
	  </table>
    </td>
    <td width="212" bgcolor="#F8F8F8" rowspan="2">
	  <table width="212" border="0" cellspacing="0" cellpadding="0">
	    <tr>
		  <td width="212"><img src="images/index_18.gif" width=212 height=31 alt=""></td>
	    </tr>
	  </table>
	  <table width="212" border="0" cellspacing="0" cellpadding="8">
	    <tr>
		  <td width="212" class="main"><a href="#" class="blue"><b>Информация, </b></a>С одной стороны, статистика – это совокупность числовых показателей, характеризующих общественные явления и процессы (статистика труда, статистика транспорта<br>
		   С одной стороны, статистика – это совокупность числовых показателей, характеризующих общественные явления и процессы (статистика труда, статистика транспорта.</td>
	    </tr>
	  </table>
	  <table width="212" border="0" cellspacing="0" cellpadding="0" height="20">
	    <tr>
		  <td width="106" align="right"><img src="images/index_37.gif" width=13 height=11 alt="">
		  </td>
		  <td width="106"><a href="#" class="blue"><b>Подробно</b></a></td>
	    </tr>
	  </table>
	  <table width="212" border="0" cellspacing="0" cellpadding="0">
	    <tr>
		  <td width="212"><img src="images/index_39.gif" width=212 height=57 alt=""></td>
	    </tr>
	  </table>
	  <table width="212" border="0" cellspacing="0" cellpadding="8">
	    <tr>
		  <td width="212" class="main"><a href="#" class="blue"><b>Информация, </b></a>ниформация формализация.
		    Ut<br>
		    С одной стороны, статистика – это совокупность числовых показателей, характеризующих общественные явления и процессы (статистика труда, статистика транспорта.</td>
	    </tr>
	  </table>
	  <table width="212" border="0" cellspacing="0" cellpadding="0" height="20">
	    <tr>
		  <td width="106" align="right"><img src="images/index_37.gif" width=13 height=11 alt="">
		  </td>
		  <td width="106"><a href="#" class="blue"><b>Подробно</b></a></td>
	    </tr>
	  </table>
    </td>
  </tr>
  <tr valign="top">
    <td width="356" valign="bottom" background="images/index_32.jpg">
	  <table width="356" border="0" cellspacing="0" cellpadding="0">
	    <tr>
		  <td width="207"><img src="images/index_49.gif" width=207 height=53 alt=""></td>
		  <td width="137">
		    <table width="129" border="0" cellspacing="0" cellpadding="0">
			  <tr>
			    <td width="129"><a href="#"><img src="images/index_50.gif" width=129 height=40 alt="" border="0"></a></td>
			  </tr>
			  <tr>
			    <td width="129"><img src="images/index_53.gif" width=129 height=13 alt=""></td>
			  </tr>
		    </table>
		  </td>
		  <td width="12"><img src="images/index_51.gif" width=20 height=53 alt=""></td>
	    </tr>
	  </table>
    </td>
  </tr>
</table>
<table width="778" border="0" cellspacing="0" cellpadding="0" background="images/index_54.gif" height="56">
  <tr>
    <td align="center" class="main">

	   <font color="#FFFFFF">Copyright © 2003 Company. All
		  Rights Reserved.</font>
	
    </td>
  </tr>
</table>
<map name="Map">
  <area shape="rect" coords="17,11,154,19" href="#">
</map>
<!-- /Right_Column -->
</td>
<td bgcolor=#5194B3 background=images/bg3.gif style="background-repeat: repeat-x; background-position: top;"><img src=images/spacer.gif width=101 height=1><br></td>
</tr>
</BODY>
</HTML>
 
BaNru

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 153
У тебя везде стоит width="778", замени на width="100%". Остальные width (у table и td) тоже необходимо указывать в процентах.
Еще возможно мешают стили в main.css, их тоже надо смотреть.
Если не поможет и в стилях не найдешь, то лучше дать ссылку на сайт
 
Aristotel

Aristotel

Well-Known Member
Регистрация
14.04.2011
Сообщения
213
ваша проблема заключается в том что на каждой таблице у вас стоит ширина и у каждого тега <td> стоит ширина. чтобы сайт был резиновый нужно чтоб вся таблица была 100% , внутренние теги <td> были определенной ширины и один был 100% . вот пример самой первой таблице с картинками:


<table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/index_02.gif">
<tr>
<td width="483"><img src="images/index_01.gif" width=165 height=30 alt="" usemap="#Map" border="0"></td>
<td width="68"><a href="#"><img src="images/index_04.gif" width=68 height=30 alt="" border="0"></a></td>
<td width="100%"><a href="#"><img src="images/index_05.gif" width=70 height=30 alt="" border="0"></a></td>
<td width="56"><a href="#"><img src="images/index_06.gif" width=56 height=30 alt="" border="0"></a></td>
<td width="101"><a href="#"><img src="images/index_07.gif" width=98 height=30 alt="" border="0"></a></td>
</tr>
</table>

как вы видите, таблица шириной 100%, и в ней один тег шириной 100% который растягивается на весь экран. так же вы можете разделить все теги на проценты чтобы в сумме было 100% и задать им минимальную ширину чтобы при сжатие они доходили до какого то минимального размера.
 
A-F

A-F

Well-Known Member
Регистрация
25.07.2011
Сообщения
390
Стили юзать надо что бы ширину задать.
 
M

Maks_X

Новичок
Регистрация
12.12.2011
Сообщения
3
Aristotel, BaNru , спасибо Вам большое, сейчас попытаюсь все перестроить, отпишусь сразу как попробую.
 
F

fath

Member
Регистрация
13.12.2011
Сообщения
17
Советую тебе почитать книгу Влада Маржевича "Верстка веб страниц" там описываются такие как Фиксированный макет, Резиновый макет, Эластичный макет, Комбинированный макет и т.д.
 
M

Maks_X

Новичок
Регистрация
12.12.2011
Сообщения
3
Попробовал, к сожалению, не получилось. Таким образом растягивается только шапка и подвал, контент остается неизменным. Попытался найти шаблон,но сайт, с которого брал сейчас не грузится. Если вдруг кто поймет в чем дело, объясните пожалуйста, уже неизвестно сколько над ним сижу. =)

Скинул исходный шаблон.

Заранее благодарю.
 

Вложения

  • html.rar
    80,2 КБ Просмотры: 68
BaNru

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 153
Перечитай еще раз пост от Aristotel, и внеси изменения как он сказал. Он тебе подробно всё описал.
 
Статус
Закрыто для дальнейших ответов.

Онлайн статистика

Пользователи онлайн
0
Гости онлайн
21
Всего посетителей
21
Общее число может включать скрытых пользователей.

Статистика форума

Темы
10 933
Сообщения
64 098
Пользователи
12 697
Новый пользователь
House

Новые пользователи

Поделиться этой страницей

Верх Низ