Tables

HTML Tables

For many data it makes sence to diplay it in a table. In HTML there are tags available to force the browser to diplay the data as a table.

 

In the past tables also have been used to layout complete websites, because "div" and "span" elements (you will learn more about them later) and css was missing.


Nowadays tables in HTML should be used for data the can be displayed in rows and columns and makes semantically sence to show as a table.

What is a table?

A table is a possibility to structur 2 dimensional data in a easy way. It consists of rows, and columns.

You can imagine a table also as shelf, with many horizontal and vertical boxes.

To start a table, you can use the "<table>" tag, and for sure the indicate the end you use "</table>".

Rows in HTML tables

A new row can be started with the <tr> tag (table row). Each row can have multiple columns and is terminated with the </tr> tag.

Rows in a HTML table

In the tables rows you can add cells with the <td> (table data) tag. And between the <td></td> tags what you want to show in this cell.


The simples table in HTML would look like this:

<table>
   <tr>
      <td>my table</td>
   </tr>
</table>



Can you imagine how a table, with one column and two lines would be defined?

 

<table>
   <tr>
      <td>Cell 1 </td>
      <td>Cell 2 </td>
   </tr>
</table> 

And a table with two rows and one column?

<table>
   <tr>
      <td>Cell 1</td>
   </tr>
   <tr>
      <td>Cell 2</td>
   </tr>
</table>


Tables can be nested in many levels, the following exmplae will show a table with 2 columns and two rows:

<table>
   <tr>
      <td>Row 1 / Column 1</td>
      <td>Row 1 / Cloumn 2</td>
   </tr>
   <tr>
      <td>Row 2 / Column 1</td>
      <td>Row 2 / Column 2</td>
   </tr>
</table> 



Headlines in HTML tables

Instead the <td> tag you can also use th <th> tag. <th> means table header and is used  for the headline of table. The browser shows content inside the <th> tag in a different style compared to the <td tags.

Some times you want to connect two cells together, even this is possible with HTML.

Combine HTML table rows and columns

There are possibilities to connect table lines and columns. For both there is a tag attribute for rows the "rowspan" attribute and for columns the "colspan" attribute.

 

After adding these attributes our HTML document looks like this:

 

<table>
   <tr>
      <td colspan="2">Die erste Zelle über zwei Spalten</td>
   </tr>
   <tr>
      <td>Zeile 2 / Zelle 1</td>
      <td>Zeile 2 / Zelle 2</td>
   </tr>
 </table> 



What do you need to do in the first example to combine the cells of the first column? We can use the rowspan attribute for this use case:

 

<table>
   <tr>
      <td rowspan="2">Die erste Zelle über zwei Zeilen</td>
      <td>Zeile 1 / Zelle 2</td>
   </tr>
   <tr>
      <td>Zeile 2 / Zelle 2</td>
   </tr>
</table> 

There a more combinations possible und you can generate complex table structures.

As you have learned before, CSS is the toolset to style websites. Beside the semantic elements we have learned by now, you need elements to structure the content for styling. They have no special semantic meaning.

The tags for these elements are div and span. In the next chapter you will learn more about these elements and how to use them for your HTML website.

Navigation