Выравнивание текста по высоте в таблице

92

deasel

26 октября 2011, 12:47

7523

Добрый день!

Не силён в сайтостроении, отсюда и вопрос:

есть сайт, на сайте есть таблица с двумя столбцами (в одну строку). В одном столбце картинка, в другом - текст. Требуется выровнять текст и картинку по высоте.

В firefox всё отображается по центру как и требуется, но в Explorer всё смещается к верху таблицы.

Вот кусок кода таблицы:

<tbody>

<h3>Помощь в разработке</h3>

</middle></div>

</div>

</td></tr>

</tbody>

</table>

74

nikhotin

26 октября 2011, 12:52

#1

<td valign="top"> - по верхнему краю

<td valign="middle"> - по центру

...

Ничто не пугает нас страшнее всего,как одинокая маленькая девочка в белом платьице холодной осенней ночью на аллее рядом с кладбищем...

79

Olldman

26 октября 2011, 13:21

#2

Старайтесь не использовать "нерекомендуемые" (deprecated) элементы и атрибуты, чем чище html, тем он читабельней и меньше "весит".

<style type="text/css">

table{width:351px;height:53px;border-collapse:collapse;}

td{vertical-align:middle;}

</style>

  </head>

  <body>

<table>

  <tr>

    <td><img src="http://www.site.ru/2.PNG" alt="Помощь в разработке" height="53" width="41"></td>

    <td>Text</td>

  </tr>

</table>

Ну и стили лучше таки хранить в отдельном файле.

34

AlExTeam

26 октября 2011, 14:28

#3

Olldman:
Старайтесь не использовать "нерекомендуемые" (deprecated) элементы и атрибуты, чем чище html, тем он читабельней и меньше "весит".
Ну и стили лучше таки хранить в отдельном файле.

позвольте спросить, почему в отдельном лучше?

Заинтересовало, потому что обычно прописываю все в заголовке или прямо в стиле тэга. Имхо так проще.

Internet killed the video star

79

Olldman

26 октября 2011, 15:49

#4

Проще не значит лучше. Файл стилей при первом же заходе на сайт кэшируется браузером и при последующих просмотрах страниц подгружается уже из кэша, ну и графика, прописанная в нем также хорошо кэшируется.

В вашем же варианте, если прописываете стили непосредственно в html (inline), браузер при каждом обращении к страницам грузит весь ваш код, парсит анализатором и только потом рисует страницу, что ессно влияет на скорость загрузки и прорисовки. Тем более это касается таблиц, потому как таблица браузером рисуется только после полного ее прочтения. Редко кто использует специальные директивы CSS для поэтапной прорисовки таблиц.

Я уж не буду здесь расписывать давно набитую искомину о целесообразности использования таблиц в качестве структурной разметки ;)

Кэш и сжатие для Влияние качества верстки на Как лучше для СЕО?

34

AlExTeam

28 октября 2011, 18:57

#5

Olldman:
Проще не значит лучше. Файл стилей при первом же заходе на сайт кэшируется браузером и при последующих просмотрах страниц подгружается уже из кэша, ну и графика, прописанная в нем также хорошо кэшируется.

Да это плюс, но бывает что css слетает и грузится голый html, а это уже минус, бо он в непотребном виде без css.

В вашем же варианте, если прописываете стили непосредственно в html (inline), браузер при каждом обращении к страницам грузит весь ваш код, парсит анализатором и только потом рисует страницу, что ессно влияет на скорость загрузки и прорисовки. Тем более это касается таблиц, потому как таблица браузером рисуется только после полного ее прочтения. Редко кто использует специальные директивы CSS для поэтапной прорисовки таблиц.

А это тут при чем? Вы хотите сказать, что при отдельном css браузер не парсит?

Имхо, парсит точно также и производительность одинакова, что так, что так.

Может у вас есть опыт по тестированию производительности этих двух случаев, тогда конечно же поверю, что ксс лучше чем встроенный стиль.

Я уж не буду здесь расписывать давно набитую искомину о целесообразности использования таблиц в качестве структурной разметки ;)

даже есть и так, то все равно, компы сейчас мощные, видео умеют показывать, не то что таблицу какую-то нарисовать =))

Стили не работают в Разлогинивает на одном компе Некорректное поведение дизайнера Shevy!

79

Olldman

29 октября 2011, 06:48

#6

Да это плюс, но бывает что css слетает и грузится голый html, а это уже минус, бо он в непотребном виде без css.

- как правило, ссылка на файл .css ставится в "первых рядах", т.е. в служебной области (head) и если уж страница загрузилась полностью, то стили по любому уже в кэше браузера. Или я не понял про "слетает".

А это тут при чем? Вы хотите сказать, что при отдельном css браузер не парсит?

- парсит, а как же, но только html, т.к. css уже есть. На счет производительности - ну прикиньте сами - либо каждый раз грузить html+css(а это, бывает, очень много), либо загрузить лишь код html и новый контент. Я думаю. что вы не будете спорить о значительной разнице скорости "вытаскивания" css из кэша, или закачивания его с сервера.

даже есть и так, то все равно, компы сейчас мощные, видео умеют показывать, не то что таблицу какую-то нарисовать =))

- видимо вы не поняли, что я хотел сказать. Дело не в мощностях компов, а в семантике.

Пять веских причин сделать Как повысить скорость загрузки WordPress Gutenberg помогает улучшить

34

AlExTeam

29 октября 2011, 20:22

#7

Olldman:
- как правило, ссылка на файл .css ставится в "первых рядах", т.е. в служебной области (head) и если уж страница загрузилась полностью, то стили по любому уже в кэше браузера. Или я не понял про "слетает".

Но все ж таки бывает, и довольно частенько, что загрузка css'a оборвалась и мы вместо веб-страницы созерцаем голый html, в котором ничего понять нельзя, пока не сделаешь F5.

- парсит, а как же, но только html, т.к. css уже есть. На счет производительности - ну прикиньте сами - либо каждый раз грузить html+css(а это, бывает, очень много), либо загрузить лишь код html и новый контент. Я думаю. что вы не будете спорить о значительной разнице скорости "вытаскивания" css из кэша, или закачивания его с сервера.

Если для страницы css'a до килобайта и он в заголовке, то это мелочи, про которые и говорить не стоит. Другое дело, это если css огромен, кило на 100. Тогда конечно ничего не остается, как подгружать модулем.

Но с таким пока что не сталкивался. =))

- видимо вы не поняли, что я хотел сказать. Дело не в мощностях компов, а в семантике.

Вот тут действительно не понял. Потому что не могу понять, при чем тут происхождение слов к производительности компов на клиентской стороне =)))

Как не загружать лишние Как настроиться на рабочий nginx rate limit для

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы