Tables

Introduction

Row(s) of cells

A Table in html is constructed horizontally, by creating rows of data cells as follows:

<table>
  <tr>
   <td> Data cell 1 </td>
   <td> Data cell 2 </td>
  </tr>
 </table>

We can use CSS to add a table border and some padding as follows.

When we use CSS to add a border by default the table borders are separated border-collapse: separate;.

Example: border-collapse: separate

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

td { 
 padding: 5px;
}

<table>
  <tr>
   <td> Data cell 1 </td>
   <td> Data cell 2 </td>
  </tr>
 </table>

You can add more rows to your table by adding a new <tr> tag followed by your table cells and content, and closing the row using the </tr> tag:

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

td { 
 padding: 5px;
}

<table>
  <tr>   
   <td> Data cell 1 </td> 
   <td> Data cell 2 </td>
  </tr>
  <tr>
   <td> Data cell 3 </td>
   <td> Data cell 4 </td>
  </tr>
 </table>

Heading to a column

The tag <th> may be used instead of <td> if the cell is a header to a column of cells. For example:

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

th, td { 
 padding: 5px;
}

<table>
  <tr>
   <th> Mnemonic </th>
   <th> Expansion </th>
  </tr>
  <tr>
   <td> HTML </td>
   <td> Hyper Text <br> Markup Language </td>
  </tr>
 </table>

Alignment

You can align your content horizontally and vertically using CSS style attributes. For example:

<table border="1" style="width:250px; height:250px">
 <caption>An example to demonstrate alignment</caption>
  <tr style="vertical-align:top">
     <td>Top left </td>
     <td style="text-align:center">Top center </td>
     <td style="text-align:right">Top right </td>
  </tr>
  <tr style="vertical-align:middle">
     <td>Middle left </td>
     <td style="text-align:center">Middle center </td>
     <td style="text-align:right">Middle right </td>
  </tr>
  <tr style="vertical-align:bottom">
     <td >Bottom left </td>
     <td style="text-align:center">Bottom center </td>
     <td style="text-align:right">Bottom right </td>
  </tr>
 </table> 

Spanning rows and columns

You can add the attributes rowspan and colspan to the HTML tags <td> and <th to form data cells which span more than one row or column. For example:

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

th, td { 
  padding: 5px;
}

<table>
  <tr>
     <th>Exam</th>
     <th colspan="2">Coursework </th>
  </tr>
  <tr>
     <td rowspan="2"> 60%</td>
     <td>Tutorials</td>
     <td> 30%</td>
  </tr>
  <tr>
     <td> Coursework</td>
     <td> 10%</td>
  </tr>
 </table> 

Colouring table cells

You can add the attributes rowspan and colspan to the HTML tags <td> and <th to form data cells which span more than one row or column. For example:

th, td { 
   padding: 5px; 
}

th { 
   text-align: left; 
}

.a { 
   background-color: #FFFFD0; 
}

.b { 
   background-color: #FFD0FF; 
}

.c { 
   background-color: #D0FFFF; 
}

<table>
  <tr class="a">
   <th>Type</th> 
   <th>Percentage</th>
  </tr>
  <tr class="b">
   <td> Exam</td>
   <td> 60%</td>
  </tr>
  <tr class="c">
   <td> Coursework</td>
   <td> 40%</td>
  </tr>
 </table>  

Table to format text

You can also use tables to format text on Web pages: For example:

th, td { 
   padding: 10px; 
}

th { 
   text-align: left; 
}

<table>
    <tr>
       <th>Column 1</th>
       <th>Column 2</th>
    </tr>
    <tr>
       <td> This is my first column of text. I can write 
       as much as I want....
       </td>
       <td> This will be my second column. The text will
       be automatically formatted to fit in second columns...
       </td>
    </tr>
 </table> 

However, in a later lecture we will use CSS to create columns.

Grouping Table elements

While <th> and <tr> tags represents a single header and a row cell respectively in a table. You can use the <thead> tag to organize and group table headers (<th>) into a distinct section for better semantic structure, accessibility, and styling.
Using <thead>, <tbody> and <tfoot> tags allows you to apply styles specifically to areas of the table you want without affecting other elements.
Screen readers and other assistive technologies rely on semantic tags to understand the structure of the table.

• <thead>:Groups one or more rows (<tr>) of table header cells (<th>). It separates the header content from the table's body (<tbody>) and footer (<tfooter>). Unlike a single <th>, <thead> is used to organize multiple header rows as a distinct section.
• <tbody>:Groups the main table content (data rows). It is different from or <td> because <tbody> acts as a container for all rows (<tr>) of data cells (<td>), while <tr> and <td> define individual rows and cells.
• <tfoot>: Groups one or more rows (<tr>) of footer content, such as summary or totals. It is separate from the data in <tbody> and is always rendered after <thead> regardless of its placement in the code. Unlike <td> or <tr>, <tfoot> explicitly indicates that the content belongs to the table's footer.

    <table>
      <thead style="background-color: #fcf3e4; font-weight: bold;">
        <tr>
          <th>Product</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>£1</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>£0.50</td>
        </tr>
        <tr>
          <td>Orange</td>
          <td>£0.75</td>
        </tr>
      </tbody>
      <tfoot style="background-color: #f9f9f9; font-weight: bold;">
        <tr>
          <td>Total</td>
          <td>£2.25</td>
        </tr>
      </tfoot>
    </table>
            

Table Accessibility

While semantic HTML tags like <th>, <tr>, and <td> represent individual header and data cells in a table, ARIA roles and attributes can enhance accessibility and provide additional context for assistive technologies. The following provide an overview of the key tags and attributes for accessible HTML5 tables:

• Semantic Structure: <thead>, <tbody>, and <tfoot> that we discussed above separate header, body, and footer content for screen readers.
• aria-labelledby: Associates the table with a caption or heading.
• aria-describedby: Adds additional explanatory content.
• scope attribute on <th>: Clarifies relationships between headers and cells.
• headers attribute on <td>: Links cells to their respective headers in complex tables.