# Show table in custom node config screen

**URL:** <https://discourse.nodered.org/t/show-table-in-custom-node-config-screen/7897>\
**Category:** Developing Nodes\
**Created:** [12 February 2019 19:19 UTC](https://discourse.nodered.org/t/show-table-in-custom-node-config-screen/7897 "2019-02-12T19:19:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 February 2019 19:19 UTC](https://discourse.nodered.org/t/show-table-in-custom-node-config-screen/7897/1 "2019-02-12T19:19:36Z")

</div>

Hi folks,

I have added a table to my config screen:

```auto
    <div class="form-row">
        <label for="node-input-areas"><i class="fa fa-table"></i> Area's</label>
        <div id="node-input-areas" style="background-color:lightgrey;border-radius: 5px; padding: 5px; border: 3px solid #ccc;">    
            <table>
                <tr>
                    <td>
                        <select id="node-input-area11"></select>
                    </td>
                    <td>
                        <select id="node-input-area12"></select>
                    </td>
                    <td>
                        <select id="node-input-area13"></select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <select id="node-input-area21"></select>
                    </td>
                    <td>
                        <select id="node-input-area22"></select>
                    </td>
                    <td>
                        <select id="node-input-area23"></select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <select id="node-input-area31"></select>
                    </td>
                    <td>
                        <select id="node-input-area32"></select>
                    </td>
                    <td>
                        <select id="node-input-area33"></select>
                    </td>
                </tr>
            </table>
        </div>
    </div>

```

This results in following config screen:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/301b86dc631a85b41147db486ab31c4ac438b574.png)

However I expected it to appear **AFTER the label** (_Area's_), like this:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3d8120d24fd8dc0ad451350efc3c96b8c08e147f.png)

Does anybody know how I can achieve that?

It is not a life threatening issue, but it would be nice if all the labels are at the left, and the user input widgets at the right ...

Thanks !  
Bart

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 February 2019 20:10 UTC](https://discourse.nodered.org/t/show-table-in-custom-node-config-screen/7897/2 "2019-02-12T20:10:32Z")

</div>

it's because of the table. Here is a example taken from the ui\_text node for the layout that might be of help

```auto
    <div class="form-row">
        <label style="vertical-align: top"><i class="fa fa-th-large"></i> Layout</label>
        <div style="display:inline-block">
        <input type="hidden" id="node-input-layout"><input type="hidden" id="node-input-layoutAlign">
        <div>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-left">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-center">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-right">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
        </div>
        <div>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-spread">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-col nr-db-text-layout-col-center">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
        </div>
        </div>
    </div>
  

```

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 February 2019 21:39 UTC](https://discourse.nodered.org/t/show-table-in-custom-node-config-screen/7897/3 "2019-02-12T21:39:11Z")

</div>

> [@zenofmud](#):
>
> style="vertical-align: top"

Hey Paul (@zenofmud),

Awesome!! This works fine. Didn't know you were a retired CSS scientist 😂  
Normally I ask '_why_' this solution works better, but I will just accept it this time.  
Like reading in the bible ...

This is my new implementation:

```auto
    <div class="form-row">
        <label for="node-input-areas" style="vertical-align: top"><i class="fa fa-table"></i> Area's</label>
        <div id="node-input-areas" style="display:inline-block; width:67%; background-color:lightgrey;border-radius: 5px; padding: 5px; border: 3px solid #ccc;">    
            <div>
                <select id="node-input-area11" style="width:32%;"></select>
                <select id="node-input-area12" style="width:32%;"></select>
                <select id="node-input-area13" style="width:32%;"></select>
            </div>
            <div>
                <select id="node-input-area21" style="width:32%;"></select>
                <select id="node-input-area22" style="width:32%;"></select>
                <select id="node-input-area23" style="width:32%;"></select>
            </div>
            <div>
                <select id="node-input-area31" style="width:32%;"></select>
                <select id="node-input-area32" style="width:32%;"></select>
                <select id="node-input-area33" style="width:32%;"></select>
            </div>
        </div>
    </div>

```

This is the result, which even resizes very nicely:

![cam_layout](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9d76e362c51bfa8f88208f8698b8c072a1bc6207.gif)

Thanks a lot !!!  
Bart

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [12 February 2019 21:47 UTC](https://discourse.nodered.org/t/show-table-in-custom-node-config-screen/7897/4 "2019-02-12T21:47:03Z")

</div>

If you look at the `node-input-areas` `<div>`, it has a custom style:

```auto
 style="display:inline-block; width:67%; background-color:lightgrey;border-radius: 5px; padding: 5px; border: 3px solid #ccc;"

```

Without that, it would have done exactly the same as the `<table>` - as their default style is to be a block that fills 100% width.

So you _could_ have fixed this by applying a similar custom style to the `<table>` - in particular: `style="display: inline-block; width: 67%"` would likely have done it.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 February 2019 22:01 UTC](https://discourse.nodered.org/t/show-table-in-custom-node-config-screen/7897/5 "2019-02-12T22:01:27Z")

</div>

though the wide border is a bit yuk - hopefully just for debug 🙂

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 February 2019 22:07 UTC](https://discourse.nodered.org/t/show-table-in-custom-node-config-screen/7897/6 "2019-02-12T22:07:11Z")

</div>

> [@BartButenaers](#):
>
> style="width:32%;"

Hey Nick (@knolleary),  
When I add that style to the table:

```auto
<div class="form-row">
        <label for="node-input-areas"><i class="fa fa-table"></i> Area's</label>
        <div id="node-input-areas" style="background-color:lightgrey;border-radius: 5px; padding: 5px; border: 3px solid #ccc;">    
            <table style="display: inline-block; width: 67%">
                ...

```

Then I get this:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1be6c62c9aef4912a80b744e8fad91789291a296.png)

I don't doubt your plan B works, but most probably I have done something else wrong...

But forget about it !!  
I don't want to be the cause that version Node-RED version 0.2 **1**.0 (with pluggable message routing) cannot be released in 2 months from now 😂 😂