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">
<style>
tbody, td: first-child{text-align: right}
</style>
<table>
<tbody>
<tr>
<td>ObjectID:</td>
<td>{OBJECTID}</td>
</tr>
<tr>
<td>FIPS Code</td>
<td>{FIPS}</td>
</tr>
<tr><td>County:</td>
<td>{County}</td>
</tr>
<tr>
<td>State:</td>
<td>{STATE}</td></tr>
<tr>
<td>Total Population:</td>
<td>{Total_Population}</td>
</tr>
<tr>
<td>Population Under 15:</td>
<td>{Population_Under_15}</td>
</tr>
</tbody>
</table>
</font>
Unfortunately the CSS rule I tried to apply to the left column did not work. Any suggestions?
Best Answer
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.