Mapme provides a very flexible description field for each location on your map.
With the built-in formatting toolbar, you can easily add links and simple formatting like bullet points, bold and italic.
However, you can also create more advanced formatting using HTML and CSS. For example, you can create tables to organize your content.
Why use tables in your map location descriptions?
if your descriptions include data which are similar for all the locations, tables are an excellent way to present the data.
For example, for project portfolio or real-estate listings, each location can include information like price, size, dates… See example.
There is no limit to the number of fields or the type of information you can present this way. It always results in a user-friendly experience on both large screens mobile devices.
How to create tables in your description?
In order to help you get started with adding data tables to your map locations, we created a generic template that you can use with your map.
In this example, the color of each row will alternate in order to increase clarity.
You can also customize this template based on your needs. For example, you can style your table with borders and colors.
There are 2 steps to create the tables
- Add the table CSS style
- Add the table HTML tags
CSS Style
Go to the CSS editor (Appearance > CSS editor) and copy/paste the CSS below
/** Table Template **/
.table_template_v1
{width: 100%; border: 0px;} /* set table properties */
tr:nth-child(odd) {background-color: #f2f2f2;} /* Alternate background color */
/* Add space before the table */
.mapme-theme__section-details-text {
margin-top:30px !important;
}
Add the table HTML tags
In the map locations where you want to add the table, switch the description to the HTML editor mode and copy/paste the HTML below.
You will need to replace the placeholder data with your own content.
You can add more rows by duplicating the HTML starting with <tr> and ending with </tr>
Don’t know HTML. We created a Google Sheet Template that will automatically generate the HTML table for you. You simply enter the name of the fields and the data.
<table class="table_template_v1">
<tbody>
<tr>
<td>name1</td>
<td>value1</td>
</tr>
<tr>
<td>name2</td>
<td>value2</td>
</tr>
<tr>
<td>name3</td>
<td>value3</td>
</tr>
<tr>
<td>name4</td>
<td>value4</td>
</tr>
</tbody>
</table>
Adding tables with the data import
If you have a large number of locations, you might want to use the import feature to add content to your map.
The import feature supports HTML in the description field.
You can generate the HTML tables in a spreadsheet like Microsoft Excel or Google Sheet using the “concatenate” feature. You can contact our support team if you need help or would like access to the Mapme Table Generator.