Why div is better than table




















I've never heard someone say that it is wrong to use a "ul" tag for a list that does, in fact, come in a logical order, just because you wanted bullets and not sequence numbers. There are already tons of great answers here. But I wanted to add that table elements have rendering limitations that don't exist for div elements. Try and make a table that does virtual scrolling like: SlickGrid , DataTables , and others and you'll be sorely disappointed. It just doesn't work. Most All? There are other limitations as well.

Actually, most tags can. Up for grabs. Make the inline tags blocks, the blocks inline, the pre-formatted tags flow, the stationary ones float. Go crazy, if you like! It's possible. You may want to spin a yarn about how we should all use "semantic markup" blah blah blah , or believe with the Pythonistas that "There should be one--and preferably only one--obvious way to do it.

Given a free hand, he'll explore them all. That includes using the available flexibility to make substitutions. Some are wise, some will be proven otherwise. But trial, error, and experience is the only way to find that out. So the sufficient conditions for substitution are present.

I don't think it's overstepping to say that substitution is also necessary. At minimum, it's extremely convenient. Yet web pages and apps everywhere have menus, sections, and sidebars. HTML5 has caught up with, and added bespoke elements for, some previously-unaddressed use cases. It's a great update and correction to accommodate common, real-world use. Even so, there remain a lot of common idioms that don't have bespoke tags or semantic models.

Things like pages, footnotes, pull-quotes, comment streams, associated avatars, "likes," subheads, and subtitles that I and many others use every day. What are we to do? What we can. Repurpose "close but inexact" elements with classes and ids to stand in and support our work for the next five or ten or however many years until HTML6 or HTML7 catches up.

Indispensable, really. It makes Web content flex, and not be brittle. Going even further, "semantic markup" has irreducible limitations. That's true of any kind of rigorous structure you can imagine for content. Standard formats cannot encompass the entire wealth of human need, desire, and variety.

They will always will be "behind the curve" of what people are doing now. How they are innovating. Heck, HTML5 is still behind the curve on footnotes, subheads, and other printing innovations of the 17th century. It lacks features essential to many information workers and content creators.

So we improvise. Even more unchanging is that information doesn't abide by one set of rules. Sure, it starts as a table. But maybe you just want the summary--say the title for each row, as a list. Maybe it takes up too much space, and you'd like it as a space-saving inline list.

Maybe you have records you just want the title of, then if you click, you see the underlying details. Or you want items in a complex list or table to be grouped and categorized. Oh, now you want it transposed and categorized a different way.

Or the values plotted as a bar chart. These are things done every day in apps, spreadsheets, and data visualization. They are part and parcel of our information landscape, and what we want and need to do on the web.

Humans constantly reorganize the form and presentation of our data. It's fungible, with semantics depending on the circumstance and on choices users make interactively. I've worked on documents with at least a half-dozen different kinds of "emphasis. One kind of HTML emphasis? Excruciatingly reductionistic. But the ability to remap things, to redesignate and repurpose those structures? That's part and parcel of the Web's inclusiveness and its success.

Use cases matter. In content, semantics matter a great deal for SEO-awareness and usability. In these cases, using tables to present tabular data is in general the right thing to do. As others have noted, search engines will penalize you and you may even run afoul of usability laws if you are required by statute to conform to govt usability guidelines.

In a web application, developers may opt to create entirely separate views for SEO and usability purposes. Responsive design has led people to build views that can handle desktop and mobile layouts, and divs are better than tables in those use cases.

Take ecommerce sites, for example. Viewing a list of products in a browse or search result shows, in general, a list of products in tabular format, but those views may well be generated using divs which provide more generic and flexible layout and styling options rather than tables.

Amazon and eBay are good examples of this approach. Inspect a search result on either site and you will see a deeply nested set of divs. Sign up to join this community. The tag that best describes the content is the best tag.

The div tag is the fallback for when there is no better tag. You should use the most descriptive tag for what the content is. The tags you use have nothing to do with how the content looks and everything to do with what the content is. Since CSS has been the way to define the way the page looks. It needsa a different mindset, but once you understand how it is supposed to work, you can write much leaner, neater and more flexible code by avoiding layout tables.

These two tags are most commonly used to unify the layout of a website on different PCs. The Table tag was initially made to add and control tables in a website. This would ensure that data was available in a table layout, making it easier to be accessible by the client. It ensures that the layout or the placement of the content does not change.

This defines that a table is being created in the document. All of these tags are used to control the data and the format of the data inside the table.

Following the success of creating tags, designers then started using tables to place their data in a certain format and layout on a website.

Each data was placed in a select column or row in a website. This ensured that the layout of the data did not stray when the resolution or layout changed depending on the computer settings.

The users would also keep the table border to zero, to keep the border lines from showing up. The Div tag is not related to the layout and placement of content on a page, but rather the presentation and style application of it. The div tag groups certain elements on the page together and allows the user to format all of those elements with one same instruction.

Preferred Member from AU joined:May 27, posts votes: It's flawed as the reality is the utter opposite of your claim: the standards to which browsers adhere specify explicitly you get LESS control in tables, not more.

That's lack of control due to tables If it is indeed that flexible and allows more control, it should be capable Senior Member joined:Aug 29, posts votes: As always, there are some excellent answers to your question in this thread. And as always, they are displayed in a table. Senior Member from US joined:Apr 9, posts votes: If the relationship among elements works in two dimensions, that's a table. The present page contains 22 tables, nested up to 4 deep. One of those is a true table: the one I described above.

The other 21 are for layout. I'd click "like" if there were a button for that ; Oh wait that's also last decade :. Senior Member from US joined:Nov 29, posts votes: The only comment I'll offer is that tables render differently in time when the page loads. If that is acceptable, then go for it. If the data requires it, you need to wait and let it do it. That said, the web is so much faster these days that the above rendering aspect doesn't amount to a hill of beans. I like using tables for tabular data, ie, rows and columns Divs make sense in layout and fluid design I'm not all that convinced that html5 is all that great shakes at the moment, but can see some real potenital value Kendo I have a mobile site with content on the right side of a page in a table cell with multiple rows of content below its containing table row.

When a visitor comes to the site with a phone, I want that content moved to the bottom of the page and the navigation on top slide to the right, off screen, and replaced with a menu button.

When clicked, that menu button slides the navigation into view. How do I do that with a table? New User joined:Jan 8, posts:6 votes: 0. Tables is old-fashioned way of designing websites.

Tables should be use when you really need to present some information in tables. The css and all visual part of site should be in div blocks it's more comfortable. Preferred Member joined:June 10, posts: votes: 0. If you insist of making table, here's a solution to use divs as tables -. New User joined:May 6, posts votes: 0. Nice style Zivush, I've just try it in one of my projects, it's lookes very nice!



0コメント

  • 1000 / 1000