Tables in CSS

Like lists, tables are styled using generic properties as well as properties designed specifically for styling the features of a table.

1. Styling Tables with Generic Properties

All the properties used for specifying fonts, text styling, text spacing, text alignment, box dimensions, border, padding, and margin can be used on table header and data cells and their content to perform the same functions they are used for with other elements and contents. Figures 17.16 through 17.18 show how some of these properties are used with a table.

In the example, the body{} rule specifies the font, color, and size to use for all text in the document. The table{} rule says to put space of 0.5 em between table and the edges of the window. The td, th{} rule specifies 0.4 em space between the content of the table cells and their borders, and makes the borders solid and black. The th{} rule makes the headers all­caps, spaces them a little to make them more distinguishable, aligns them left, and makes the bottom edges of the borders thicker than those of the data cells to visually separate the headers from the data cells. The tr.dkfrey{} rule specifies a background color for the headers, and the tr.grey{} rule specifies background color for <tr> elements of class=“grey” to create alternating and contrasting rows for easier reading.

2. Styling with Table-Specific Properties

The main properties designed specially for styling tables are border- collapse, border-spacing, caption-side, empty-cells, and table-layout.

2.1. border-collapse

The border-collapse property is used to specify whether the borders of adjacent table cells should be separated or combined into one. It is inherited and the values it takes are separate (which is the default) and collapse. Figure 17.19 shows the output of Figure 17.17 after the border- collapse: collapse; declaration has been added to the table{} rule, so that it looks like this: table { margin: 0.5em; border-collapse: collapse; }. Notice that the borders of the cells are now represented with single lines.

2.2. border-spacing

The border-spacing property allows you to specify the space between table cells when the value of the border-collapse property is “collapse.” It is inherited and the value it allows is the length value (e.g., px and em). When a single value is specified, it is used for both horizontal and vertical borders. When two values are specified, the first is used for horizontal spacing (which is the space between the cells of adjacent columns) and the second is used for vertical spacing (which is the space between the cells of adjacent rows). Figure 17.20 shows the result of the code in Figure 17.17 after the borderspacing: 5px 20px; declaration is added to the table {} rule so that it looks like this: table{ margin: 0.5em; border-spacing: 5px 20px; }. It says to make horizontal spacing 5px and vertical 20px.

2.3. empty-cells

The empty-cells property is used to specify how the borders and backgrounds of cells that have no visible content should be rendered. It is inherited and the values it takes are show (which displays the borders of empty cells and is the default) and hide (which makes the borders of empty cells invisible). Figures 17.21 and 17.22 show how the property is used and the effects.

2.4 table-layout

The table-layout property is used to specify how the browser determines the width of the cells of a table. It is non-inherited and the values it takes are auto (which is the default) and fixed. When value is auto, the width of cells depends on their content. When it is fixed, the width of cells is fixed and the same for all cells. The fixed method is supposed to make tables render faster than the auto. Figure 17.23 shows how the property is used and Figure 17.24 the result. Notice the differences in the widths of the cells and how content is wrapped in the fixed layout when it is longer than the width.

3. Converting Other Elements to Table Elements

Like with list and ruby elements, CSS allows you to make other elements behave like table elements by using the appropriate values with the display property. However, using these values effectively typically requires advanced CSS knowledge. Table 17.2 lists them and Figures 17.25 and 17.26 show how they are used in principle and the effect. Refer to Chapter 4 for table elements.

In the example, normal <div> and <span> elements are converted to table elements. The ,table{} rule makes the <div> element of class=“table” a <table> element; the ,head{} rule makes the <div> element of class=“head” a <tr> element and styles the content and background; the . row{} rule makes the <div> element of class=“row” a <tr> element; and the cell{} rule makes the <div> element of class=“cell” a <td> element.

4. Guidelines for Designing Effective Tables

A table should be easy to understand and scan, and this goal is achieved through effective formatting and styling, which can be done using both generic and table-specific CSS properties. The following are some guidelines.

  • Make table aesthetically pleasing to make it easy to read. This can be achieved through making a table as simple as possible and using ample space, such as ample padding.
  • Aid comprehension of data: This can be done through using meaningful caption and headings and avoiding abbreviations or acronyms. If abbreviations or acronyms are used, one or two sentences of explanation should be provided, typically as footnotes.
  • Structure data to match table’s purpose: For example, if the purpose is to compare the quantity of things produced by different sources (e.g., countries), it is better to organize data by quantity, such as from smallest to largest, or vice versa, than alphabetically. On the other hand, if the purpose is to communicate changes in quantity over time, then it is better to organize data based on time than on quantity.
  • Include only important data in order to avoid a cluttered table that has everything but is difficult to read and understand. For example, only totals might be included instead of also including all the components that make up the totals.
  • Make use of visual hierarchy to communicate levels of importance to facilitate scanning. This can be done using font style, font size, font color, and font weight. For example, headings should be in larger font size and bolder weight and data that needs to be emphasized can be made bold or given a different color from the rest of the data.
  • Round data to integers, unless presenting them in decimal points is important to their understanding. This is because rounded numbers are usually easier to compare. Where decimal numbers are used, it is generally recommended that no more than one decimal place is used, because the more there are, the harder it is to determine which values are lower or higher.
  • Perform necessary calculations for the user, because it is hard to hold the result of one calculation in memory while doing another calculation for comparison. For example, if reference is made to the sum of the data in a row or column, it is helpful to provide an additional row or column for presenting it.
  • Ensure consistency, both in appearance and in communicating data meaning. The way specific messages are communicated should be consistent. For example, if a color is used to indicate values that are above a specific level, it should be used for the same purpose throughout the table and, also, no other color should be used for the same purpose.
  • Ensure there is enough contrast between foreground and background to aid legibility.
  • Group similar data, where applicable, to facilitate the scanning and comparison of data. This can usually be done using background color.
  • Make use of gridlines to structure and separate data for easier comprehension. This can be done through the use of different line thicknesses and/or shades of colors. For example, the lines enclosing a row that contains totals might be made bolder.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *