Tables

Tables#

This page is about creating tables in html pages

Basic (`<table>`, `<tr>`, `<td>`)#

<table> - tag defines new table;
<tr> - (table row) define the new row for the table;
<td> - (table data) define the new cell.

%%HTML
<table>
    <tr>
        <td>row1 cell1</td>
        <td>row1 cell2</td>
    </tr>
    <tr>
        <td>row2 cell1</td>
        <td>row2 cell2</td>
    </tr>
</table>

row1 cell1	row1 cell2
row2 cell1	row2 cell2

Table header (`<th>`)#

Instead of using <td> tag you can use <th> which will be interpreted as the table header, and printed as bold text.

%%HTML
<table>
    <tr>
        <td>row1 cell1</td>
        <td>row1 cell2</td>
    </tr>
    <tr>
        <th>row2 cell1</th>
        <th>row2 cell2</th>
    </tr>
    <tr>
        <td>row2 cell1</td>
        <td>row2 cell2</td>
    </tr>
</table>

row2 cell1	row2 cell2
row1 cell1	row1 cell2
row2 cell1	row2 cell2

Caption#

Tag <caption> inside <table> will allow to show a captions of the tables. Interesting that you can put it anywhere - it prints at the top of the page anyway.

%%HTML
<table>
    <tr>
        <td>row1 cell1</td>
        <td>row1 cell2</td>
    </tr>
    <tr>
        <td>row2 cell1</td>
        <td>row2 cell2</td>
    </tr>
    <caption> Test caption</caption>
    <tr>
        <td>row2 cell1</td>
        <td>row2 cell2</td>
    </tr>
</table>

Test caption
row1 cell1	row1 cell2
row2 cell1	row2 cell2
row2 cell1	row2 cell2

Fixed table head#

It’s really convenient in case of long tables to be able to always see the header of the table. So in this subsection I want to discuss details about building tables with fidex headers and scrollable bodies.

Minimal setup#

The minimum you need to create a fixed header is to use position: sticky; top: 0; The css properties for the thead tag and the element it contains must be scrollable and limited in size. As in the example below.

%%HTML
<div style="overflow-y: auto; height: 250px;"> 
    <table> 
      <thead style="position: sticky; top: 0;"> 
        <tr> 
          <th>Col 1</th> 
          <th>Col 2</th> 
        </tr> 
      </thead> 
  
      <tbody> 
        <tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr><tr><td>3.1</td><td>3.2</td></tr><tr><td>4.1</td><td>4.2</td></tr><tr><td>5.1</td><td>5.2</td></tr><tr><td>6.1</td><td>6.2</td></tr><tr><td>7.1</td><td>7.2</td></tr><tr><td>8.1</td><td>8.2</td></tr><tr><td>9.1</td><td>9.2</td></tr><tr><td>10.1</td><td>10.2</td></tr><tr><td>11.1</td><td>11.2</td></tr><tr><td>12.1</td><td>12.2</td></tr><tr><td>13.1</td><td>13.2</td></tr><tr><td>14.1</td><td>14.2</td></tr><tr><td>15.1</td><td>15.2</td></tr><tr><td>16.1</td><td>16.2</td></tr><tr><td>17.1</td><td>17.2</td></tr><tr><td>18.1</td><td>18.2</td></tr><tr><td>19.1</td><td>19.2</td></tr><tr><td>20.1</td><td>20.2</td></tr>
      </tbody> 
        
    </table> 
</div>

Col 1	Col 2
1.1	1.2
2.1	2.2
3.1	3.2
4.1	4.2
5.1	5.2
6.1	6.2
7.1	7.2
8.1	8.2
9.1	9.2
10.1	10.2
11.1	11.2
12.1	12.2
13.1	13.2
14.1	14.2
15.1	15.2
16.1	16.2
17.1	17.2
18.1	18.2
19.1	19.2
20.1	20.2

Basic setup#

There are some features that allow to make a scrollable table with fixed header nicer than minimal setup:

background: for head tag - allow to hide table values under header.
width: 100%; for the table tag, make the table fit the whole parent object, so the scrollbar will fit just as well as the side of the object.

%%HTML
<div style="overflow-y: auto; height: 250px;"> 
    <table style="width: 100%;"> 
      <thead style="position: sticky; top: 0; background: #ABDD93;"> 
        <tr> 
          <th>Col 1</th> 
          <th>Col 2</th> 
        </tr> 
      </thead> 
  
      <tbody> 
        <tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr><tr><td>3.1</td><td>3.2</td></tr><tr><td>4.1</td><td>4.2</td></tr><tr><td>5.1</td><td>5.2</td></tr><tr><td>6.1</td><td>6.2</td></tr><tr><td>7.1</td><td>7.2</td></tr><tr><td>8.1</td><td>8.2</td></tr><tr><td>9.1</td><td>9.2</td></tr><tr><td>10.1</td><td>10.2</td></tr><tr><td>11.1</td><td>11.2</td></tr><tr><td>12.1</td><td>12.2</td></tr><tr><td>13.1</td><td>13.2</td></tr><tr><td>14.1</td><td>14.2</td></tr><tr><td>15.1</td><td>15.2</td></tr><tr><td>16.1</td><td>16.2</td></tr><tr><td>17.1</td><td>17.2</td></tr><tr><td>18.1</td><td>18.2</td></tr><tr><td>19.1</td><td>19.2</td></tr><tr><td>20.1</td><td>20.2</td></tr>
      </tbody> 
        
    </table> 
</div>

Col 1	Col 2
1.1	1.2
2.1	2.2
3.1	3.2
4.1	4.2
5.1	5.2
6.1	6.2
7.1	7.2
8.1	8.2
9.1	9.2
10.1	10.2
11.1	11.2
12.1	12.2
13.1	13.2
14.1	14.2
15.1	15.2
16.1	16.2
17.1	17.2
18.1	18.2
19.1	19.2
20.1	20.2

Joined table cells#

In some cases you’ll need to create tables where the same infromation can take up a few close cells. For this purposes can be used colspan, rowspan attributes.

`colspan` example#

In the following example, the colspan attribute is used to create a table where certain elements span across multiple columns. To create joined cells, the colspan attribute is specified only in the first <td> element, and the remaining <td> elements that will be joined to it are left unmentioned.

%%HTML
<table>
  <tbody>
    <tr>
      <td colspan="2" style="text-align:center">Data 1.1</td>
      <td>Data 1.2</td>
      <td>Data 1.3</td>
      <td>Data 1.4</td>
    </tr>
    <tr>
      <td>Data 2.1</td>
      <td>Data 2.2</td>
      <td colspan="3" style="text-align:center">Data 2.3</td>
    </tr>
  </tbody>
</table>

Data 1.1		Data 1.2	Data 1.3	Data 1.4
Data 2.1	Data 2.2	Data 2.3

`rowspan` example#

In the following example, the rowspan attribute is used to create a table where certain elements span multiple rows. To create merged cells, only the <td> element of the first <tr> is specified in the colspan attribute. Subsequent <tr> elements don’t contain corresponding <td> elements.

%%HTML
<table>
  <tbody>
    <tr>
      <td rowspan="2">Data 1.1</td>
      <td>Data 1.2</td>
      <td>Data 1.3</td>
      <td>Data 1.4</td>
    </tr>
    <tr>
      <td>Data 2.2</td>
      <td rowspan="3">Data 2.3</td>
      <td>Data 2.4</td>
    </tr>
    <tr>
      <td>Data 3.1</td>
      <td>Data 3.2</td>
      <td>Data 3.4</td>
    </tr>
    <tr>
      <td>Data 4.1</td>
      <td>Data 4.2</td>
      <td>Data 4.4</td>
    </tr>
  </tbody>
</table>

Data 1.1	Data 1.2	Data 1.3	Data 1.4
Data 1.1	Data 2.2	Data 2.3	Data 2.4
Data 3.1	Data 3.2		Data 3.4
Data 4.1	Data 4.2		Data 4.4

Spaned headers#

This feature is really useful for use in table headers. So here is an example of using the colspan attribute for th tags.

%%HTML
<table>
  <thead>
    <tr>
      <th></th>
      <th colspan="2" style="text-align:center">Header 1</th>
      <th colspan="2" style="text-align:center">Header 2</th>
    </tr>
    <tr>
      <th>Nested Header</th>
      <th>Subheader 1</th>
      <th>Subheader 2</th>
      <th>Subheader 3</th>
      <th>Subheader 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Data 1.1</td>
      <td>Data 1.2</td>
      <td>Data 2.1</td>
      <td>Data 2.2</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Data 1.1</td>
      <td>Data 1.2</td>
      <td>Data 2.1</td>
      <td>Data 2.2</td>
    </tr>
  </tbody>
</table>

	Header 1		Header 2
Nested Header	Subheader 1	Subheader 2	Subheader 3	Subheader 4
Row 1	Data 1.1	Data 1.2	Data 2.1	Data 2.2
Row 2	Data 1.1	Data 1.2	Data 2.1	Data 2.2