# Tables

tag	description
<table>	table
<caption>	caption
<colgroup>	column group
<col/>	column
<thead>	table head
<tbody>	table body
<tfoot>	table foot
<tr>	table row
<th>	header cell (table header)
<td>	data cell (table data)

# Overview

# <table>

The tags <table> and </table> surround all other table elements
Block level element

REMARKS

Tables allow us to structure and display information (text/images...) in a proper way
The layout of table elements is done with CSS

WARNING

Use tables only semantically, i.e. only when the structure of the table clarifies the content. Do NOT use tables to layout web pages, NEVER use tables to position text/images!

# <caption>

The tags <caption> and </caption> add a visible caption that describes the content of the table
If needed, insert the tag immediately after the tag <table>

# Column <col/>

The tag <col/> is used to add a non-visible element that defines a column for styling
Generally found within a <colgroup> element
Empty tag

# Column group <colgroup>

The tags <colgroup> and </colgroup> are used to add a non-visible element that groups a number of columns (<col/>) for accessibility and styling
<colgroup> is written after <caption> (if present) and before the first <tr>

# Table head <thead>

The tags <thead> and </thead> are used to group the table rows that define the header of the table
Generally used together with <tbody> and <tfoot>

# Table body <tbody>

The tags <tbody> and </tbody> are used to group the table rows with the main data
Generally used together with <thead> and <tfoot>

# Table foot <tfoot>

The tags <tfoot> and </tfoot> are used to group the table rows that define the footer of the table
Generally used together with <thead> and <tbody>

# Table row <tr>

The tags <tr> and </tr> define a row in a table

# Header cell <th> (table header)

The tags <th> and </th> define a header cell in a table

# Data cell <td> (table data)

The tags <td> and </td> define a normal data cell in a table

# Optional attributes for data and header cells

tag	required/optional	description
colspan	optional	specifies the number of columns a cell should span
rowspan	optional	specifies the number of columns a cell should span

# Examples

# Example 1: basic table

A basic table consists of table rows and data cells
In each cell, you can insert content (texts, images, lists, ...)
By default, each column is as wide as the widest text/content in the column
By default, each row is as tall as the tallest text/content in the row

    
<h1>Table</h1>

<table>
  <tr>
    <td>Cola</td>
    <td>€1,85</td>
  </tr>
  <tr>
    <td>Lemonade</td>
    <td>€1,8</td>
  </tr>
  <tr>
    <td>Water</td>
    <td>€1,6</td>
  </tr>
  <tr>
    <td>Crisps 
      <ul>
        <li>Salted</li>
        <li>Ketchup</li>
      </ul>
    </td>
    <td>€1</td>
  </tr>
</table>

    
table,
td,
th {
    border: 1px solid #ccc;
}

REMARKS

You need CSS to add borders
- In this example, the table and all (header and data) cells in the table will have a light grey edge of 1px
- For now, you only have to be able to "understand" the CSS code, you don't have to write it yourself
Borders do not coincide, unless you program that in CSS!

# Example 2: basic table with header cells

A basic table helps to inform the surfer, but the user experience can be augmented by adding header cells
- "Tables without structural markup to differentiate and properly link between header and data cells, create accessibility barriers." (Web Accessibilty Tutorials)

    
<h1>Table</h1>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Cola</td>
    <td>€1,85</td>
  </tr>
  <tr>
    <td>Lemonade</td>
    <td>€1,8</td>
  </tr>
  <tr>
    <td>Water</td>
    <td>€1,6</td>
  </tr>
  <tr>
    <td>Crisps 
      <ul>
        <li>Salted</li>
        <li>Ketchup</li>
      </ul>
    </td>
    <td>€1</td>
  </tr>
</table>

    
table,
td,
th {
    border: 1px solid #ccc;
}

# Example 3: basic table with header cells and caption

A basic table helps to inform the surfer, but the user experience can be augmented by adding a visual caption in web pages with al lot of different/complex tables
Without CSS, the caption is shown above the first row

    
<h1>Table</h1>

<table>
  <caption>Table 1: Price List</caption>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Cola</td>
    <td>€1,85</td>
  </tr>
  <tr>
    <td>Lemonade</td>
    <td>€1,8</td>
  </tr>
  <tr>
    <td>Water</td>
    <td>€1,6</td>
  </tr>
  <tr>
    <td>Crisps 
      <ul>
        <li>Salted</li>
        <li>Ketchup</li>
      </ul>
    </td>
    <td>€1</td>
  </tr>
</table>

    
table,
td,
th {
    border: 1px solid #ccc;
}

# Example 4: complex tables with merged cells

When encoding tables you describe all cells from top left to bottom right, row by row
Use the attributes colspan and/or rowspan to merge cells in <th> and/or <td> tags

    
<h1>Complex tables</h1>

<h2>Complex table with colspan to merge cells</h2>
<table>
  <tr>
    <th colspan="2">Drinks</th>
    <th colspan="2">Snacks</th>
  </tr>
  <tr>
    <td>Cola</td>
    <td>€1,85</td>
    <td>Crisps</td>
    <td>€1</td>
  </tr>
  <tr>
    <td>Lemonade</td>
    <td>€1,8</td>
    <td>Chocolate</td>
    <td>€1</td>
  </tr>
  <tr>
    <td>Water</td>
    <td>€1,6</td>
    <td>Apple</td>
    <td>€0,5</td>
  </tr>
</table>

<h2>Complex table with rowspan to merge cells</h2>
<table>
  <tr>
    <th rowspan="3">Drinks</th>
    <td>Cola</td>
    <td>€1,85</td>
  </tr>
  <tr>
    <td>Lemonade</td>
    <td>€1,8</td>
  </tr>
  <tr>
    <td>Water</td>
    <td>€1,6</td>
  </tr>
  <tr>
    <th rowspan="2">Snacks</th>
    <td>Crisps</td>
    <td>€1</td>
  </tr>
  <tr>
    <td>Chocolate</td>
    <td>€1</td>
  </tr>
</table>

    
table,
td,
th {
    border: 1px solid #ccc;
}

# Example 5: large tables

The larger the table, the more you need to structure the data in the table
Use <thead>, <tbody> and <tfoot> to group rows
Use CSS to style the different parts of the table in an horizontal way

REMARKS

Browsers can use these elements to enable scrolling of the table body independently of the table head and table foot
When printing a large table that spans multiple pages, these elements allow the table head and table foot to be printed at the top and bottom of each page

    
<h1>Large tables</h1>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Visitors</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>June</td>
      <td>722</td>
    </tr>
    <tr>
      <td>July</td>
      <td>1203</td>
    </tr>
    <tr>
      <td>August</td>
      <td>852</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>2777</td>
    </tr>
  </tfoot>
</table>

    
table,
td,
th {
  border: 1px solid #ccc;
}

thead {
  background-color:#FA6432;
  color: white;
}

tbody {
  background-color:#FEF0EB;
}

tfoot {
  background-color:#00283C;
  color:white;
}

# Example 6: styling vertically instead of horizontally

Tables are placed on the screen row by row
When you want to style tables column by column instead of row by row, you have to add additional tags
- Use <colgroup> and <col/> to group columns
Use CSS to style the different parts of the table in a vertical way

    
<h1>Styling vertically</h1>

<table>
  <caption>Outgoing travellers</caption>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Country</th>
      <th>Destination</th>
      <th>June</th>
      <th>July</th>
      <th>August</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2">France</th>
      <td>Paris</td>
      <td>150</td>
      <td>323</td>
      <td>401</td>
    </tr>
    <tr>
      <td>Lyon</td>
      <td>63</td>
      <td>198</td>
      <td>55</td>
    </tr>
    <tr>
      <th>Great Britain</th>
      <td>London</td>
      <td>33</td>
      <td>167</td>
      <td>239</td>
    </tr>
    <tr>
      <th rowspan="3">Germany</th>
      <td>Berlin</td>
      <td>352</td>
      <td>1044</td>
      <td>541</td>
    </tr>
    <tr>
      <td>Hamburg</td>
      <td>81</td>
      <td>325</td>
      <td>754</td>
    </tr>
    <tr>
      <td>Stuttgart</td>
      <td>7</td>
      <td>53</td>
      <td>69</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Europe</th>
      <td>Total</td>
      <td>686</td>
      <td>2110</td>
      <td>2059</td>
    </tr>
  </tfoot>
</table>

    
table,
td,
th {
    border: 1px solid #ccc;
    border-collapse: collapse;
}

colgroup {
    border: 3px solid #000;
}

col {
    width: 100px;
}

col:nth-child(odd) {
  background-color:gainsboro;
}

# Emmet

Once again, thanks to Emmet, you can encode tables very quickly
Try these Emmet instructions:
- table>tr>td
- table>(tr>td*3)*2
- table>caption+(tr>th+td)*4
- table>thead>tr>th*2^^tbody>tr>td*3^^tfoot>tr>td*2
- ...

# Tables

# Tags related to tables

# Overview

# <table>

# <caption>

# Column <col/>

# Column group <colgroup>

# Table head <thead>

# Table body <tbody>

# Table foot <tfoot>

# Table row <tr>

# Header cell <th> (table header)

# Data cell <td> (table data)

# Optional attributes for data and header cells

# Examples

# Example 1: basic table

# Example 2: basic table with header cells

# Example 3: basic table with header cells and caption

# Example 4: complex tables with merged cells

# Example 5: large tables

# Example 6: styling vertically instead of horizontally

# Emmet