How to Master Styling HTML Tables
TLDR: This article reviews all of the common HTML Table elements used for creating client UI layouts. While this is not a common way to create layouts, it is still used in email, point-of-sales and warehouse clients so it is useful to be familiar with.
Web development tech is constantly advancing to newer, and quicker-to-develop tools. Styling for layouts and responsive UI has come a long way to our current tools of CSS frameworks and lower-level CSS Grid and Flexbox. While new projects can leverage these tools, older systems still rely on tech and tools from the 1990s. For layouts, this means heavy use of HTML tables to style entire UIs. Tables are uncommon for new developers, so let us walk through HTML table elements and how to approach flexible styles.
Why Should Use HTML Table Layouts?
The short answer is you should not use HTML table elements for layouts. This technology is not flexible or responsive and uses verbose HTML element syntax. Along with verbose syntax, the systems that require HTML Tables often do not allow the use of stylesheets, so your HTML may quickly become bloated with inline styling.
What kind of tech only supports HTML Table layouts? One of the most common ones is email clients. If you want to send out coupons, new product announcements, newsletters, or other items, you will need to leverage HTML tables. Some other uses include packing slips and other warehouse-related printing items. If you are curious whether your client (browser, email, other) supports certain HTML tags or CSS properties you can check out the website Can I use to ensure your users get what you expect.
HTML tables use a mixture of the <table>, <thead>, <tbody>, <tr>, <th> and <td> elements:
Not all of these elements are required for building HTML tables, though the correct combination will improve SEO and accessibility for users. Though tables are simple, using their elements correctly and adding in proper styling is difficult so we will walk through each tag in the following section.
What is the <table> Element?
The <table> element is a mix of semantics and functionality used for structuring information in a two-dimensional way. By using <table> in your HTML, you are informing the client of what elements and behavior it can expect. Adding this tag is similar to the first steps of setting an <div> element’s display attribute to grid or flex for Flexbox and CSS Grid.
One key style attribute that is not commonly used today with other HTML elements is border-collapse. This attribute is useful for table elements as it removes the white space between table child elements’ borders, and the overall table element itself:
The default value for this style is none, which allows the whitespace between table and data elements to exist, but you will want to use border-collapse: collapse to remove this white space. Setting the value to collapse will collapse the table element’s border into the cells’ borders, rendering a more traditional table design. If you still want a table border, you can add a border by wrapping the <table> in a <div> element with its own border.
Along with border-collapse, the most useful styling attribute for table elements is width. Setting width allows you to control the width of the child <tr> elements and makes the <table> element responsive to the rest of your UI. Beyond these styles, you should leave the rest of your UI customizations to the <table> child elements.
What are the <thead> and <tbody> Elements?
These two tags offer the least visible functionality of all HTML Table tags. These tags are what is referred to as semantic HTML. Semantic HTML adds explicit meaning to the HTML elements in your UIs so developers and screen readers know exactly what data is in a container element or a data element.
The <thead> and <tbody> tags are semantic HTML tags that separate the contents of a table. With <thead> you can only have <tr> and <th> elements, which we will discuss more later. Only header elements can be included within <thead>. This allows visually impaired users to understand the meaning of the table without having to have all the data read off.
Where the <thead> element contains all the high-level fields of a table, the <tbody> contains the data. This wrapper only holds <tr> and <td> elements which will store the data of the table. Neither of these elements accepts styling. Using these two tags is not required as the base functionality of the table will not change. However, using these elements improves accessibility for all users and will improve SEO if that is part of your system.
What is the <tr> Element?
The <tr> element structures the rows of a table. Its children elements can be <td> or <th> elements depending on what the row displays. You cannot control the width of the child elements from the <tr> element, but you can set the table row’s overall width compared to its parent table using the width attribute.
There is a deprecated align attribute for setting the position of the child cell’s content, but best practices would be to include this as a text-align value in the stylesheets, or the inline style attribute. You can also set background-color and text as element attributes, but again, it is most clear to assign these in the style attribute or through targeted stylesheets.
Our main goal of using <tr> elements is to give the data structure. You can target certain style attributes like font-color, font-weight, background-color, and text-align within <tr> elements, but most other styles will be applied at a granular level of <td> or <th>. It is possible to use the border style attribute to add borders to our entire row, but this is equivalent to drawing a box around all elements. The most common use of a border on a <tr> element is to add a bottom border to important or header rows.
What are the <td> and <th> Elements?
The <td> and <th> elements are where most of the table’s styling occurs. These two elements are very similar in that they are used to hold and display data, with the main difference being that <th> elements are more specific in use and have extra default styling.
We talked earlier about semantic HTML tags, and <th> elements are semantic and functional while <td> elements are solely functional. As previously stated, the <thead> tags can only contain <th> elements as these elements are reserved for displaying header data. The default styling of <th> elements includes changing all the text font-weight to a value of bold.
The <td> tag is more general purpose than <th> and does not inherit any default styles. This tag is used for all other data in an HTML Table, and though it is not the best practice, can be used as column header cells if <thead> is not included in your table.
A lot of styling and layout occurs within these two tags. Sometimes you may want to have your data elements span multiple columns or rows. You can accomplish this with the colspan and rowspan attributes. As the attribute names imply, they explicitly set how many rows or columns a cell element will take up. The default value for these attributes is 1.
If you want a cell to take up two columns, you would set colspan to 2. A shortcut for setting column spans or column rows to take up all elements until the end of the column or row is to use a value of 0.
The other stylings that are useful for <td> and <th> elements are border, text-align, color, background-color, and font-weight. These can be set on the <tr> element if you have a general styling for your row, but can also be set at an element level if you need more granular control.
Other HTML Table Elements
Our last two HTML Table elements to examine are the <caption> and <colgroup> elements. While they are not common, this guide will cover them to be exhaustive.
The <caption> element creates a caption for the table. It must be the very first child element of the <table> element. You can add any styles to this item you would for text elements. Along with text styling, you can position this element using caption-side and text-align CSS attributes.
The <colgroup> element is a way to group columns for style targeting. It is a somewhat clumsy way to mass-assign styles to columns within your table, and the same effect can be reached by using CSS classes, though it can be useful if you are limited to inline styles.
Final Thoughts
Today, nobody is choosing to use HTML Tables for UI layouts. HTML Tables are not fast to develop, do not support device responsive styling, and are often more easily replicated with <div> elements and Flexbox of CSS Grid. However, with older systems HTML Tables will become a requirement. I hope that this guide is helpful.
