Designing Fancy Tables For Map Views

From Mikrodev Documentation
Jump to navigation Jump to search

You can use some third party applications for designing tables to be used to display data in your Map Views. One of these services could be found on this link

By using this service you can stylise you table and auto generate a CSS and HTML code.

mapTable0.png

To be able to use the generated code on Map View, you need to put both these code into InfoWindowContent. But before pasting the code into InfoWindowContent; you need to put the CSS code into "<style> </style> tags.

The structure of the code should be as following:

<style> ...CSS Code Here...</style>
        ... HTML Code Here ...

For example if your generated CSS code is like :

table.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.blueTable tbody td {
  font-size: 13px;
}
table.blueTable tr:nth-child(even) {
  background: #D0E4F5;
}
table.blueTable thead {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
table.blueTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
  border-left: none;
}

table.blueTable tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
table.blueTable tfoot td {
  font-size: 14px;
}
table.blueTable tfoot .links {
  text-align: right;
}
table.blueTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}


And your table HTML is like:

 <table class="blueTable">
 <thead>
 <tr>
 <th>head1</th>
 <th>head2</th>
 <th>head3</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>cell1_1</td>
 <td>cell2_1</td>
 <td>cell3_1</td>
 </tr>
 <tr>
 <td>cell1_2</td>
 <td>cell2_2</td>
 <td>cell3_2</td>
 </tr>
 <tr>
 <td>cell1_3</td>
 <td>cell2_3</td>
 <td>cell3_3</td>
 </tr>
 </tbody>
 </table>
 

Then your resulting code to be pasted into the InfoWindofContent should be like:

 <style>
 table.blueTable {
   border: 1px solid #1C6EA4;
   background-color: #EEEEEE;
   width: 100%;
   text-align: left;
   border-collapse: collapse;
 }
 table.blueTable td, table.blueTable th {
   border: 1px solid #AAAAAA;
   padding: 3px 2px;
 }
 table.blueTable tbody td {
   font-size: 13px;
 }
 table.blueTable tr:nth-child(even) {
   background: #D0E4F5;
 }
 table.blueTable thead {
   background: #1C6EA4;
   background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
   background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
   background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
   border-bottom: 2px solid #444444;
 }
 table.blueTable thead th {
   font-size: 15px;
   font-weight: bold;
   color: #FFFFFF;
   border-left: 2px solid #D0E4F5;
 }
 table.blueTable thead th:first-child {
   border-left: none;
 }
 
 table.blueTable tfoot {
   font-size: 14px;
   font-weight: bold;
   color: #FFFFFF;
   background: #D0E4F5;
   background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
   background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
   background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
   border-top: 2px solid #444444;
 }
 table.blueTable tfoot td {
   font-size: 14px;
 }
 table.blueTable tfoot .links {
   text-align: right;
 }
 table.blueTable tfoot .links a{
   display: inline-block;
   background: #1C6EA4;
   color: #FFFFFF;
   padding: 2px 8px;
   border-radius: 5px;
 }
 </style>

 <table class="blueTable">
 <thead>
 <tr>
 <th>head1</th>
 <th>head2</th>
 <th>head3</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>cell1_1</td>
 <td>cell2_1</td>
 <td>cell3_1</td>
 </tr>
 <tr>
 <td>cell1_2</td>
 <td>cell2_2</td>
 <td>cell3_2</td>
 </tr>
 <tr>
 <td>cell1_3</td>
 <td>cell2_3</td>
 <td>cell3_3</td>
 </tr>
 </tbody>
 </table>
 

On the Map View the table will look like:

mapTable.png