7.6 HTML Tables: A Comparison of a Paid and a Free Tutorial
LinkedIn Learning is a fantastic resource for anyone looking to enhance their knowledge of HTML and CSS. However, there are some decent free resources as well. I was curious to see if one of these resources would provide the same quality of content. So, throughout this chapter, I’m going to compare and contrast a LinkedIn Learning course to a comparable free tutorial I found online. The LinkedIn Learning course I’ll be discussing is, “HTML: Tables,” hosted by web design and development instructor Jen Kramer. The tutorial I’ll use for comparison is “Organizing Data with Tables,” presented by web designer and front-end developer Shay Howe.
About each tutorial
Released January 23, 2020, “HTML: Tables“ is categorized as a beginner’s course. The tutorial walks you through the HTML code needed to create a table, and it provides instructions on how to style tables using CSS. Additionally, course instructor Jen Kramer walks you through making tables responsive using a media query. Kramer has 20 years of experience teaching HTML tables. During her introduction, Kramer states, “by the end of the course, you’ll have a solid working knowledge of how to code a table with HTML, style it with CSS, and make it accessible for those with disabilities on all types of devices.”
The tutorial, “Organizing Data with Tables,” is lesson 11 of Shay Howe’s free online learning course, “Learn to Code HTML & CSS.” This course, like “HTML: Tables,” is geared towards beginners. The content follows a similar structure; you get an overview of the different HTML elements needed to create a table, then you learn how to style a table using CSS. What you don’t get with this tutorial is an explanation of how to make tables responsive. There is also no release date listed anywhere on the website. Howe references HTML5 only once in a paragraph discussing the table head, body, and foot, providing some indication that the tutorial relates to the current version of HTML.
Differences between the tutorials
In addition to the responsive media query, “HTML: Tables” offers another tool not explained in “Organizing Data with Tables.” This tool involves copying table data that has been organized in a plain text file into your HTML code. You can undoubtedly create an HTML table without using a plain text file; Kramer’s purpose was to simplify her follow-along example. My opinion of copying and pasting from a plain text file depends on the coding platform I’m using. With CodePen, it was easy to copy and paste table data then add the <td> tag afterward. Visual Studio Code makes the copy-and-paste method a little more tedious when the IntelliSense feature is enabled.
The placement of the table caption is another difference between the two tutorials. In “HTML: Tables,” Kramer explains that the caption element may be placed directly after the <table> tag or directly before the </table> tag. Either way, the caption still displays at the top of the table unless additional CSS styling is applied. In “Organizing Data with Tables,” Howe states, “the <caption> element must come immediately after the opening <table> tag.”
With regards to code placement, “Organizing Data with Tables” presents some information I found quite interesting. According to Howe, the table head, body, and foot elements can “occur in any order so long as they are never parent elements of one another.” Curious as to whether or not this works, I coded a very basic HTML table. If you look at the screenshot of my HTML file below, you’ll see that I entered information for the table foot first, followed by the head, then the body. I’m not sure why you would enter table information in this order but, it’s interesting that you can.
