Tables

You must have seen many websites on the Internet displaying information like scores, names, stock data and etc. in the form of tables. Tables are a very neat and readable way of presenting data to a website’s user.

In this part of the course, we will discover how it is possible for us to display tabular data using HTML elements.

Create a Table

HTML has an element called <table> which includes the rows and columns of data that you want to show.

<table>

</table>

 

Table Rows

Inside of an HTML table tag, you need to add rows, columns and the cell data one by one.

The first step in entering data into the table is to add rows using the table row element: <tr>. Each <tr> element represents one row of data, therefore the following example shows a table with two rows:

<table>
  <tr>
  </tr>
  <tr>
  </tr>
</table>

 

Table Data

Only adding rows isn’t enough and our table needs data as well. To add data we use the table data element: <td>.

The following example shows a table with one row that has two points of data (2000 and 2001).

<table>
  <tr>
    <td>2000</td>
    <td>20001</td>
  </tr>
</table>

 

When this is displayed in a browser, you’ll see a table with one row and two columns.

Table Headings

In every table, there are headings for the data that is shown in rows. These heading ususally describe what the data represents.

To add titles to rows and columns, you can use the table heading element: <th>.

The table heading element is used just like a table data element, except with a relevant title. Just like table data, a table heading must be placed within a table row.

<table>
  <tr>
    <th></th>
    <th scope=“col”>Fall Semester</th>
    <th scope=“col”>Spring Semester</th>
  </tr>
  <tr>
    <th scope=“row”>GPA</th>
    <td>3.9</td>
    <td>4</td>
  </tr>
</table>

 

In the above example, first a new row was added to hold the three headings: a blank heading, a Fall Semester heading, and a Spring Semester heading. The blank heading creates the extra table cell necessary to align the table headings correctly over the data they correspond to.

In the second row, one table heading was added as a row title: GPA.

Note, also, the use of the scope attribute, which can take one of two values:

  1. row – this value makes it clear that the heading is for a row.
  2. col – this value makes it clear that the heading is for a column.

HTML code for tables may look a little strange at first, but analyzing it piece by piece helps make the code more understandable. Just remember that tables are built row by row in HTML and you need to keep that in mind when trying to align your rows and columns and placing the appropriate headings.

Table Borders

So far, the tables you’ve created have been a little difficult to read because they have no borders.

In older versions of HTML, the  border attribute of table element could be used to set borders for the table. It accepts any integer number.

<table border=“1”>
  <tr>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

 

The code in the example above is considered deprecated, so please don’t use it. Although it would still be interpreted correctly by browsers, it’s better to use CSS instead for these purposes.

table, td {
  border: 1px solid black;
}

 

If you are not familiar with CSS, don’t stress out! After finishing this course you will be able to start learning that too!

Spanning Columns

What if the table contains data that spans multiple columns?

Data can span columns using the colspan attribute. The attributes accepts an integer (greater than or equal to 1) to denote the number of columns it spans across.

<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td colspan=“2”>Out of Town</td>
    <td>Back in Town</td>
  </tr>
</table>

 

In the example above, the data Out of Town spans the Monday and Tuesday table headings using the value 2 (two columns). The data Back in Town appear only under the Wednesday heading.

Spanning Rows

Data can also span multiple rows using the rowspan attribute.

The rowspan attribute is used for data that spans multiple rows (perhaps an event goes on for multiple hours on a certain day). It accepts an integer (greater than or equal to 1) to denote the number of rows it spans across.

<table>
  <tr> <!– Row 1 –>
    <th></th>
    <th>Saturday</th>
    <th>Sunday</th>
  </tr>
  <tr> <!– Row 2 –>
    <th>Morning</th>
    <td rowspan=“2”>Work</td>
    <td rowspan=“3”>Relax</td>
  </tr>
  <tr> <!– Row 3 –>
    <th>Afternoon</th>
  </tr>
  <tr> <!– Row 4 –>
    <th>Evening</th>
    <td>Dinner</td>
  </tr>
</table>

 

In the example above, there are four rows:

  1. The first row contains an empty cell and the two column headings.
  2. The second row contains the Morning row heading, along with Work, which spans two rows under the Saturday column. The “Relax” entry spans three rows under the Sunday column.
  3. The third row only contains the Afternoon row heading.
  4. The fourth row only contains the Dinnerentry, since “Relax” spans into the cell next to it.

If you’d like to see how the browser interprets the code above, feel free to copy and paste it into the code editor to understand it a little better.

Table Body

Over time, a table can grow to contain a lot of data and become very long. In that case it is possible to divide table into different sections using <tbody> element.

Other than the table headings, <tbody> element contains all the other table’s data.

<table>
  <tbody>
    <tr>
      <th></th>
      <th>2000</th>
      <th>2001</th>
    </tr>
    <tr>
      <th>Morning</th>
      <td rowspan=“2”>Work</td>
      <td rowspan=“3”>Relax</td>
    </tr>
    <tr>
    <th>Afternoon</th>
    </tr>
    <tr>
      <th>Evening</th>
      <td>Dinner</td>
    </tr>
  </tbody>
</table>

 

In the example above, all of the table data is contained within a table body element. Note, however, that the headings were also kept in the table’s body.

Table Head

The table heading can also be sectioned off using <thead> element. Look at the eample below to understand how the <thead> and <tbody> elements work alongside each other.

<table>
  <thead>
    <tr>
      <th></th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Morning</th>
      <td rowspan=“2”>Work</td>
      <td rowspan=“3”>Relax</td>
    </tr>
    <tr>
    <th>Afternoon</th>
    </tr>
    <tr>
      <th>Evening</th>
      <td>Dinner</td>
    </tr>
  </tbody>
</table>

 

Note that the table’s head still requires a row in order to contain the table headings.

Table Footer

Another sectioning element that can be defined inside of a table is <tfoot> element

<table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$10M</td>
      <td>$7.5M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$12M</td>
      <td>$5M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$22M</td>
      <td>$12.5M</td>
    </tr>
  </tfoot>
</table>

 

In the example above, the footer contains the totals of the data in the table. Footers are often used to contain sums, differences, and other data results.

Styling with CSS

By default tables have no specific style and are raw like any other HTML element.

You can use CSS to style tables. Specifically, you can style the various aspects mentioned above.

table, th, td {
  border: 1px solid black;
  font-family: Arial, sans-serif;
  text-align: center;
}

 

The code in the example above demonstrates just some of the various table aspects you can style using CSS properties.

 

Review

Well done! In this lesson, you learned how to create a table, add data to it, and section the table into smaller parts that make it easier to read.

Let’s review what you’ve learned so far:

  1. The <table> element creates a table.
  2. The <tr> element adds rows to a table.
  3. To add data to a row, you can use the <td> element.
  4. Table headings clarify the meaning of data. Headings are added with the <th>element.
  5. Table data can span columns using the colspan attribute.
  6. Table data can span rows using the rowspan attribute.
  7. Tables can be split into three main sections: a head, a body, and a footer.
  8. A table’s head is created with the <thead> element.
  9. A table’s body is created with the <tbody> element.
  10. A table’s footer is created with the <tfoot> element.
  11. All the CSS properties you learned about in this course can be applied to tables and their data.