Какой лучший способ указать ширину фиксированного столбца HTML (атрибут width или style) - PullRequest
Новая
       10

Какой лучший способ указать ширину фиксированного столбца HTML (атрибут width или style)

6 голосов
/ 06 октября 2009

Я хотел бы спросить, как лучше задать ширину столбца HTML? атрибут ширины или атрибут стиля? Предполагая, что я использую IE 6. IE отображает атрибут width лучше, чем style?

По атрибуту ширины 

<table width="900">
    <tr>
        <td width="450">A</td>
        <td colspan="2" width="450">B&C</td>
    </tr>
    ....
</table>

ИЛИ по атрибуту стиля 

<table style="width:900px;">
    <tr>
        <td style="width: 450px;">A</td>
        <td colspan="2" style="width: 450px;">B&C</td>
    </tr>
    ....
</table>

Ответы [ 2 ]

15 голосов
/ 06 октября 2009

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

Если браузер заранее знает ширину столбцов первой строки таблицы (если вы укажете фиксированный стиль макета таблицы для таблицы), браузер может начать рендеринг верхней части таблицы даже до того, как рассчитает ширину любых результирующих строк. Что это значит? Таблицы, заполненные вызовами Ajax с фиксированной разметкой, могут начать отображать результаты для пользователя до завершения полного вызова Ajax. Лучший способ думать об этом как прогрессивный JPG. В конце ваши страницы будут загружаться быстрее. 

table
{
table-layout:fixed;
}

Теперь, чтобы ответить на ваш вопрос.

На самом деле ни один из приведенных вами примеров не верен. Вы обычно не устанавливаете ширину для ячейки, которая охватывает 2 или более ячеек. В любой таблице хорошей идеей будет создать хотя бы 1 строку со всеми ячейками, это может быть либо в TH, либо (просто так, как мне нравится делать в пустом виде.

Например ... 

<table>
<tr>
<td width="450"></td>
<td width="225"></td>
<td width="225"></td>
</tr>
<tr>
<td>content here</td>
<td colspan="2">content here</td>
</tr>
</table>

Каким бы способом вы ни решили использовать стиль или просто стандартную ширину html, выбор за вами, но в итоге у вас должна быть первая строка (если макет таблицы фиксирован) или любая строка (если макет таблицы не фиксирован) содержать определение ширины для каждой инвидивной ячейки. Это также поможет вам в планировании правильной таблицы, надеюсь, это поможет.

Проверьте исправленную компоновку таблицы, создав огромную таблицу строк размером в 10 000, и проверьте скорость рендеринга по сравнению с нефиксированной компоновкой таблицы.

Вся дискуссия о HTML 4 против XHTML, стиле против атрибутов, я думаю, на самом деле является вопросом ремонтопригодности. Я не думаю, что есть что-то неправильное в установке ширины с помощью стиля или простой ширины с переходом HTML 4, они оба делают одно и то же. Причина, по которой вы можете сделать и то, и другое, заключается в том, что HTML немного развился, да, он может запутаться! Удачи

3 голосов
/ 07 мая 2012

Просто добавьте <div> тег внутрь <td> или <th>, определите ширину внутри <div> Это поможет вам. Больше ничего не работает.

например. 

<td><div style="width: 50px" >...............</div></td>
...