Простая таблица HTML с фиксированными столбцами

Я ожидал, что средний столбец будет в 3 раза шире, чем левый и правый столбцы. Вместо указаний, указанных как 200 600, 200 (слева направо), ширины выглядели так, как если бы я их определял в следующем порядке: 200, 200, 600. Другими словами, столбец LAST появился в 3 раза шире, чем первые два ,Простая таблица HTML с фиксированными столбцами

Почему? (Это мой основной вопрос)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<title>Left</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
</head> 

<body> 

<table style="table-layout: fixed; width:1000px;"> 
    <colgroup> 
    </colgroup> 
    <colgroup> 
     <col width="200px"> 
     <col width="600px"> 
     <col width="200px"> 
    </colgroup> 
    <tr> 
     <td>1 </td> 
     <td>2 </td> 
     <td>3 </td> 
    </tr> 
</table> 

</body> 

</html>

Кроме того, есть ли какие-либо преимущества в следующих подходах к таблицам? (Это второстепенный вопрос, который был дан ответ)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<title>Left</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<link href="Untitled_1.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div style="width:1000px;"> 

    <div id="masthead"> 
    </div> 
    <div id="top_nav"> 
    </div> 
    <div id="container"> 
     <div id="left_col">Left 
     </div> 
     <div id="right_col">RIght 
     </div> 
     <div id="page_content">Page Content </div> 
    </div> 
    <div id="footer"> 
    </div> 
</div> 

</body> 

</html>

CSS:

#left_col { 
    width: 200px; 
    margin:0px; 
    float: left; 
} 

#page_content { 
    margin-left: 200px; 
    margin-right: 200px; 
    width: 600px; 
} 


#right_col 
{ 
    width: 200px; 
    float: right; 
}

источник

2010-02-16 ChadD

Преимущества 'div' против' table' зависят от данных/использования. Если данные являются табличными, то используйте 'table', если это просто для макета, используйте подход' div'. В конце концов, это сводится к цели и предпочтению. –

Если вы удалите первый (пустой) 'colgroup', отображается ли таблица как ожидалось? –

У вас есть дополнительный набор тегов COLGROUP ни с чем в них. Я предполагаю, что браузер вставляет одно (пустое) определение столбца для этого, а затем еще три во второй colgroup, потому что браузер пытается сделать все, что вам нужно. Удалите вкладки пустой colgroup, и она будет работать как ожидалось.

источник

2010-02-16 03:11:58

Интересно. Ты прав. Я, кажется, помню, что VS2008 автоматически добавил теги . Я попытался их удалить, и они вернулись. Поэтому я оставил их в том, что они были безобидны. Думаю, мне нужно прочитать этот тег. ти! – ChadD

Во-вторых, на основе ДИВ модель имеет преимущества в том, что его как более семантический и, вероятно, делают быстрее. Те, кто участвует в стандартах, скажут вам, что для вашего HTML важно быть семантическим. То есть каждый элемент имеет особое значение, и вы должны использовать соответствующий тег для своего значения. Это в основном помогает использовать устройства для чтения с экрана.

Таблицы подразумевают, что ваши данные являются как-то табличными. В этом случае вы используете таблицы как механизм для макета. Согласно современным передовым методам, это считается «нет-нет». Таким образом, браузеры больше борются за визуализацию таблиц, и часто вы видите визуальное «заполнение» данных. Посмотрите пример http://havenworks.com/. (Осторожно: ужасно уродливый).

Предполагая, что ваш таргетинг на аудиторию на основе html4 (то есть: не html5), то механизм макета на основе div имеет наибольший смысл.

Надеюсь, это поможет!

источник

2010-02-16 02:25:59

Будет что-то вроде этой работы за то, что вы пытаетесь сделать?

<table width="100%"> 
    <tr> 
    <td width="25%">&nbsp;</td> 
    <td width="50%">&nbsp;</td> 
    <td width="25%">&nbsp;</td> 
    </tr> 
</table>

Попробуйте для фиксированной ширины:

<table border="1" width="1000"> 
    <tr> 
    <td width="200">A</td> 
    <td width="600">B</td> 
    <td width="200">C</td> 
    </tr> 
</table>

источник

2010-02-16 02:26:15 Boolean

Да. Но почему не фиксированные ширины работают? Обратите внимание, что если я укажу ширину столбца в 600 20000 порядков, они выглядят так, как если бы они были указаны как 200, 600, 200. – ChadD

Я знаю больше о старом школьном способе этого делать .. сохраняя его просто .. вы можете получить любитель со стилями и т. д. – Boolean

Простая таблица HTML с фиксированными столбцами

ответ

Смежные вопросы