Sunday 1 September 2013

Organizing Data with Tables - Part 1

When HTML was coming to life tables were used all over the place, and were the primary means by which websites were built. They were used for positioning content as well as building the overall layout of a page. Fortunately we have come a long way since then. Today tables are, and should be, used specifically for organizing data.
When dealing with large amounts of tabular data tables are the go to foundation for displaying this information. Using tables provides a quick and easy way to both read and digest information, giving users an overall understanding of the data.
Reserving tables for data, not page design, still has challenges. How a table should be built in HTML is largely dependent on the data and how it is to be displayed. Upon being marked up in HTML, tables need to be stylized with CSS to make the information more comprehensive and understandable to users.

Creating a Table

In general tables are made up of data within rows and columns. Depending on the table these rows and columns will correlate to one another accordingly. In HTML, there are a few different elements needed to make a table. At a minimum a table must consist of tabletr, and td elements. To take tables one step further they may include the th element as well. Getting all of these elements to work together builds a solid table.

Table

To initialize a table on a page the table element is used. Using the table element signifies that the data within these tags will be displayed in two or more dimensions. The table element is only an initializer and it must encompass a table row, along with table data.
  1. <table>
  2. ...
  3. </table>

Table Row

Once the table has been defined in HTML, table rows may be added using the tr element. A table can have numerous table rows, or tr elements. Depending on the amount of information the number of table rows can be substantially high. To add data into these table rows the table data, td, and table header, th, elements are used.
  1. <table>
  2. <tr>
  3. ...
  4. </tr>
  5. <tr>
  6. ...
  7. </tr>
  8. </table>

Table Data

The best way to add data to a table is via the table data, or td element. The table data element creates a cell, of which may include data. Listing multiple table data elements one after the other will create columns within a table row. When the contents of a cell is a heading for either a row or column it should be wrapped within the table header element, th, not the table data element, td.
  1. <table>
  2. <tr>
  3. <td>Date</td>
  4. <td>Opponent</td>
  5. <td>Location</td>
  6. <td>Time</td>
  7. </tr>
  8. <tr>
  9. <td>Monday, March 5th</td>
  10. <td>Indiana Pacers</td>
  11. <td>United Center, Chicago, IL</td>
  12. <td>7:00 PM</td>
  13. </tr>
  14. <tr>
  15. <td>Wednesday, March 7th</td>
  16. <td>Milwaukee Bucks</td>
  17. <td>Bradley Center, Milwaukee, WI</td>
  18. <td>7:00 PM</td>
  19. </tr>
  20. <tr>
  21. <td>Thursday, March 8th</td>
  22. <td>Orlando Magic</td>
  23. <td>United Center, Chicago, IL</td>
  24. <td>7:00 PM</td>
  25. </tr>
  26. <tr>
  27. <td>Saturday, March 10th</td>
  28. <td>Utah Jazz</td>
  29. <td>United Center, Chicago, IL</td>
  30. <td>7:00 PM</td>
  31. </tr>
  32. </table>

Table Data Demo

DateOpponentLocationTime
Monday, March 5thIndiana PacersUnited Center, Chicago, IL7:00 PM
Wednesday, March 7thMilwaukee BucksBradley Center, Milwaukee, WI7:00 PM
Thursday, March 8thOrlando MagicUnited Center, Chicago, IL7:00 PM
Saturday, March 10thUtah JazzUnited Center, Chicago, IL7:00 PM

Table Header

To designate a heading for a column or row of cells the table header element, th, should be used. The table heading element works just like that of the table data element in that it creates a cell for data. The value to using the table header element over the table data element is that the table header provides a semantic value to table, signifying the data within the cell as a heading. The two elements are comparable to that of a heading, h1, and paragraph, p. While a heading’s content could be placed within a paragraph tag it doesn’t make sense to do so. Using a heading tag specifically adds more value to the content and provides an easier way to stylize all headings. The exact same is true for headers within tables.
Table headers are available to use within both rows and columns. The table data will determine where the headers are placed. To help the headers in noting exactly what content they pertain to the scope attribute is available. The scopeattribute signifies whether a header applies to a row or column with the values rowcolrowgroup, and colgroup. The most commonly used values are row and col. The row value notes that every cell within the row relates directly to that header, and the col value notes that every cell within the column relates directly to that header.

The Headers Attribute

Very similar to the scope attribute is the headers attribute. By default the scope attribute may only be used on the th element. In the case that a cell, either a td or th, needs to be associated with a different header theheaders attribute comes into play. The value of the headers attribute on a td or th needs to match the id of the th that cell pertains to.
Additionally, depending on the browser, table headers may also appear bold and centered. Should these default styles not be the preferred styling they may be over written in CSS.
  1. <table>
  2. <tr>
  3. <th scope="col">Date</th>
  4. <th scope="col">Opponent</th>
  5. <th scope="col">Location</th>
  6. <th scope="col">Time</th>
  7. </tr>
  8. <tr>
  9. <td>Monday, March 5th</td>
  10. <td>Indiana Pacers</td>
  11. <td>United Center, Chicago, IL</td>
  12. <td>7:00 PM</td>
  13. </tr>
  14. <tr>
  15. <td>Wednesday, March 7th</td>
  16. <td>Milwaukee Bucks</td>
  17. <td>Bradley Center, Milwaukee, WI</td>
  18. <td>7:00 PM</td>
  19. </tr>
  20. <tr>
  21. <td>Thursday, March 8th</td>
  22. <td>Orlando Magic</td>
  23. <td>United Center, Chicago, IL</td>
  24. <td>7:00 PM</td>
  25. </tr>
  26. <tr>
  27. <td>Saturday, March 10th</td>
  28. <td>Utah Jazz</td>
  29. <td>United Center, Chicago, IL</td>
  30. <td>7:00 PM</td>
  31. </tr>
  32. </table>

Table Header Demo

DateOpponentLocationTime
Monday, March 5thIndiana PacersUnited Center, Chicago, IL7:00 PM
Wednesday, March 7thMilwaukee BucksBradley Center, Milwaukee, WI7:00 PM
Thursday, March 8thOrlando MagicUnited Center, Chicago, IL7:00 PM
Saturday, March 10thUtah JazzUnited Center, Chicago, IL7:00 PM

Combining Multiple Cells

There often comes a time when two or more cells will need to be combined into one without breaking the overarching row and column layout. Perhaps two cells next to each other contain the same data, or the cells need to be combined for stylization purposes. In this case we can use the colspan and rowspan attributes. These two attributes work on either the table data or table header elements.
The colspan attribute is used to span a cell across multiple columns within a table, where the rowspan attribute is used to span a cell across multiple rows. Each attribute accepts an integer value indicating the number of cells to span across, with 1 being the default value.
  1. <table>
  2. <tr>
  3. <th scope="col">Date</th>
  4. <th scope="col">Opponent</th>
  5. <th scope="col">Location</th>
  6. <th scope="col">Time</th>
  7. </tr>
  8. <tr>
  9. <td>Monday, March 5th</td>
  10. <td>Indiana Pacers</td>
  11. <td>United Center, Chicago, IL</td>
  12. <td rowspan="4">7:00 PM</td>
  13. </tr>
  14. <tr>
  15. <td>Wednesday, March 7th</td>
  16. <td colspan="2">Milwaukee Bucks, Bradley Center, Milwaukee, WI</td>
  17. </tr>
  18. <tr>
  19. <td>Thursday, March 8th</td>
  20. <td>Orlando Magic</td>
  21. <td rowspan="2">United Center, Chicago, IL</td>
  22. </tr>
  23. <tr>
  24. <td>Saturday, March 10th</td>
  25. <td>Utah Jazz</td>
  26. </tr>
  27. </table>

Combining Multiple Cells Demo

DateOpponentLocationTime
Monday, March 5thIndiana PacersUnited Center, Chicago, IL7:00 PM
Wednesday, March 7thMilwaukee Bucks, Bradley Center, Milwaukee, WI
Thursday, March 8thOrlando MagicUnited Center, Chicago, IL
Saturday, March 10thUtah Jazz

Table Structure

Knowing how to build a table and arrange data is extremely powerful, and a skill set necessary for every front-end developer. On top of building table rows and cells there are a few additional elements to help us organize data within a table. These elements include captiontheadtfoot, and tbody.

Table Caption

To provide a caption or title for a table the caption element is used. A caption will help users identify what the table pertains to and what they can expect within it. The caption element must come immediately after the opening tabletag. Its position is at the top of the table by default, however may be changed using CSS. Should a table fall within thefigure element, the figcaption element should be used in place of the caption element.
  1. <table>
  2. <caption>Chicago Bulls Schedule - Week of March 5th</caption>
  3. ...
  4. </table>

Table Caption Demo

Chicago Bulls Schedule - Week of March 5th
DateOpponentLocationTime
Monday, March 5thIndiana PacersUnited Center, Chicago, IL7:00 PM
Wednesday, March 7thMilwaukee BucksBradley Center, Milwaukee, WI7:00 PM
Thursday, March 8thOrlando MagicUnited Center, Chicago, IL7:00 PM
Saturday, March 10thUtah JazzUnited Center, Chicago, IL7:00 PM

Table Head, Body, & Foot

Tables can be broken up into multiple groups, including a header, footer, and body. The elements to help better organize a table are thead for a table header, tbody for a table body, and tfoot for a table footer.
The table header element, thead, wraps the heading row, or rows, of a table denoting the heading. The table header should be placed at the top of a table, after any caption and before any tbody.
Following the table header may come either the table body or table footer elements. Originally the tfoot element had to come immediately after the thead, however HTML5 has provided leeway here. They may now come in any order so long as they are never the parent element of one another. Moving forward, the tbody element should contain the primary data within the table, while the tfoot contains data that outlines the contents of the table.
  1. TABLE HEAD, BODY, & FOOT<table>
  2. <caption>...</caption>
  3. <thead>
  4. ...
  5. </thead>
  6. <tbody>
  7. ...
  8. </tbody>
  9. <tfoot>
  10. ...
  11. </tfoot>
  12. </table>

Table Borders

One design component used to help make tables more comprehensible are borders. Borders around a table, rows, or individual cells can make a large impact when trying to interpret data and quickly scan for information. When stylizing table borders with CSS there are two properties that will quickly come in hand, they are the border-collapse andborder-spacing properties.