# Displaying a p5.Table in an HTML table outside the canvas

**URL:** <https://discourse.processing.org/t/displaying-a-p5-table-in-an-html-table-outside-the-canvas/28514>\
**Category:** Gallery\
**Created:** [March 14, 2021, 12:05am UTC](https://discourse.processing.org/t/displaying-a-p5-table-in-an-html-table-outside-the-canvas/28514 "2021-03-14T00:05:38Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![charcoaler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/charcoaler/32/12298_2.png) [@charcoaler](https://discourse.processing.org/u/charcoaler)\
**Post date:** [March 14, 2021, 12:05am UTC](https://discourse.processing.org/t/displaying-a-p5-table-in-an-html-table-outside-the-canvas/28514/1 "2021-03-14T00:05:38Z")

</div>

Hi, I wrote this function to display an p5.Table as HTML table outside the canvas for my project and I thought it might be useful to others. It might take me a while to figure out how to use git to contribute to the table object. so I ll post it here first and here is a sketch to showcase it.

[https://editor.p5js.org/laurent.tran/sketches/CwwF02GX9](https://editor.p5js.org/laurent.tran/sketches/CwwF02GX9)

```auto

function build_HTML_table (tbl, tableID, parentID, classID){
  // create an HTML table with w3.css class with the table tbl
  // tbl should be a p5.Table object
  // tableID is the selector ID you want to assign to the table
  // parentID is the element ID under which you want to locate the table
  // classID is the class to add to the <table>
  
  let cc = tbl.getColumnCount();
  let rc = tbl.getRowCount();  
  let rows = tbl.getRows();
  
  print('col =' +cc + ' row = ' +rc);
  print(tbl);
  
  // setup the table header HTML string
  let hh ="<tr>"; // header html
  for (let c = 0; c < cc; c++) {
    hh +="<th>" + tbl.columns[c] +"</th>";
  }
  hh +="</tr>"
  
  // setup the table row HTML string
  let rh =""; // row html
  
  for (let r = 0; r < rc; r++){
    rh +="<tr>";
    for (let c = 0; c < cc; c++){
      
       // add the content of each cell
       rh +="<td>" + tbl.get(r,c) + "</td>"; 
       
    }
    rh +="</tr>";
  }
  
  //print('cell (0,1) = ' + tbl.get(0, 1));
  //print('cell (0,0) = ' + tbl.get(0, 0));
  
  let t = createElement('table', hh+rh);
  
  t.addClass(classID); // add the table class from w3.csss
  t.id(tableID); // sets the id for this <table>
  t.parent(parentID);
  
}

```