Помогите с colspan/rowspan!

  1. Биржа фриланса
  2. Форум фрилансеров
  3. Программирование
Андрей Бастрыкин
188 сообщений
#16 лет назад
Help!! Не могу разобраться с этими атрибумати, как они работают, умом понимаю, а визуально не представляю. Народ, помогите!
Как именно что подробно работает, где есть хорошие примеры использования этого? Сам ну никак не мгу разобраться.
Николай С.
710 сообщений
#16 лет назад
<table border=1 width="100%">
<tr>
<td colspan=2>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

<br>
<br>

<table border=1 width="100%">
<tr>
<td rowspan=2>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
Павел Н.
159 сообщений
#16 лет назад
Пояснение...
В данном примере - на строке 3, colspan=2 показывает, что столбец<td> из строки 3 растягивается на два столбца <td> из строк 6 и 7
Получается такая таблица:
_____________
|..................|
|____________|
|........|.........|
|........|.........|
|_____|______|
Из второго примера получается такая таблица:
_____________
|......|...........|
|......|_______|
|......|...........|
|____|_______|
То есть строка <tr> с параметром rowspan=2 растягивается на две простые строки...

P.S. Пришлось поставить точки, чтобы таблица не разъезжалась из-за фильтра форума...
Андрей Бастрыкин
188 сообщений
#16 лет назад
Спасибо, ребятки! Я почти разобрался, просто в ImgReady резал шаблон, и там повыскакивали spaceры Пробовал их удалить, пока не понял, что от них не избавиться. А что теперь делать?
Павел Н.
159 сообщений
#16 лет назад
От них можно избавиться... но нужно переверстать страницу...
Андрей Бастрыкин
188 сообщений
#16 лет назад


А еще такой вопрос. Не выравниваются вертикально данные в таблице. Что можно сделать?

<td width="110" height="145" valign="middle" class="topmenu" style=" vertical-align:middle; background-color:#000000;">
<a class="topmenu" href="#" >О компании</a>
<a class="topmenu" href="#" >Каталог товаров</a>
<a class="topmenu" href="#" >Как заказать</a>
<a class="topmenu" href="#" >Доставка товара</a>
<a class="topmenu" href="#" >Оплата</a>
<a class="topmenu" href="#" >Контакты</a>
</td>
Valign и CSS не помогли. Меню ссылок плывет вверх, а так по всей странице - нельзя выравнивать.Padding-ами не очень удобно, есть способ точновы ровнять?
Павел Н.
159 сообщений
#16 лет назад
Может соседние таблицы мешают... покажите весь код...
Андрей Бастрыкин
188 сообщений
#16 лет назад
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Компания &laquo;РОСТПРОМ&raquo;</title>
<meta http-equiv="Content-Type" content="text/html;&nbsp;charset=windows-1251">
<script type="text/javascript"></script>
<style type="text/css">
body{margin:0; padding:0;}

.topmenu{
width:110px;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:8pt;
color:white;
text-align:left;
padding-left:2px;
vertical-align:middle;
text-decoration:none;
}
a.topmenu:hover{color:#FFFF99;}

.centermenu{
display:block;
width:115px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:8pt;
color:white;
text-align:center;
padding:6px;
vertical-align:middle;
text-decoration:none;
}
a.centermenu:hover{
color:#FFFF99;
background-image:url(menu_gradient_hover.gif);
background-repeat:repeat-x;}

</style>
</head>
<body>

<!-- Шапка -->
<table cellspacing="0" cellpadding="0" border="0" height="145" width="100%">
<tr>
<td width="194" height="145"><img src="header-top-left.gif" alt=""/></td>
<td width="110" height="145" valign="middle" class="topmenu" style=" vertical-align:middle; background-color:#000000;">
<a class="topmenu" href="#" >О компании</a>
<a class="topmenu" href="#" >Каталог товаров</a>
<a class="topmenu" href="#" >Как заказать</a>
<a class="topmenu" href="#" >Доставка товара</a>
<a class="topmenu" href="#" >Оплата</a>
<a class="topmenu" href="#" >Контакты</a>
</td>
<td width="730" height="145"><img src="header-top-3.gif" width="730" alt="" height="146"/></td>
<td width="100%" height="145" bgcolor="#000000">вава</td>
</tr>
</table>

<!-- Меню -->
<table cellspacing="0" cellpadding="0" border="0" height="67" width="100%">
<tr>
<td width="189" height="67" style="vertical-align:middle; width:189px; height:67px; background-color:#800000;border-left:2px solid #56180D;border-right:2px solid #B4706D;">
<a href="#" class="centermenu" >СПЕЦПРЕДЛОЖЕНИЕ</a>
</td>
<td width="105" height="67" style=" background-color:#800000;border-left:2px solid #56180D;border-right:2px solid #B4706D;">
<a href="#" class="centermenu">РУЧНОЙ <br> ИНСТРУМЕНТ</a></td>
<td width="117" height="67" style=" background-color:#800000;border-left:2px solid #56180D;border-right:2px solid #B4706D;">
<a href="#" class="centermenu">ЭЛЕКТРО <br>ИНСТРУМЕНТ</a></td>
<td width="105" height="67" style=" background-color:#800000;border-left:2px solid #56180D;border-right:2px solid #B4706D;">
<a href="#" class="centermenu">СВАРОЧНОЕ <br>ОБОРУДОВАНИЕ</a></td>
<td width="102" height="67" style=" background-color:#800000;border-left:2px solid #56180D;border-right:2px solid #B4706D;">
<a href="#" class="centermenu">ТЕЛЕЖКИ</a></td>
<td width="103" height="67" style=" background-color:#800000;border-left:2px solid #56180D;border-right:2px solid #B4706D;">
<a href="#" class="centermenu">МОЙКИ</a></td>
<td width="101" height="67" style="background-color:#800000;"><img src="menu-7.gif" width="101" height="67" alt=""/></td>
<td width="53" height="67" style="background-image:url(menu-8.gif);"><img src="menu-8.gif" width="53" height="67" alt=""/></td>
<td width="91" height="67" style="background-image:url(menu-9.gif);"><img src="menu-9.gif" width="91" height="67" alt=""/></td>
<td width="100%" bgcolor="#810000">&nbsp;</td>
</tr>
</table>

<!-- Центральная часть-->
<table cellpadding="0" width="100%" height="545" cellspacing="0" border="0" style="background-image:url(bg_content.jpg); background-repeat:repeat-x; text-align:center; vertical-align:top; padding:15px ;">
<tr>
<td>
<!-- Контейнер для центр части -->
<table cellpadding="0" width="721" height="510" cellspacing="0" border="0">
<tr>
<td width="750">

<!-- Вложенная центральная часть со фреймами -->
<table id="Table_01" width="721" height="512" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/center_01.gif" width="169" height="67" alt=""></td>
<td rowspan="6"><img src="images/center_02.gif" width="12" height="510" alt=""></td>
<td rowspan="3"><img src="images/center_03.gif" width="7" height="290" alt=""></td>
<td rowspan="4" width="524" height="290" >
<iframe src="iframe1.html" frameborder="0" name="iframe2" width="524" height="290" scrolling="auto"> </iframe>
</td>
<td rowspan="3"><img src="images/center_05.gif" width="8" height="290" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="67" alt=""></td>
</tr>
<tr>
<td><img src="images/center_06.gif" width="169" height="7" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="3" width="169" height="429" bgcolor="#666666">
<iframe src="iframe2.html" frameborder="0" name="iframe1" width="170" height="443" scrolling="auto"> </iframe></td>
<td><img src="images/spacer.gif" width="1" height="216" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="images/center_07.gif" width="539" height="10" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/center_08.gif" width="7" height="210" alt=""></td>
<td rowspan="2" width="524" height="210" style="background-image:url(images/center_09.gif); background-repeat:repeat-x; ">
<iframe src="iframe3.html" frameborder="0" name="iframe1" width="170" height="443" scrolling="auto"> </iframe>
</td>
<td rowspan="2"><img src="images/center_10.gif" width="8" height="210" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="203" alt=""></td>
</tr>
<tr>
<td><img src="images/center_11.gif" width="169" height="7" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
</table>

</td>
</tr>
<!-- Конец для контейнера центр части -->
</table>

<!-- Конец центр части-->
</td>
</tr>
</table>
<!-- Шапка 1-->
<div style="background-color:#800000; text-align:center; color:white; width:100%; height:15px;">&copy;2007 Ростопром</div>
<!-- Шапка 2-->
<div style="background-color:#000000; text-align:center; color:white; width:100%; height:60px;">
<img src="bottom_logo.gif" alt=""/>
</div>
</body>
</html>
Павел Н.
159 сообщений
#16 лет назад
Правильный вариант:
<td width="110" height="145" valign="middle" style=" vertical-align:middle; background-color:#000000;">
<a class="topmenu" href="#" >О компании</a>
<a class="topmenu" href="#" >Каталог товаров</a>
<a class="topmenu" href="#" >Как заказать</a>
<a class="topmenu" href="#" >Доставка товара</a>
<a class="topmenu" href="#" >Оплата</a>
<a class="topmenu" href="#" >Контакты</a>
</td>

Было удалено class="topmenu", а значит в css для topmenu прописано что-то неправильно...
Андрей Бастрыкин
188 сообщений
#16 лет назад
boomer1311, спасибо большое!!! Все наладилось, во всех браузерах! Правда почему-то поплыли границы, но разберусь.