Table HTML simple avec colonnes fixes

Je m'attendais à ce que la colonne du milieu soit 3 fois plus large que les colonnes de gauche et de droite. Au lieu des signes apparaissant comme spécifiés 200, 600, 200 (gauche à droite), les largeurs apparaissaient comme si je les spécifiais dans cet ordre: 200, 200, 600. En d'autres termes, la colonne LAST apparaissait 3 fois plus large que les deux premiers .Table HTML simple avec colonnes fixes

Pourquoi? (Ceci est ma question principale)

<!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>

De même, l'approche non-table suivante présente-t-elle des avantages? (Ceci est une question secondaire qui a reçu une réponse)

<!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; 
}

Source

2010-02-16 ChadD

Les avantages de 'div' vs' table' dépendent des données/de l'utilisation. Si les données sont tabulaires, utilisez une table, si c'est juste pour la mise en page, utilisez l'approche 'div'. En fin de compte, il s'agit de but et de préférence, cependant. –

Si vous supprimez la première (vide) 'colgroup', la table apparaît-elle comme prévu? –

Vous avez un jeu supplémentaire de balises colgroup avec rien en eux. Je suppose que le navigateur insère une définition de colonne (vide) pour cela et trois autres dans le deuxième groupe, parce que le navigateur fait de son mieux pour faire ce que vous voulez. Supprimez les onglets colgroup vides et cela fonctionnera comme prévu.

Source

2010-02-16 03:11:58

Intéressant. Tu as raison. Je semble rappeler que VS2008 a ajouté automatiquement les balises . J'ai essayé de les enlever et ils sont revenus. Alors je les ai laissés en pensant qu'ils étaient inoffensifs. Je suppose que je dois lire sur cette étiquette. ty! – ChadD

Le second, le modèle basé sur div présente des avantages en ce que ses deux plus sémantique et rendra probablement plus rapidement. Ceux qui sont impliqués dans les standards vous diront qu'il est important que votre HTML soit sémantique. Autrement dit, chaque élément a une signification distincte et vous devez utiliser l'étiquette appropriée pour votre signification. Ceci est principalement pour aider à l'utilisation des lecteurs d'écran.

Les tables impliquent que vos données sont en quelque sorte tabulaires. Dans ce cas, vous utilisez des tables comme mécanisme de mise en page. Selon les meilleures pratiques actuelles, ceci est considéré comme un non-non. Les navigateurs ont plus de mal à rendre les tableaux et souvent vous voyez un "remplissage" visuel des données, de cette façon. Découvrez http://havenworks.com/ pour un exemple. (Attention: horriblement moche).

En supposant que vous ciblez un public basé sur html4 (c'est-à-dire: pas html5) alors le mécanisme de disposition basé sur div est le plus logique.

J'espère que ça aide!

Source

2010-02-16 02:25:59

Est-ce que quelque chose comme ceci fonctionnerait pour ce que vous essayez de faire?

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

Essayez ceci pour une largeur fixe:

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

Source

2010-02-16 02:26:15 Boolean

Oui. Mais pourquoi les largeurs fixes ne fonctionnent-elles pas? Notez que si je spécifie les largeurs de colonne dans l'ordre de 600,200,200, elles apparaissent comme si elles étaient spécifiées comme 200, 600, 200. – ChadD

Je sais plus de la façon old school de le faire .. garder simple .. vous pouvez obtenir plus chic avec des feuilles de style – Boolean

Table HTML simple avec colonnes fixes

Répondre

Questions connexes