MDU119 Blog 4

Blog 4

Under what circumstances should you use tables in web design? (How) Does this differ from how they have been used in the past?

Published 1/08/17

In HTML, the use of tables should only be used for rendering data belonging naturally in a grid format. As such a HTML table example is where the data used describes a number of objects having the same properties, entered in a form as long as each column and row contains similar content.

Tables are very important for displaying tubular data, with a purpose to make the data readable, scannable and easily comparable. Sometimes tables full of information can be boring, but cleverly designed tables can make it very attractive and increase readability.  HTML tables are great for the use of demonstrating data listings, catalogs, image galleries, products, and anything that is in the common format of block-style layout, creating these layouts with CSS, naturally splitting them into core sections with a header, body and footer.

 

https://www.wufoo.com/pricing/1/

This example from Shopify shows this table being an aesthetically pleasing table with colours, hierarchy, and enlargement when upon clicking the option. This table shows all the options and varieties which shows the data as easily readable, scannable, and comparable for the different options. This table using the traditional table tag to create the basic colour, format, emphasis and hierarchy, size, and font style, by linking CSS.

For the past several years, web design used tables as the only way to structure web page layouts, but CSS now makes their use unnecessary. The use of tables in a layout is unnecessary because they are less flexible than divs; being impossible with tables being rigid.

 

Lazarevic. N, (2010). Tables in Web Desig: Beautiful Examples and best Practices. Webexpedition18. Available, Online: https://webexpedition18.com/articles/tables-in-web-design-beautiful-examples-and-best-practices/

Hunt. B, (2007). Example HTML Table. Ben Hunt’s Web Design from Scratch. Available, Online: http://webdesignfromscratch.com/html-css/html-tables/

 

Commented on:

https://kasukaderp.wordpress.com/2017/08/06/tables-in-web-design/comment-page-1/#comment-3  [08/08/2017]

2 thoughts on “MDU119 Blog 4

  1. Table is an important element in designing website as it is used to present important information and you are right with how tables should not be used as layouts!

    Like

  2. This is a really good blog and I agree upon using the table for data organization. You also effectively stated many ways your example is using the table tag aesthetically which is a nice touch.

    Like

Leave a comment