Трабла с отображением таблицы
есть таблица
если "ххх" - высота ячейки 'TD1' равна, например, 30, то выглядеть должно примерно так:
------------------
|*****|******|
|------| ******|
|*****|******|
|*****|******|
|*****|******|
------------------
а в осле и ему подобных выглядит примерно так:
------------------
|*****|******|
|*****|******|
|*****|******|
|------| ******|
|*****|******|
------------------
высоту ячейки 'TD3' задать не могу. Она должна растягиваться вместе с 'TD2', и у меня там имейдж на фоне 'TD3' должен повторятся.
Почему-то что задавай высоту ячейки 'TD1', что не задавай осёл и ему подобные ваще не реагируют..(лиса и опера нормально отображают)
как сделать чтоб нормально было?
Код:
<table width="300" border="1">
<tr>
<td id='TD1' height="xxx">
...
...
</td>
<td id='TD2' rowspan="2">
...
...
</td>
</tr>
<tr>
<td id='TD3'>
</td>
</tr>
</table>
<tr>
<td id='TD1' height="xxx">
...
...
</td>
<td id='TD2' rowspan="2">
...
...
</td>
</tr>
<tr>
<td id='TD3'>
</td>
</tr>
</table>
если "ххх" - высота ячейки 'TD1' равна, например, 30, то выглядеть должно примерно так:
------------------
|*****|******|
|------| ******|
|*****|******|
|*****|******|
|*****|******|
------------------
а в осле и ему подобных выглядит примерно так:
------------------
|*****|******|
|*****|******|
|*****|******|
|------| ******|
|*****|******|
------------------
высоту ячейки 'TD3' задать не могу. Она должна растягиваться вместе с 'TD2', и у меня там имейдж на фоне 'TD3' должен повторятся.
Почему-то что задавай высоту ячейки 'TD1', что не задавай осёл и ему подобные ваще не реагируют..(лиса и опера нормально отображают)
как сделать чтоб нормально было?
Твой код во всех трех упомянутых браузерах отображается идентично. Или объясни по-русски, что ты хочешь, или делай скриншоты и показывай, что на них не так.
вроде и так доступно объяснил..
наклякал, так може нагляднее будет.
вот код, также приложил скрины и сам пример в .зип:
наклякал, так може нагляднее будет.
вот код, также приложил скрины и сам пример в .зип:
Код:
<table height="300" border="0" cellspacing="1">
<tr>
<td id='TD1' width="200" height="191" background="image1.jpg">
</td>
<td id='TD2' rowspan="2">
<pre>
<font size='2'>
</font>
ывав
аывф
аыв
а
фа
фыаАавыафвыааываы
а
а
вы
авы
ав
а
ывафвыа
ывав
аывф
аыв
а
фа
фыа
</pre>
</td>
</tr>
<tr>
<td id='TD3' width="200" background="image2.jpg">
Грутовый Кед
Грутовый Кед
</td>
</tr>
</table>
<tr>
<td id='TD1' width="200" height="191" background="image1.jpg">
</td>
<td id='TD2' rowspan="2">
<pre>
<font size='2'>
</font>
ывав
аывф
аыв
а
фа
фыаАавыафвыааываы
а
а
вы
авы
ав
а
ывафвыа
ывав
аывф
аыв
а
фа
фыа
</pre>
</td>
</tr>
<tr>
<td id='TD3' width="200" background="image2.jpg">
Грутовый Кед
Грутовый Кед
</td>
</tr>
</table>
К ячейке TD3 необходимо применить стиль:
Поможет.
ЗЫ: Переходите на CSS. Будет много проще.
Код:
style="height:auto;"
Поможет.
ЗЫ: Переходите на CSS. Будет много проще.
кароче сделал как грится шо доктор прописал,- не х..
но если раскоментить верхние строки style, то будет наблюдатса улучшение - FF,Avant, Ослик будут отображать, а вот Опера обиделас=( и отображает криво..(опять прикрепил зипу)
но если раскоментить верхние строки style, то будет наблюдатса улучшение - FF,Avant, Ослик будут отображать, а вот Опера обиделас=( и отображает криво..(опять прикрепил зипу)
Код:
<HTML>
<HEAD>
<style>
/*
table.t1 td{
height: auto;}
*/
td.td1{
height: 191;
width: 200;
background-image: url("image1.jpg");}
td.td3{
height: auto;
background-image: url("image2.jpg");
background-repeat: repeat-y;}
</style>
</HEAD>
<table class='t1'>
<tr>
<td class='td1' id='TD1'>
</td>
<td id='TD2' rowspan="2" >
<pre>
<font size='2'>
</font>
ывав
аывф
аыв
а
фа
фыаАавыафвыааываы
а
а
вы
авы
ав
а
ывафвыа
ывав
аывф
аыв
а
фа
фыа
</pre>
</td>
</tr>
<tr>
<td class='td3' id='TD3' >
Грутовый Кед
Грутовый Кед
</td>
</tr>
</table>
</html>
<HEAD>
<style>
/*
table.t1 td{
height: auto;}
*/
td.td1{
height: 191;
width: 200;
background-image: url("image1.jpg");}
td.td3{
height: auto;
background-image: url("image2.jpg");
background-repeat: repeat-y;}
</style>
</HEAD>
<table class='t1'>
<tr>
<td class='td1' id='TD1'>
</td>
<td id='TD2' rowspan="2" >
<pre>
<font size='2'>
</font>
ывав
аывф
аыв
а
фа
фыаАавыафвыааываы
а
а
вы
авы
ав
а
ывафвыа
ывав
аывф
аыв
а
фа
фыа
</pre>
</td>
</tr>
<tr>
<td class='td3' id='TD3' >
Грутовый Кед
Грутовый Кед
</td>
</tr>
</table>
</html>
Цитата: jwagra
кароче сделал как грится шо доктор прописал,- не х.. но если раскоментить верхние строки style, то будет наблюдатса улучшение - FF,Avant, Ослик будут отображать, а вот Опера обиделас=( и отображает криво..(опять прикрепил зипу)
Или я не пойму, что вам нужно, или одно из двух. Ниже приведенный код отображается во всех браузерах одинаково. Он валиден. Если опять что-то не так - растолкуйте, пожалуйста.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>unname</title>
<style type="text/css">
td.td1
{height:191px;
width:200px;
background-image:url('image1.jpg');}
td.td3
{height:auto;
background:url('image2.jpg') repeat-y;}
</style>
</head>
<body>
<table class="t1">
<tr>
<td class="td1">
<p></p>
</td>
<td rowspan="2">
<p>pre</p>
</td>
</tr>
<tr>
<td class="td3">
<p>Грутовый Кед</p>
<p>Грутовый Кед</p>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>unname</title>
<style type="text/css">
td.td1
{height:191px;
width:200px;
background-image:url('image1.jpg');}
td.td3
{height:auto;
background:url('image2.jpg') repeat-y;}
</style>
</head>
<body>
<table class="t1">
<tr>
<td class="td1">
<p></p>
</td>
<td rowspan="2">
<p>pre</p>
</td>
</tr>
<tr>
<td class="td3">
<p>Грутовый Кед</p>
<p>Грутовый Кед</p>
</td>
</tr>
</table>
</body>
</html>
Цитата:
Ниже приведенный код отображается во всех браузерах одинаково. Он валиден.
б/п, НО если заменить "<p>pre</p>" на текст содержащий достаточное кол-во строк, то наблюдается картина такая же как на миниатюре в 3ем посте.
Цитата:
Или я не пойму, что вам нужно, или одно из двух.
нужно всё тоже сделать чтоб растягивалась ячейка TD1, а не TD3..
зы:
ппц, може я параноик и всё на самом деле в порядке...
Эээ... Но ведь ты указываешь высоту ячейки TD1 и хочешь чтобы она высоту меняла. При этом не указываешь высоту ячейки TD3 и хочешь, чтобы она не меняла высоту. Это не логично.
ппц.. пора спать))
нужно всё тоже сделать чтоб растягивалась ячейка TD3, а не TD1..
нужно всё тоже сделать чтоб растягивалась ячейка TD3, а не TD1..
А, во! Понял )) Сорри, если тугодумил. Да, есть такая проблема у ИЕ. Знаю только два решения - вложенные таблицы и отказаться от разметочных таблиц вообще.
спс за внимание/понимание/время =)
Цитата: Комаджу
вложенные таблицы
млин просто думал, что както можно по другому обойти.. но всё-таки придецо до/переделывать, как и планировал по началу..
просто касяк заметил в последний момент када уже контентом набивать стал.. мала опыту.
Подскажите пожалуйста,как создать таблицу такого вида:
используя только один <TABLE></TABLE> ?
И такой аот вариант:
используя только один <TABLE></TABLE> ?
И такой аот вариант:
И границы чтобы были как на рисунке?
Ну да,речь именно о границах.
http://www.w3.org/TR/CSS21/tables.html#borders
Вот здесь ответ. Не уверен, что можно только силами CSS управлять пустотой между определенными ячейками, но поискать стОит. Если не найдете, то эти пустоты можно искуственно вписать дополнительными ячейками.
Вот здесь ответ. Не уверен, что можно только силами CSS управлять пустотой между определенными ячейками, но поискать стОит. Если не найдете, то эти пустоты можно искуственно вписать дополнительными ячейками.
Ничего там не нашёл,возможно просто я плохо понимаю английский.
Пока применил конструкцию из нескольких таблиц...
Пока применил конструкцию из нескольких таблиц...