# How do I create a table inside p5 space?

**URL:** <https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283>\
**Category:** Coding Questions\
**Created:** [February 19, 2022, 2:15am UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283 "2022-02-19T02:15:00Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 19, 2022, 2:15am UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/1 "2022-02-19T02:15:00Z")

</div>

How do I create a table inside p5 space?

link : [https://codepen.io/anon/pen/bNJeLO](https://codepen.io/anon/pen/bNJeLO)

 ![fig2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/72609cec7609e8df53c8633d55e7fa5d3df82813.jpeg)

Like the picture above, I want to create a slide table.  
Is there any way to make a slide table in p5 space?

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [February 19, 2022, 10:06am UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/2 "2022-02-19T10:06:38Z")

</div>

p5js is just js embedded in an html page with css. you can just skip the canvas stuff and use only the html and css if you want to achieve what is in your linked sketch. something like [this](https://editor.p5js.org/hotfooted/sketches/Mz2zfvmfQ) if you mean you want to create a table within the canvas that’s a different story.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 19, 2022, 10:48am UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/3 "2022-02-19T10:48:32Z")

</div>

@hotfooted  
@GoToLoop

Yes. In the method of the first post, you cannot put a graph in ‘p5-canvas’.

If so, the best way is  
link: [Tables with arrays, sort - OpenProcessing](https://openprocessing.org/sketch/706972)  
Is there no choice but to create the table as the source code internally?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 19, 2022, 12:11pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/4 "2022-02-19T12:11:49Z")

</div>

> [@GWAK](#):
>
> Is there no choice but to create the table as the source code internally?

* * *

JS can programmatically access both [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) `<tags>` & [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) styles.

Or even programmatically create them & then attach them to the webpage.

* * *

In order to access any [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) within a webpage we can call p5js function [**select()**](https://p5js.org/reference/#/p5/select).

For example, `const tableElem = select('table');` would find the 1st [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) tag & return it wrapped up as a [p5.Element](https://p5js.org/reference/#/p5.Element) datatype object.

* * *

In order to create & attach them to the root of the webpage we can call [createElement()](https://p5js.org/reference/#/p5/createElement).

For example, `var tableRow = createElement('tr');` would create a [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) tag wrapped up as a [p5.Element](https://p5js.org/reference/#/p5.Element) datatype object.

* * *

We can also move any [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) to another 1 via [p5.Element](https://p5js.org/reference/#/p5.Element) methods [**parent()**](https://p5js.org/reference/#/p5.Element/parent) & [**child()**](https://p5js.org/reference/#/p5.Element/child).

For example, `tableRow.parent(tableElem);` would move the [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) tag referred by variable _tableRow_ into the [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) tag referred by variable _tableElem_.

Another example, `tableRow.child(createElement('td', 'Apple')).child(createElement('td', 'Red')).child(createElement('td', 'These are red.'));` would create & place 3 [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) tags inside the [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) tag referred by variable _tableRow_.

* * *

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 19, 2022, 12:23pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/5 "2022-02-19T12:23:12Z")

</div>

@GoToLoop

link : [p5.js Web Editor](https://editor.p5js.org/gwakseongjong/sketches/tawb2CZYl)

Dear GoToLoop

I made it based on what you said.  
Thank you.  
In conclusion, can it be said that it cannot be put in ‘p5-createCanvas’?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 19, 2022, 12:25pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/6 "2022-02-19T12:25:19Z")

</div>

here is a processing / Java example

```auto

// class with tools 
ToolsForTable tools = new ToolsForTable(); 

// the table
Table tResources; 

void setup() {
  size(1600, 660);
  background(tools.WHITE);

  // setting up table (column names / headlines)
  tResources = tools.newTable("Item", "brick", "wood", "sheep", "wheat", "ore", "points");

  // adding data (must match headlines)
  tResources = tools.tableAddData ( tResources, "Road (establishing the longest road: 2 victory points)", "1x", "1x", "", "", "", "0" );  
  tResources = tools.tableAddData ( tResources, "Settlement. Players with a settlement adjacent to a hex containing the number just rolled receive one card of the corresponding resource.", "1x", "1x", "1x", "1x", "", "1" );  
  tResources = tools.tableAddData ( tResources, "City (which must replace existing settlement). Cities produce two cards of the corresponding resource.", "", "", "", "2x", "3x", "2");

  String textDevelopmentCard = 
    "Development Card - Three types of development cards include cards worth one victory point; "
    +"knight cards, which allow the player to move the robber as if they had rolled a 7 (but without the remove-half rule); "
    +"and a third set of cards which allow the player one of three abilities when played.";
  tResources = tools.tableAddData ( tResources, textDevelopmentCard, 
    "", "", "1x", "1x", "1x", "?" );  

  // ------------------------------
}

void draw() {
  background(0); 
  tools.showTable(tResources, 
    22, 52);

  fill(tools.WHITE);
  text("The Settlers of Catan - Building Costs", 
    22, 27);
  text("Place the mouse over a word to show full text in the Status Bar", 
    22, height/2-110);
}

//===============================================================================
// Tools collection 

class ToolsForTable {

  // class not like a car class Car for an object but a collection of tools. 

  final color RED = color(255, 0, 0); 
  final color GREEN = color(0, 255, 0); 
  final color BLUE = color(0, 0, 255); 

  final color WHITE = color(255); 
  final color BLACK = color(0); 
  final color GRAY = color(255/2); 

  boolean cursorSignShowFlag=false; 

  // ----------------------------------------------------------------

  void showTable(Table tableBtn, 
    int x, int y) { 

    int factorX=78; // column width 

    // rect
    stroke(WHITE);
    noFill();
    rect( x, y, 
      tableBtn.getColumnCount()*78-6, (tableBtn.getRowCount()+1) * 22 + 10 );

    // headline 
    showTableHeadline(tableBtn, x+6, y+19, factorX);

    // horizontal line 
    stroke(WHITE);
    line( x+2, y+5+19, 
      6+x+(tableBtn.getColumnCount())*factorX-13, y+5+19);

    // grid 
    // loop over rows (y)
    for (int i=0; i<tableBtn.getRowCount(); i++) {

      // current data row
      TableRow row = tableBtn.getRow(i);

      // loop over columns in that row (i2 is for x) 
      for (int i2=0; i2<tableBtn.getColumnCount(); i2++) {

        fill(WHITE);
        text(row.getString(i2), 
          i2*factorX+x+6, 25+ i * 22 +y+8, 
          factorX-8, 15);

        if (mouseInside(i2*factorX+x+6, 25+ i * 22 +y+8, 
          factorX-8, 15)) {
          statusBar(row.getString(i2));
        }//if

        // vertical line 
        stroke(WHITE);
        line( i2*factorX+x, +y, 
          i2*factorX+x, tableBtn.getRowCount() * 22 + y + 31);
      }//for
    }//for
  }// method 

  boolean mouseInside( float x_, float y_, 
    float w_, float h_) {
    return mouseX>x_ &&
      mouseX<x_+w_ &&
      mouseY>y_ &&
      mouseY<y_+h_;
  }//func 

  void statusBar(String textStatus) {
    fill(GRAY); 
    noStroke(); 
    rect(0, height-32, 
      width, 33);
    fill(WHITE); 
    text (textStatus, 
      3, height-12);
  }//func 

  void showTableHeadline(Table tableBtn, 
    int x, int y, 
    int factorX) { 
    // headline for table 
    TableRow row0 = tableBtn.getRow(0);
    for (int i=0; i<tableBtn.getColumnCount(); i++) {
      // headline 
      fill(GREEN);
      text(row0.getColumnTitle(i), 
        i*factorX+x, y-2);
    }
  }//method 

  // ---
  // make table 

  Table newTable (String... listColumnNames) { 

    Table newT = new Table();

    // make columns
    for (String s1 : listColumnNames) {
      newT.addColumn(s1);
    }

    return newT;
  }//method

  Table tableAddData( Table table1, String... data1 ) {

    // add rows with data 
    TableRow newRow = table1.addRow();

    // add rows with data 
    int i=0; 
    for (String s1 : data1) {
      newRow.setString(newRow.getColumnTitle(i), s1);
      i++;
    }

    return table1;
  }//method

  // --- 

  void printlnTable(Table tableBtn) { 

    // rect
    stroke(WHITE);
    noFill();

    println("------------------------------------");

    // headline 
    printlnTableHeadline(tableBtn);

    // grid 
    // loop over rows (y)
    for (int i=0; i<tableBtn.getRowCount(); i++) {

      // current data row
      TableRow row = tableBtn.getRow(i);

      // loop over columns in that row (i2 is for x)
      String s1="";
      for (int i2=0; i2<tableBtn.getColumnCount(); i2++) {
        s1+=" "+row.getString(i2);
        //
      }//for
      println(s1);
    }//for
    println("===========================================");
    //
  } // method 

  void printlnTableHeadline(Table tableBtn ) { 
    // headline for table 
    TableRow row0 = tableBtn.getRow(0);
    for (int i=0; i<tableBtn.getColumnCount(); i++) {
      // headline 
      print(" "+row0.getColumnTitle(i));
    }
    println("");
  }//method 

  // ------------------------------------------------------------------

  String cursorSign() {
    // blinking cursor sign | for Input Box 
    if (frameCount % 13 == 0)
      cursorSignShowFlag= ! cursorSignShowFlag;
    if (cursorSignShowFlag)
      return"|";
    else return"";
  }//method

  //
}//class
//

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 19, 2022, 12:37pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/7 "2022-02-19T12:37:53Z")

</div>

> [@GWAK](#):
>
> In conclusion, can it be said that it cannot be put in ‘p5-createCanvas’?

p5js draws inside a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) tag, which is an HTMLCanvasElement:

> **[HTMLCanvasElement - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)**
>
> The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of elements. The HTMLCanvasElement interface also inherits the properties and methods of the HTMLElement interface.

Theoretically you could [**position()**](https://p5js.org/reference/#/p5.Element/position) a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) tag over the p5js’ [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) tag by [**style()**](https://p5js.org/reference/#/p5.Element/style) it transparent.

Or you could completely [**hide()**](https://p5js.org/reference/#/p5.Element/hide) the [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) tag & parse its internal tags in order to draw those content using [**text()**](https://p5js.org/reference/#/p5/text) & [**line()**](https://p5js.org/reference/#/p5/line), just like your [OpenProcessing](https://openprocessing.org/sketch/706972) sketch did by reading data from a CSV file.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 19, 2022, 12:39pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/8 "2022-02-19T12:39:26Z")

</div>

@Chrisir

 ![fig](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d02def1d2338afffa96d927bfe9250b4c5a98d7d.jpeg)

Dear Chrisir

Thank you for answer.  
I am currently using it like this:

1. Set one image as background.
2. Output the text in the corresponding position for each image.

However, I was wondering if there is any way to create a table internally.  
If you look at what you said, it is confirmed that it is made through internal coding.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 19, 2022, 12:45pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/9 "2022-02-19T12:45:33Z")

</div>

@GoToLoop

 ![fig2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/67093ed61bedfe00afd13e9c87d640b6f880f4d1.jpeg)

thank you for the reply.  
This is the answer I want.  
I solved it because of you. thank you.  
link : [p5.js Web Editor](https://editor.p5js.org/gwakseongjong/sketches/tawb2CZYl)

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 19, 2022, 1:44pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/10 "2022-02-19T13:44:08Z")

</div>

@GoToLoop

my source : [p5.js Web Editor](https://editor.p5js.org/gwakseongjong/sketches/n79Ezz-o5)  
ref source : [HTML 테이블 tbody 스크롤 적용 - 제타위키](https://zetawiki.com/wiki/HTML_%ED%85%8C%EC%9D%B4%EB%B8%94_tbody_%EC%8A%A4%ED%81%AC%EB%A1%A4_%EC%A0%81%EC%9A%A9)

 ![ffig](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/92cd5e04bf8cc1e910ae464c66f5a77d7e570a74.jpeg)  
 ![ffig2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cb0796f74d628b68c157d918f6bf0d373a05973e.jpeg)

I want to put data inside ‘tbody’.  
However, I don’t know how to put it in ‘tbody’ with the ‘child’ function.

Do you have any way? Or should it be seen as a limitation of ‘p5’?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 19, 2022, 3:41pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/11 "2022-02-19T15:41:00Z")

</div>

> [@GWAK](#):
>
> However, I don’t know how to put it in `<tbody>` with the **child()** function.

Your line `tableRow.child(createElement('tr'));` is creating a `<tr>` tag & moving it inside your `<thead>` tag.

However the other tags `<th>` & `<td>` gotta move inside a `<tr>` tag, not `<thead>` or `<tbody>`!

And also both `<thead>` & `<tbody>` tags need to go inside a `<table>` tag:

```auto
'use strict';

var tbody;

function setup() {
  noCanvas();

  const table = createElement('table').class('scrolltbody').position(10, 100);

  createElement('tr')
    .parent(createElement('thead').parent(table))
    .child(createElement('th', '#'))
    .child(createElement('th', 'NAME'))
    .child(createElement('th', 'ID'));

  tbody = createElement('tbody').parent(table);
  for (var i = 0; i < 20; addNewTableRow(tbody, ++i));
}

function addNewTableRow(tableBody, index = '') {
  return createElement('tr')
    .parent(tableBody)
    .child(createElement('td', '' + index))
    .child(createElement('td', 'name' + index))
    .child(createElement('td', 'id' + index));
}

```

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 19, 2022, 4:15pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283/12 "2022-02-19T16:15:13Z")

</div>

Now I understand.  
thank you.  
You are an angel.