Tables
Should you include Hypertext Markup Language (HTML) tables on your web page? HTML tables were once the foundation of webpage layout and design. However, the increasing importance of proper web semantics and its relation to accessibility and the evolution of Cascading Style Sheets (CSS) have made using tables for web page layouts an obsolete practice. HTML tables still have legitimate purposes, though, such as sharing complex numerical data.
When coded and styled correctly, tables quickly allow the reader to assimilate data not easily represented by text. The following chapters focus on web-based resources for creating and stylizing HTML tables. They discuss topics such as the purpose of tables, when to use and not use tables, creating tables from scratch versus using a template, using tables for emails, responsive tables, customizing tables with efficiency and color, and making tables accessible.
Before learning how to create and customize tables, it is necessary to know what purpose tables have in the world of the web. Chapter 7.1 “When to Use and Not Use HTML” and Chapter 7.2 “Basics of HTML Tables, and Why Not to Use Them,” briefly discuss tables used to show large amounts of data that is easy to read and understand.
To take full advantage of what HTML tables have to offer it is important to know when it is appropriate and not appropriate to use tables. Chapter 7.1 provides a list of a few examples of when to use a table to display different types of data. Chapter 7.3 “Tables: To Be or Not to Be” poses the question of whether you even need a table at all, arguing that if there is too much data for site visitors to read, you should consider using charts instead. Chapter 7.1 recommends avoiding using tables as a layout tool when designing web pages for reasons ranging from complex code, accessibility issues, and lack of table responsiveness. Chapter 7.4 “The Positives and Negatives Surrounding HTML Tables” also recommends avoiding using tables for layout purposes, emphasizing the difficulty in changing or updating information within the table.
Once you learn what tables are for, it is time to learn how to create one for yourself. Both Chapter 7.1 and Chapter 7.5 “Crafting HTML Tables,” explain the four essential elements of HTML tables and how these elements create the structure of a table, each providing an example. The former chapter displays the HTML coding for a specific table and the latter provides a visual comparison between edited and unedited tables that use the same data.
There are many resources available when learning to code HTML tables, both free and paid tutorials, but it doesn’t mean one is better than the other. Chapter 7.6 “HTML Tables: A Comparison of a Paid and a Free Tutorial,” compares a paid and free tutorial to see if there is a difference between the quality of content when learning to code HTML tables. It is best to study various resources.
Some resources provide tips and tricks that others do not mention. Chapter 7.7 “Make Your HTML Tables Stand Out,” provides additional elements to add to tables to help further organize data and add structure. If you’re not confident coding a table yourself, there are resources available where you can copy and paste HTML and CSS, then enter your data. Chapter 7.8 “Using Free Templates to Create Tables on HTML and CSS!,” explains how you can use CodePen, an online code editor, to copy and paste free HTML table templates and work with the design in an environment separate from your web page.
You may not know that emails use tables within their design, defying the rule learned in earlier chapters and creating an exception within the <table> rule. Chapter 7.9 “HTML Tables: What You Can Learn from My Email Disaster,” explains that emails do not adhere to the same standards expected for web pages. Emails need tables for there to be a consistent structure and finer control within the email application.
How users view tables varies depending on the device used. This can lead to poor user experience. Chapter 7.4 discusses that if a table is improperly formatted, readers will have trouble reading it on a mobile device, experiencing spillage of information over the sides or shrinkage of the table. There are some solutions to this problem. Chapter 7.10 “Getting Creative with Responsive Tables,” explains how you can use CSS and media queries to make the data easily readable across various devices or structure the table to hide columns or all data be on the left side of the table. Chapter 7.3 focuses on how to make the header row of the table responsive. If you want more ways to make tables responsive read Chapter 7.7 which provides a list of other methods to consider.
You might have noticed that an HTML table can look quite boring and at times it is difficult to read data within the table. There are solutions to help with these issues. Chapter 7.11 “How to Design an Efficient Table for Your Website,” list six tips to consider when styling your table to still convey data in the most efficient possible to readers. Chapter 7.12 “HTML Tables in Living Color,” discusses reasons why you should add color to your table, what to consider when choosing colors for a table that can improve readability and a list of ways to incorporate those colors into a table.
Creating visually appealing web content is important, but the true beauty of a web page lies in its ability to reach the broadest possible audience. Not everyone views tables or other web content the same way, as some require using assistive technology and it is important to make tables accessible for everyone. Chapter 7.13 “Making HTML Tables Accessible,” explains that it is the responsibility of an HTML table’s author to ensure that readers using assistive technologies can easily understand the presentation of table data using the scope attribute. Chapter 7.14 “Make Your HTML Tables More Accessible,” provides the dos and don’ts of adding content with table cells and simplifying tables to help reader software properly read a table. Chapter 7.15 “Tips to Make Accessible Tables,” discusses the importance of table captions and the importance of identifying row and column headers.
