7.12 HTML Tables in Living Color
Up until now learning the basics of HTML for website publishing has quite literally been in black and white. However, with the most recent teachings from LinkedIn Learning, in Jen Kramer‘s videos on tables, she stresses the importance of using color for better readability. Not only will adding contrasting colors make any table easier to read, but it will also grab the attention of the reader to continue viewing your content. Adding colors can set the mood of your table, make your table look more professional, and make the table overall more organized than it would be without.
Now we know the importance of color to tables, but with millions of different colors in the world which ones will the HTML coding recognize? As a brand new coder, it can be hard to memorize all the colors that can be recognized. Luckily, I have found two incredible sources you can couple with your basic knowledge of tables in HTML. One is on what colors are recognized by HTML and the other is how you can use these colors to your advantage with different styles!
Choosing a Color
This resource comes from the mother of all HTML resources, w3schools.com. This site has everything you need to know about HTML coding, in a simple and easy-to-read guide. We’re going to focus on the page that is devoted solely to the colors recognized by HTML. Here you can browse through colors in real-time and look at the names and # that HTML will recognize them by! Here are some of my favorite color pairings for a professional-looking table:
As you can see each bold color has a corresponding lighter color below it to help with contrasting while also keeping the same color scheme. Choosing two colors like this is just one way to achieve this look, you can also use a color picker through this website (as seen on DarkGoldenRod above). By clicking on the Color Picker option on the color you want to use it will take you to a screen where it will give you the different code # for each varying intensity of the color selected! Check out the example below with the color Purple (#80080):
Choosing a Style
Now that you’ve picked your colors, what comes next? Well, what you do with the colors you’ve chosen is equally as important as how you chose them. The article titled Top 10 CSS Table Designs from author Rick Christie at SmashingMagazine.com, gives you 10 styles you can apply to your tables. Before getting into the designs the site gives you bare-bones HTML table code that you can copy and paste for easy table setup. Then they give you some basic tips on spacing, padding, and designing to help optimize your table for better readability. Next, they list 10 different styles that you can easily code into your HTML to get a classy-looking table. These include:
- Horizontal Minimalist
- Vertical Minimalist
- Box
- Horizontal Zebra
- Vertical Zebra Style
- One Column Emphasis
- Newspaper
- Rounded Corner
- Table Background
- Cell Background
For each table style, they give you tips on how to make it look its best and even some have bare-bones HTML for you to copy and paste which is always a helpful and time-saving feature. Overall, this resource can help you fine-tune your tables quickly and with any, you support you may need from their helpful tips!
Now that you’ve found the perfect color scheme and style for your table, you can go and start coding! Hopefully, these resources are ones you can refer back to over and over until you become more comfortable with HTML Tables. Which resource do you see yourself using most going forward?
Note: This chapter is a revised version of a blog post titled, “HTML Tables in Living Color,”on Journey to the Center of the Web.
