7.7 Make Your HTML Tables Stand Out

Have you ever wanted a cool, interactive table for your web page? Well, I found a resource that can help with that. An article written by Kari Redfield on “10 Tips For Creating Beautiful Website Tables” gives you tips on different table options specifically for your website. It’s important to know when to display a table as not all information is table-worthy; especially when it comes to viewing the information on a mobile device. You will want to make sure that the information in your table layout is easy to understand and makes sense.

Structuring Your Table

Knowing how to build a table and arrange data is extremely powerful; however, there are a few additional elements to help us organize the data and structure of a table. These elements are <caption>, <thead>, <tbody>, and <tfoot>. A caption will help users identify what the table pertains to and what data they can expect to find within it. The table head element wraps the heading row or rows of a table to indicate the head. Following the head element, comes the body and foot elements. The structure of the table you choose depends on the type and complexity of the information you’re presenting.

One of the most common places tables are found online is on a website’s pricing page. The example below shows a table created in an interactive grid format.

 

The author introduces a website builder widget platform called Duda that allows you to add content by copying and pasting a pre-existing table template using the editor, or uploading a CSV.

Table Responsiveness

Just like any other HTML element, tables should be responsive so they will look organized and visible on a mobile device to provide the viewer with a pleasant experience. Ways that responsive tables can behave are verticle scroll, squash, and collapse by columns or rows.

Conclusion

Tables can give your website a clean look as they’re used to provide efficient readability in displaying rows and columns. Web developers have been very creative when creating tables. The updated technology of HTML5 plays a major role in customizing any element on your site.

olinbjork

Note: This chapter is a revised version of a blog post titled Make Your HTML Tables Stand Out on My Web Development Experience.