HTML TABLES - STRUCTURING DATA IN HTML

HTML TABLES - STRUCTURING DATA IN HTML

HTML TABLES - STRUCTURING DATA IN HTML

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.

TOPICS

Before starting this module, you should already have covered the basics of HTML as this is very important to understand the tegs and semantics to be used. By the end of this section, you would have gained familiarity of html tables.

  1. Html table basics
  2. Html table 

HTML TABLE BASICS

This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.

WHAT IS A TABLE

A table is a structured set of data made up of rows and columns (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.

Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800:


It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.

HOW DOES A TABLE WORK?

The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. You can easily find and access data by intersecting the row and column with the desired data of your choice. Tables are so important that their structure is used in relational databases.

The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. Look at the table below for example and find a Jovian gas giant with 62 moons. You can find the answer by associating the relevant row and column headers.

 

TABLE STYLING

Styling is usually handled by css, in other elements in html and also when it comes to tables in html and so even though we are not meant to dwell on css concepts in this article, links to external resources will be given for reference to the styling for tables.

Take a look at this example on github “https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html” 

For tables to be effective on the web, you need to provide some styling information with CSS, as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our Styling tables article after you've finished here.

WHEN SHOULD YOU NOT USE HTML

HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at Page Layouts in our Accessibility Learning Module. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.

LET US CREATE YOUR FIRST TABLE

We've talked table theory enough, so, let's dive into a practical example and build up a simple table.

  1. First of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine.
  2. The content of every table is enclosed by these two tags : <table></table>. Add these inside the body of your HTML.
  3. The smallest container inside a table is a table cell, which is created by a <td> element ('td' stands for 'table data'). Add the following inside your table tags:


<td>Hi, I'm your first cell.</td>

If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so:

<td>Hi, I'm your first cell.</td>

<td>I'm your second cell.</td>

<td>I'm your third cell.</td>

<td>I'm your fourth cell.</td>

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). Let's investigate this now.

Place the four cells you've already created inside <tr> tags, like so:


<tr>

  <td>Hi, I'm your first cell.</td>

  <td>I'm your second cell.</td>

  <td>I'm your third cell.</td>

  <td>I'm your fourth cell.</td>

</tr>

  1. Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <tr> element, with each cell contained in a <td>.

  

ADDING HEADERS WITH <th> ELEMENTS

Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

 

  

The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.

WHY ARE HEADERS USEFUL?

We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.

Table headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screen readers are then able to read out a whole row or column of data at once, which is pretty useful.

Note: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.

PROVIDING COMMON STYLING TO COLUMNS

Styling without <col>

There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <col> and <colgroup> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td> or <th> in the column, or use a complex selector such as :nth-child.

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>

 

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet).

STYLING WITH <COL>

Instead of doing this, we can specify the information once, on a <col> element. <col> elements are specified inside a <colgroup> container just below the opening <table> tag. We could create the same effect as we see above by specifying our table as follows:

<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

Having concluded all this, we have essentially covered the basics of HTML tables. In the next article, For more advanced html table concepts advanced table features, here you will look at more concepts like how to make tables accessible for visually impaired people.

Want to see videos for visual understanding, check out our youtube channel

 

 

 

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow