Comment employer le CSS et les tables invisibles de HTML pour aligner le contenu de page Web

Signalé le 7 février 2009 chez 5:32 AM

Les questions d'alignement sur vos blogs et pages Web est un problème commun pour commencer des bloggers. ? ? Si vous devez mettre le contenu colomnaire (comme la présentation d'un journal ou de magasin) cependant, est-ce que vous n'aurez pas un choix mais employez des tables. ? Voir notre exemple ci-dessous avant et après que j'aie composé le texte :

AVANT :

« Mais je dois expliquer à toi comment toute cette idée erronée de dénoncer le plaisir et de féliciter la douleur a été soutenue et je te ferai un exposé complet du système, et expose les enseignements réels du grand explorateur de la vérité, le maître-constructeur de bonheur humain. Unique rejet, ne déteste, ou évite le plaisir lui-même, parce que c'est plaisir, mais parce que ceux qui ne savent pas poursuivre le plaisir rationnellement rencontrent les conséquences qui sont extrêmement douloureuses.

Ni y a encore il n'importe qui qui aime ou poursuit ou désire obtenir la douleur de elle-même, parce que c'est douleur, mais parce que de temps en temps les circonstances se produisent dans quels travail dur et douleur peut l'obtenir un certain grand plaisir. Pour prendre un exemple insignifiant, qui de nous entreprend jamais l'exercice physique laborieux, excepté pour obtenir un certain avantage de lui ? Mais qui a bien pour trouver le défaut avec un homme qui choisit d'apprécier un plaisir qui n'a aucune conséquence ennuyante, ou un qui évite une douleur qui ne produit aucun plaisir résultant ? »

ENSUITE :

dans quels travail dur et douleur peut l'obtenir un certain grand plaisir. Pour prendre un exemple insignifiant, qui de nous entreprend jamais l'exercice physique laborieux, excepté pour obtenir un certain avantage de lui ? Mais qui a bien pour trouver le défaut avec un homme qui choisit d'apprécier un plaisir qui n'a aucune conséquence ennuyante, ou un qui évite une douleur qui ne produit aucun plaisir résultant ? »

Non seulement qu'il est plus facile lire le format restructuré, il également maintient la largeur de la chose entière puisque vous pouvez mettre une table pour occuper seulement une certaine quantité de Pixel. ? Vous pouvez également placer la distance de l'espace entre les colonnes au match vos besoins. ? Ainsi comment faisons-nous un tel récipient de table ? ?

Simple, insérez une table en utilisant votre rédacteur de HTML. ? Just make sure that you don?t put a value on the BORDER attribute so that the borders are invisible.? Let rows be equal to 1 and columns to 2.? You can change the rows and columns as you require.? In the screenshot below, I used Live Writer but it should be the same principle as in other web editors:

You can see above that I left the border blank and that makes it invisible. If you look at the code of the example table above, I used size 8 pixels of cellpadding and 5 pixels of cellspacing.? The border?s value is of course zero.

<table cellspacing="5" cellpadding="8" width="506" border="0">

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Then after this, just paste the content inside the cells of the table.?

You will need to manually adjust the amount of text inside each cell to balance the amount of text on each one.? Adjust the table width, cellpadding and cellspacing parameter values as you desire.

That?s it! You should be able to apply the concept on invisible tables to handle columnar text displays with perfect alignment.??