Better UI Design: Proper Use of Tables. Tables have been part of HTML almost since HTML began. As the internet progressed and as people started doing more things online, designers started using tables to create multi-column website layouts. This was never the intention of those who created HTML standards, but it quickly caught on and table-based layouts became the norm online. When CSS became standard and table-based design was made obsolete, a lot of designers shunned them all together. Using tables in your websites, no matter what they were used for, became akin to using animated GIFs in some circles. The problem with that is that tables are a vital part of good UI design. The Purpose of Tables Tables were meant for displaying data. That purpose is still valid. Don’t Use Faux Tables! I don’t know how many websites I’ve seen that have created mock-ups of data tables using countless DIVs and CSS styles, rather than actual HTML tables. Of course, you will want to use CSS to style your tables, but that’ll be covered below.
Organizing Data with Tables - A Beginner's Guide to HTML. When HTML was coming to life tables were used all over the place, and were the primary means by which websites were built. They were used for positioning content as well as building the overall layout of a page. Fortunately we have come a long way since then. Today tables are, and should be, used specifically for organizing data. When dealing with large amounts of tabular data tables are the go to foundation for displaying this information. Using tables provides a quick and easy way to both read and digest information, giving users an overall understanding of the data.
Reserving tables for data, not page design, still has challenges. Creating a Table In general tables are made up of data within rows and columns. Table To initialize a table on a page the table element is used. <table> ... Table Row Once the table has been defined in HTML, table rows may be added using the tr element. <table> <tr> ... Table Data The best way to add data to a table is via the table data, or td element. Chrome — Google Developers Live. HTML5 Boilerplate: The web's most popular front-end template. HTML5 Document Embedding | Crocodoc. HTML5 Developer Conference | October 15 & 16, 2012 | San Francisco, CA. Seanhess/html5-drag-drop-anything. RDFa Core Initial Context. TodoMVC. Can I use... Support tables for HTML5, CSS3, etc.