Comment mettre en œuvre une structure de table en utilisant CSS

Question

<table> 
<tr> 
<td></td> 
<td></td> 
</tr> 
</table> 

Comment puis-je reproduire ce genre de structure à l'aide <div> ou <span> « ed CSS

Answer 1

Dépend de ce que vous essayez de répliquer. Avec l'exemple simple que vous avez donné, il n'est pas facile de dire exactement ce que vous essayez d'obtenir, mais si ce que vous essayez de faire est de placer deux blocs côte à côte (c'est-à-dire en tant que colonnes dans une page). mise en page), vous avez juste besoin de créer un couple d'éléments <div> et de les styliser en utilisant CSS pour apparaître l'un à côté de l'autre. En fonction de ce que vous voulez exactement, vous pouvez faire les feuilles de style de plusieurs façons. Une option serait de les définir tous les deux comme float:left;. Utilisez width:... pour définir la largeur souhaitée en pixels ou en pourcentage.

Si float est trop complexe pour vous (et qu'il s'agit d'un saut important dans la conception d'une table), vous pouvez envisager d'utiliser display:inline-block; à la place. Cela permettra également de positionner les <div> l'un à côté de l'autre, mais vous donne plus de contrôle sur la façon dont ils se positionnent. Enfin, si le contenu du <table> est réellement un tableau de données, n'ayez pas peur de le conserver dans une table - le tag <table> et ses amis sont toujours valides HTML, et mettre des données tabulaires dans une table est encore une bonne chose.

Answer 2

Si vous voulez dire que vous voulez afficher deux DIVs côté de l'autre, essayez d'utiliser les styles css float: left ou float: right. utilisez une autre div avec clear: left, clear: right ou clear: les deux pour réinitialiser les divs suivant un comportement normal.

Voici un lien expliquant plus à ce sujet:

http://www.w3schools.com/css/css_float.asp (cliquez sur le « l'essayer » des liens pour de très bons exemples)

Je ne sais pas si c'est ce que vous cherchez. .. mais je l'espère!