HTML Tables

An HTML table consists of rows and columns that can be used to present data in an organized format. The table consists of a <table> tag (table tag) that contains one or more <tr> tags (row tags), and each row contains one or more <td> tags (column tags) that contain the actual data. Here is an example of creating a table in HTML:

<table><tr><th>Name</th><th> Address</th><th> Phone</th></tr><tr><td> Jukka Virtanen</td><td> Street 1, 00100 Helsinki</td><td> 010 123 4567</td></tr><tr><td> Maija Meikäläinen</td><td> Katu 2, 00100 Helsinki</td><td> 010 234 5678</td></tr></table>

In this example, the table contains three columns, which are "Name", "Address", and "Phone". The first row is the header row of the table, and it contains <th> tags (header tags) used to present the header. The following rows are the data rows of the table, and they contain <td> tags (content tags) that present the data.

thead, tbody and friends

There are also other combinations of tags that can be used to create a table, such as <thead>, <tbody>, <tfoot>, and <caption> tags. These are generally used to define the structure of the table and add a header and a subheader. Here is an example using the <thead> tag:

<table><thead><tr><th>Name</th><th> Address</th><th> Phone</th></tr></thead><tbody><tr><td> Jukka Virtanen</td><td> Street 1, 00100 Helsinki</td><td> 010 123 4567</td></tr><tr><td> Maija Meikäläinen</td><td> Katu 2, 00100 Helsinki</td><td> 010 234 5678</td></tr></tbody></table>

In this example, the <thead> tag contains the header row and the <tbody> tag contains the data rows. This structure helps the reader of the page (especially screen readers) to better understand the structure of the table.

Styling the table with CSS

The formatting of the table can also be adjusted with CSS. We will familiarize ourselves with CSS in the next section, but here is a small sneak peek.

You can use CSS for example to draw table borders, to define background colors and text colors for cells, to change the indentation of cells, etc. Below is an example of formatting a table with CSS:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
  
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  
  th {
    background-color: #f2f2f2;
  }
  
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style><table><thead><tr><th>Name</th><th> Address</th><th> Phone</th></tr></thead><tbody><tr><td> Jukka Virtanen</td><td> Street 1, 00100 Helsinki</td><td> 010 123 4567</td></tr><tr><td> Maija Meikäläinen</td><td> Katu 2, 00100 Helsinki</td><td> 010 234 5678</td></tr><tr><td> Liisa Virtanen</td><td> Street 3, 00100 Helsinki</td><td> 010 345 6789</td></tr></tbody></table>

In this example, CSS rules are used to determine the appearance of the table.

• border-collapse: the collapse rule removes unnecessary gaps between cells in the table
• width: 100% - rule determines the width of the table
• max-width: 800px - rule restricts the maximum value of the width of the table.
• th, td rule defines the appearance of both header and data cells.
• padding: 8px rule sets the size of content indentations
• text-align: left rule defines left alignment of cell text
• border-bottom: 1px solid #ddd - this rule defines the color of the bottom border
• background-color: #f2f2f2 - rule defines the background color of the header cell.
• The tr:nth-child(even) rule defines the background color of even rows.

Practice