À l'aide de balises div à afficher sous forme de tableau de données

Il semble que vous êtes désireux d'afficher un tableau, à droite? Donc, aller de l'avant et utiliser le <table> tag.

OriginalL'auteur Andy Lester

Je ne veux pas paraître condescendant; si je le fais, j'ai mal compris et je suis désolé.

La plupart des gens froncer les sourcils sur les tables parce que les gens les utilisent pour la mauvaise raison. Souvent, les gens utilisent de grandes tables à positionner les choses dans leur site web. Ce est ce que les divs doit être utilisé pour. Pas les tables!

Cependant, si vous souhaitez afficher données tabulaires, telles qu'une liste des équipes de football, victoires, défaites, et des liens, vous devez très certainement utiliser des tableaux. C'est presque du jamais vu (mais pas impossible) d'utiliser des divs pour cela.

Rappelez-vous juste, si c'est pour l'affichage des données, vous pouvez certainement utiliser une table!

OriginalL'auteur stalepretzel

Est-il une raison de ne pas utiliser les tables? Si vous êtes à afficher des données tabulaires, il est préférable d'utiliser des tables - c'est ce qu'ils sont conçus pour.

Pour répondre à votre question, le mieux est probablement à attribuer une largeur fixe à chaque élément et l'ensemble float:left. Vous aurez besoin d'avoir un mannequin élément à la fin qui est clair:les deux, ou vous aurez à mettre clear:both sur le premier élément de chaque ligne. Cette méthode n'est toujours pas infaillible, si le contenu d'une cellule forces de la div pour être plus large, il ne sera pas redimensionner la colonne, seule la cellule. Vous peut peut-être éviter le redimensionnement en utilisant overflow:auto ou overflow:hidden, mais cela ne fonctionnent pas comme des tableaux.

OriginalL'auteur gregmac

Juste pour illustrer les propos de la réponse à la question précédente, vous invitant à utiliser le tableau au lieu de div pour tabulaire de données:

CSS Tableau de la galerie est un excellent moyen d'afficher de belles tables dans de nombreux de nombreux différents styles visuels.

OriginalL'auteur VonC

La propriété CSS float est ce que vous cherchez, si vous voulez la pile div à l'horizontale.

Voici un bon tutoriel sur la flotte: http://css.maxdesign.com.au/floatutorial/

OriginalL'auteur Gavin M. Roy

À l'âge de frameworks CSS, je ne vois vraiment pas un point de la dérive loin de la balise table complètement. Alors qu'il est maintenant possible de le faire display: table-* quelle que soit l'élément que vous voulez, mais la table est toujours un préféré balise en forme des données sous forme de tableaux (en n'oubliant pas qu'il est plus sémantiquement correct). Il suffit de choisir l'un des populaires framework CSS pour rendre les données tabulaires a l'air sympa au lieu de piratage de la présentation de <div> balises pour réaliser tout ce que il n'est pas conçu pour faire.

display: block

ne fonctionnera certainement pas, essayez de

display: inline

ou flotter tout à gauche puis placez-les en conséquence

mais si vous avez des données tabulaires, alors il est le meilleur pour les marques dans <table> tag

certains de référence: de sitepoint

OriginalL'auteur Jeffrey04

L'aide de ce code :

<div class="title">MyTitle</div><div class="subject">MySubject</div><div class="Summary">MySummary</div>

Vous avez 2 solutions (adapter les sélecteurs css à votre cas):

1 - Utiliser inline blocs

div 
{
    display: inline;
}

Cela aura pour résultat de mettre les blocs sur la même ligne, mais de supprimer le contrôle, vous pouvez avoir plus de leurs tailles.

2 - Utiliser float

div 
{
    width: 15%; /* size of each column : adapt */
    float: left; /* this make the block float at the left of the next one */
}

div.last_element /* last_element must be a class of the last div of your line */
{
   clear: right; /* prevent your the next line to jump on the previous one */
}

Le flotteur de la propriété est très utile pour le positionnement CSS : http://www.w3schools.com/css/pr_class_float.asp

OriginalL'auteur e-satis

Données tabulaires peuvent également être représentés par des listes imbriquées à - dire des listes de listes:

<ul>
    <li>
        heading 1
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
    <li>
        heading 2
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
</ul>

Que vous pouvez layout comme un tableau et aussi sémantiquement correct(ish).

OriginalL'auteur Darren Walker

J'ai posé une question similaire il y a un moment Calendrier en HTML et tout le monde m'a dit d'utiliser les tables de trop.

Si vous avez fait une page d'accueil igoogle, juste yoink leur code.
J'ai fait un système de colonnes et des articles dans les colonnes d'une page. Avis à google, vous ne pouvez pas avoir un nombre infini de colonnes et qui choque nos sensibilités comme objet des gens. Voici certaines de mes conclusions:

• Vous avez besoin de connaître la largeur des colonnes
• Vous besoin de connaître le nombre de colonnes
• Vous avez besoin de connaître la largeur de l'espace les colonnes de l'habitent.
• Vous devez vous assurer que les espaces ne déborde pas

J'ai fait un calendrier avec des balises DIV, car il est impossible d'obtenir XSL pour valider sans que le codage d'un nombre maximal de semaines dans le mois, qui est très offensif.

Le plus gros problème est que chaque zone doit être à la même hauteur, si vous voulez des informations pour être associé à un champ dans votre table avec des balises div, vous allez assurez-vous que l' whitespace:scroll ou whitespace:hidden est dans votre CSS.

OriginalL'auteur Peter Turner

Vous devez utiliser travées avec:

display:inline-block

Cela vous permettra de définir une largeur pour chacun des éléments tout en restant sur la même ligne.
Voir ici, spécifiquement cette section.

Maintenant, pour apaiser les downvoters - bien sûr tableaux de données doit être dans un tableau. Mais il a très expressément ne veut PAS d'une table. Le ci-dessus est la réponse à SA QUESTION!!!

OriginalL'auteur SamGoody