Как установить определенную ширину для макета таблицы HTML?

Question

У меня есть макет, сделанный в фотошопе, и я пытаюсь нарезать его и поместить в макет таблицы. Я пытаюсь сделать макет, используя таблицу, которая выглядит следующим образом: http://imgur.com/eKndd.gif

но когда я размечал таблицу, все значения ширины ячеек кажутся неправильными, а не то, что я хочу.

Моя разметка:

<table width="950" border="1">
  <tr>
    <td colspan="2" rowspan="3" width="268" height="251">rotating pic</td>
    <td colspan="2" width="682" height="150">banner</td>
  </tr>
  <tr>
    <td colspan="2" width= "682" height="48">top nav</td>
  </tr>
  <tr>
    <td width="404" height="54">filler</td>
    <td rowspan="2" width="278" height="533">right bar</td>
  </tr>
  <tr>
    <td width="191" height="479">left bar</td>
    <td colspan="2" width="481">content</td>
  </tr>
</table>

Ячейки должны иметь определенную ширину и высоту для изображений, но при визуализации ни одна из значений ширины не является правильной. Что я делаю неправильно? Пожалуйста помоги. Спасибо.

Answer 1

Ваши высоты слишком высоки для ожидаемого макета, а также для того, чтобы ваш баннер, верхняя панель навигации и заполнитель были одинаковой высоты, вам действительно нужно сделать их атрибуты высоты одинаковыми ...

Кроме того, чтобы не быть унылым, но могу ли я предложить не делать макеты на основе таблиц? Вы должны рассмотреть возможность использования CSS.

Answer 2

Макет не является функцией HTML. Вот для чего нужны таблицы стилей. С учетом сказанного ваш код будет полностью недоступен. Это означает, что если ваш код для какого-либо бизнеса в США или Великобритании широко открыт для судебных исков о дискриминации. В дополнение к сбоям доступности ваш код страницы будет сильно раздут, что приведет к потере пропускной способности и времени пользователя.

Мое предложение - не использовать HTML для разметки. Практика разделения разметки и презентации. Не используйте какие-либо атрибуты, имеющие какое-либо косметическое назначение, такие как: ширина, высота, граница, заполнение ячеек, выделение ячеек и т. Д.

Оказывайте своим пользователям огромную услугу и не используйте разметку для презентации.

Answer 3

Можем ли мы увидеть ваш код с изображениями? Я бы посоветовал убрать высоту и ширину, вставить изображения, а затем поиграть с высотой / шириной, чтобы получить их по своему вкусу. Ваш макет выглядит слишком сложным. Не могли бы вы использовать более простую структуру из 3 столбцов и рассматривать весь заголовок как один элемент?

Answer 4

Я вижу, что есть две возможности

1) Добавляемые изображения не изменяются в размере, который вы хотите вписать.

2) При добавлении изображений с помощью тега попробуйте явно установить высоту и ширину. Попробуй это РУКОВОДСТВО ПО ССЫЛКЕ ИЗОБРАЖЕНИЯ HTML

Если вы новичок, попробуйте раскладку с помощью DIV, таблицы будут устаревшими.