I am researching adding a table and styling the table in a popup in arcgis online. Could someone provide me a html, css, and javascript examples? I am fairly new at these languages, but I am hoping to have a relatively good customized pop up with a table and styling before the end of the week.

The table in the pop up will have two columns. The first column will have the feature name and the second column will have the value associated with that feature class. The text will need to be in Arial font. The table itself will need to have alternating color rows: white and light blue. Finally, the text alignment for the first column needs to be aligned to the right and the second column text aligned to the left. Eventually this pop up will include hyperlinks and images to reports collected in the field using ArcGIS Worforce, ArcGIS Survey 123, and ArcGIS collector.

Here is some sample code I wrote and applied to the customized pop up.

<br />
</b><br />
<font face="Arial" size="2">
tbody, td: first-child{text-align: right}
<td>FIPS Code</td>
<td>Total Population:</td>
<td>Population Under 15:</td>

Unfortunately the CSS rule I tried to apply to the left column did not work. Any suggestions?

  • Can you add some more information? Do you want to publish the table as a hosted feature layer and use that? Are you wanting to leverage the map viewer that allows you do to all of this OOTB or do you want to use JSAPI to create this layer styling & popup config? Do you want to build your own custom application or use the some of the ones that are provided in ArcGIS Online. – Russ Roberts Jun 19 '19 at 15:14
  • I am simply trying to configure a popup in arcgis online and including a table in the pop up using html. It will consist of two columns. Column 1 will refer to the feature class name and Column 2 will have the value attached to that feature class. I also want to add alternating colors to each row of the table i.e. alternating white with sky blue. I need to have the text in the first column aligned to the left and have the second column text aligned to the right. – tjwashin234 Jun 19 '19 at 15:26
  • Check out the youtube video around the 8min mark. They use arcade and some interesting ways to send HTML values back to the popup so it renders tables. You can modify the map and look at the popup > expressions to see how they did it. – KHibma Jun 19 '19 at 15:40

Based on your updated code sample -- you cannot use the inline <style> tag in a popup. It's not in the list of supported HTML.

You'll need to add style per each HTML element. The previous link has examples.

| improve this answer | |

It looks like a CSS syntax issue - try changing your CSS to:

tbody tr td:first-child{text-align: right;}

1. tbody td:first-child: selects all the first cells in rows in the rows of tbody
2. Add ; to the CSS definition

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.