<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="…"></td><td><h2>Альбом: <a class="AlbumData">…</a></h2></td>
</tr>
<tr>
<td colspan="2" class="song" width="527"><a href="#">Песня 0</a></td>
</tr>
<tr>
<td colspan="2" class="song" width="527"><a href="#">Песня 1</a></td>
</tr>
<tr>
<td colspan="2" class="song" width="527"><a href="#">Песня 2</a></td>
</tr>
</table>
Проблема с выравниванием в объединённой ячейке
Здравствуй,уважаемый CodeNet
Доброго времени суток
У меня такая проблема–имеется код следующего вида:[HTML]<Table Align=Right CellPadding=0 CellSpacing=0>
<TR>
<TD RowSpan=3><H2><Img Align=Middle Src="…">Альбом: <A Class=AlbumData>…</A></H2></TD>
<TD Background="…" Class=Song Width=527><A HRef=#00>Песня 0</A></TD><TD RowSpan=3> </TD>
</TR>
<TR><TD Background="…" Class=Song><A HRef=#01>Песня 1</A></TD></TR>
<TR><TD Background="…" Class=Song><A HRef=#02>Песня 2</A></TD></TR>
</Table>[/HTML]Мне надо центрировать по вертикали содержимое ячейки с картинкой альбома(самой 1-й по порядку,той,что объединяет в себе 3 строки с названиями песни).Попытка ввести <TD VAlign=Bottom…> никакого влияния не оказывает,хотя на другие ячейки(например,с названием песни) этот атрибут влияет.Как быть?
P.S. В крайнем случае можно сделать с помощью CSS(для ячеек такого типа) класс,в котором будет задаваться вертикальное выравнивание;только я не знаю,каким атрибутом CSS это описать–подскажите,пожалуйста
Примечания:
0. Классы CSS,не указанные в выше приведённом фрагменте,не содержат ничего,что могло бы повлиять на позиционирование элементов,только форматирование текста
1. Background ссылается на одну и ту же картинку(впрочем,в данном контексте это не важно).Соответственно,Width–это ширина той картинки
2. Img вставляет изображение ~200x200(символизирует альбом:))
P.P.S. В Опере по умолчанию содержимое ячейки центрируется,а вот в IE(под который эта страница делается) выравнивание идёт по верху.Это и требуется устранить
Доброго времени суток
У меня такая проблема–имеется код следующего вида:[HTML]<Table Align=Right CellPadding=0 CellSpacing=0>
<TR>
<TD RowSpan=3><H2><Img Align=Middle Src="…">Альбом: <A Class=AlbumData>…</A></H2></TD>
<TD Background="…" Class=Song Width=527><A HRef=#00>Песня 0</A></TD><TD RowSpan=3> </TD>
</TR>
<TR><TD Background="…" Class=Song><A HRef=#01>Песня 1</A></TD></TR>
<TR><TD Background="…" Class=Song><A HRef=#02>Песня 2</A></TD></TR>
</Table>[/HTML]Мне надо центрировать по вертикали содержимое ячейки с картинкой альбома(самой 1-й по порядку,той,что объединяет в себе 3 строки с названиями песни).Попытка ввести <TD VAlign=Bottom…> никакого влияния не оказывает,хотя на другие ячейки(например,с названием песни) этот атрибут влияет.Как быть?
P.S. В крайнем случае можно сделать с помощью CSS(для ячеек такого типа) класс,в котором будет задаваться вертикальное выравнивание;только я не знаю,каким атрибутом CSS это описать–подскажите,пожалуйста
Примечания:
0. Классы CSS,не указанные в выше приведённом фрагменте,не содержат ничего,что могло бы повлиять на позиционирование элементов,только форматирование текста
1. Background ссылается на одну и ту же картинку(впрочем,в данном контексте это не важно).Соответственно,Width–это ширина той картинки
2. Img вставляет изображение ~200x200(символизирует альбом:))
P.P.S. В Опере по умолчанию содержимое ячейки центрируется,а вот в IE(под который эта страница делается) выравнивание идёт по верху.Это и требуется устранить
Вы вообще где учились HTML'ю??? С таким кодом у вас ничего не получится
1) Все значения атрибутов должны быть в кавычках
2) Все названия атрибутов должны быть написаны маленькими буквами
3) Все теги должны быть написаны маленькими буквами
4) А зачем там rowspan????
Теперь о решении проблемы. Я бы лично разнес картинку и текст в разные ячейки таблицы поскольку так с ними проще работать
1) Все значения атрибутов должны быть в кавычках
2) Все названия атрибутов должны быть написаны маленькими буквами
3) Все теги должны быть написаны маленькими буквами
4) А зачем там rowspan????
Теперь о решении проблемы. Я бы лично разнес картинку и текст в разные ячейки таблицы поскольку так с ними проще работать
Код:
Дома я учился HTML'ю:).И не только.Нормально всё до этого работало,и сейчас тоже
1) Можно и без кавычек–IE это понимает,и не только он:)
2) Согласно стандарту,регистр букв не влияет
3) То же самое
4) Затем,чтобы объединить 3 левых ячейки в одну(ибо слева должна быть только 1 ячейка,вне зависимости от того,сколько из справа)
А с таким layout'ом получится,что картинка и текст "Альбом" будут на достаточном расстоянии друг от друга,да ещё и вверху таблицы,а мне надо,чтобы именно слева ото всех.Пример:[HTML]+———————————————+——————————————+
| | Текст 0|
| +——————————————+
| Это дело | Текст 1|
| должно быть +——————————————+
| по центру | … |
| +——————————————+
| | Текст n|
+———————————————+——————————————+[/HTML]Вот "Это дело" мне и надо вертикально выровнять по центру.Почему-то в объединённой ячейке атрибут VAlign=Center не работает,равно как и остальные его значения.Т.е. пишу я[HTML]<Table Align=Right CellPadding=0 CellSpacing=0>
<TR>
<TD VALIGN=CENTER RowSpan=3><H2><Img Align=Middle Src="…">Альбом:…[/HTML]а содержимое левой ячейки по центру не выравнивается почему-то:(
Так что твой вариант тут не подходит…Но благодарю за своевременный ответ!
P.S. В коде выделил атрибут VAlign заглавными буквами,ибо форумная разметка(типа ,[Color=]…) в блоке с кодом не работает
1) Можно и без кавычек–IE это понимает,и не только он:)
2) Согласно стандарту,регистр букв не влияет
3) То же самое
4) Затем,чтобы объединить 3 левых ячейки в одну(ибо слева должна быть только 1 ячейка,вне зависимости от того,сколько из справа)
А с таким layout'ом получится,что картинка и текст "Альбом" будут на достаточном расстоянии друг от друга,да ещё и вверху таблицы,а мне надо,чтобы именно слева ото всех.Пример:[HTML]+———————————————+——————————————+
| | Текст 0|
| +——————————————+
| Это дело | Текст 1|
| должно быть +——————————————+
| по центру | … |
| +——————————————+
| | Текст n|
+———————————————+——————————————+[/HTML]Вот "Это дело" мне и надо вертикально выровнять по центру.Почему-то в объединённой ячейке атрибут VAlign=Center не работает,равно как и остальные его значения.Т.е. пишу я[HTML]<Table Align=Right CellPadding=0 CellSpacing=0>
<TR>
<TD VALIGN=CENTER RowSpan=3><H2><Img Align=Middle Src="…">Альбом:…[/HTML]а содержимое левой ячейки по центру не выравнивается почему-то:(
Так что твой вариант тут не подходит…Но благодарю за своевременный ответ!
P.S. В коде выделил атрибут VAlign заглавными буквами,ибо форумная разметка(типа ,[Color=]…) в блоке с кодом не работает
Цитата: @pixo $oft
Дома я учился HTML'ю:).И не только.Нормально всё до этого работало,и сейчас тоже
1) Можно и без кавычек–IE это понимает,и не только он:)
2) Согласно стандарту,регистр букв не влияет
3) То же самое
4) Затем,чтобы объединить 3 левых ячейки в одну(ибо слева должна быть только 1 ячейка,вне зависимости от того,сколько из справа)
1) Можно и без кавычек–IE это понимает,и не только он:)
2) Согласно стандарту,регистр букв не влияет
3) То же самое
4) Затем,чтобы объединить 3 левых ячейки в одну(ибо слева должна быть только 1 ячейка,вне зависимости от того,сколько из справа)
Заметно. Вы какой стандарт читали? Наверно ещё по самому древнему HTML, а открыть и прочитать стандарт по xHTML так и не смогли. Вот код, вполне нормальный и адекватный. Если работать не может, значит стили где-то перекрываются выше у вас. Или просто верстка кривая (что скорее всего)
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
table {
border-spacing: 0px;
width: 500px;
}
table td {
padding: 0px;
}
td.album_image {
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><td rowspan="4" class="album_image"><img src="album.jpg" /></td></tr>
<tr><td>Песенка 1</td></tr>
<tr><td>Песенка 2</td></tr>
<tr><td>Песенка 3</td></tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
table {
border-spacing: 0px;
width: 500px;
}
table td {
padding: 0px;
}
td.album_image {
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><td rowspan="4" class="album_image"><img src="album.jpg" /></td></tr>
<tr><td>Песенка 1</td></tr>
<tr><td>Песенка 2</td></tr>
<tr><td>Песенка 3</td></tr>
</table>
</body>
</html>
Цитата: @pixo $oft
Дома я учился HTML'ю:).И не только.Нормально всё до этого работало,и сейчас тоже
1) Можно и без кавычек–IE это понимает,и не только он:)
2) Согласно стандарту,регистр букв не влияет
3) То же самое
4) Затем,чтобы объединить 3 левых ячейки в одну(ибо слева должна быть только 1 ячейка,вне зависимости от того,сколько из справа)
1) Можно и без кавычек–IE это понимает,и не только он:)
2) Согласно стандарту,регистр букв не влияет
3) То же самое
4) Затем,чтобы объединить 3 левых ячейки в одну(ибо слева должна быть только 1 ячейка,вне зависимости от того,сколько из справа)
То что браузеры это понимают - вынужденная мера из-за идиотов и очень-очень старых сайтов середины 90х годов.
Читаем по тексту стандарта:
Цитата:
XHTML documents must use lower case for all HTML element and attribute names.
http://www.w3.org/TR/xhtml1/#h-4.2
Цитата:
All attribute values must be quoted, even those which appear to be numeric.
http://www.w3.org/TR/xhtml1/#h-4.4
Код вам все же лучше поправить потому как работать будет корректней (да и на форуме никому не охота копаться в г*не)
Цитата: RussianSpy
…вынужденная мера из-за идиотов…
…на форуме никому не охота копаться в г*не…
…на форуме никому не охота копаться в г*не…
Это уже оскорбление пользователя(есть такая статья:) в своде законов форума)
У меня ж не XHTML,я пока на широкие масштабы не замахивался…
За код благодарю–работает,только жаль,что надо дополнительный класс CSS создавать.А можно ли это какни-будь через атрибут Style тэга TD прописать?Я пытался–не получилось:(
И ещё вопрос:почему,несмотря на то,что объединяются 3 ячейки,в коде RowSpan=4?
P.S. Понял,почему 4
Странно,у меня почему-то Text-align работает(оказывает влияние на отображение),а вот Vertical-align–нет…:(
Лучше все таки создать отдельный класс в css файле, чем вписываеть через атрибут style.
Вообще вам нужно еще много и долго изучать HTML (даже базовый). Лучше всего подойдет для этого сайт htmlbook.ru
Там много статей, подробно расписаны все теги и свойства CSS.
почему у вас то или иное свойство не работает вам никто не ответит пока вы код не приведете в порядок ибо неясно влияет ли на это качество кода или же поведение браузера.
Вообще вам нужно еще много и долго изучать HTML (даже базовый). Лучше всего подойдет для этого сайт htmlbook.ru
Там много статей, подробно расписаны все теги и свойства CSS.
почему у вас то или иное свойство не работает вам никто не ответит пока вы код не приведете в порядок ибо неясно влияет ли на это качество кода или же поведение браузера.
На самом деле всё оказалось предельно просто:вертикально центрирование работает так,что от верхней границы ячейки до её содержимого и от нижней границы ячейки до её содержимого немного разное расстояние.Моя таблица была мала по высоте,поэтому-то содержимое и прижималось к верху.Не подскажете,как скорректировать код,чтобы эти расстояния были равны?