Card layout

This feature is only available in the New Fusion Tables.

The Cards layout displays rows of table data as index cards. This layout gives you the flexibility to present your data in other ways than a horizontal row. You can customize the layout of the cards.

Add the card layout

Fusion Tables creates a default card layout when you import data. To make an additional new card layout:

  1. Click + > Add card layout.

You can create and customize more than one card tab to have multiple layouts or display different data on the cards. Use the tab's menu to rename it or move it ahead of other tabs in the document. 

Adjust cards on the page

By default, a page for the card layout displays 2 cards across by 100 cards down. However, you can adjust the placement of cards on a page.

  1. Select Tools > Change card layout.
  2. Type new numbers into the text fields next to Cards across and Down to adjust the page layout.
  3. Click Save.

Use the Custom template (below) to adjust the dimensions of each individual card. 

Customize the card content

Use the automatic template

By default, the card layout template includes data from all columns (except those with KML). However, you can easily uncheck some columns to show only the data you're interested in. 

  1. Click Tools > Change card layout.
  2. In Automatic, check or uncheck boxes next to column names to select the columns that will appear on the cards.
  3. Click Save.

Customize a template

For the most control over the appearance and content of the cards, you can specify an HTML template. Work within the Custom tab of the Change card layout dialog to make these modifications.

  1. Click Tools > Change card layout.
  2. Click the Custom tab. You will see the HTML for the default layout displayed in the text box.

Insert a column
Place your cursor where you want the column's value to appear in the template and click the column's name from the list.  

Or, type the column's name with curly braces. For example, type {County} to include the data from the column "County" on the cards. 

Adjust card height and width
To change the dimensions of the card, look for "width:" and "height:" in the auto-generated template, and change the numbers to the desired pixel width and height. 

Include images in the card display
To include the same image on every card (for example, a logo), simply include the standard HTML reference to that image in the template.

To display an image that is specific to each card, your table should have a column populated with corresponding image URLs. Use the name of the column for the source in the image tag.

Unsized images can cause cards to overflow their borders. To avoid this, include "height" and "width" attributes in the image tag.

<img height="300" width="200" src="{imageURL}">

Tip: If the images change sizes too, put that data in two new number columns in the table and work it into the template: 

<img height="{imageHeight}" width="{imageWidth}" src="{imageURL}">

Make a link open in a new page by specifying target="_blank". For example:

<a href="{link URL}" target="_blank">{link text}</a>

More tips:

  • Apply formats to data columns by clicking on the column header and selecting Change.... For example, format a number as a currency to have it appear with the currency symbol in the card.
  • In-line CSS styling is supported within the template. For example to add a yellow highlight in the background of a table cell:
    <td style="background-color:yellow">text here</td>
  • See a nice card layout and wonder how it's done? To investigate the template of a card layout in a table you can view but can't edit:
    1.  Click on the name of the card tab to open the tab menu and choose Duplicate. This creates a copy of the tab viewable and editable only by you.
    2. Select Tools > Change card layout to see the template, a copy of the original.
  • Add conditional logic to your layout. Tip: Use dynamic templating
Javascript is not supported within the template code.
For security reasons, <script> tags are scrubbed on save. To use Javascript on a table's data, try retrieving it as JSON from the Fusion Tables API. Or retrieve the template embed URL using an AJAX fetch and parse the contents.

Publish Cards

The Publish tool allows you to send a link to a page displaying the cards all on their own, or copy the HTML to embed the cards in a website. Normal permissions still apply, so you may need to change the visibility settings for the table. 
  1. Click Tools > Publish.
  2. Copy the link or the HTML code and paste it in an email or website editor.
    • Optional: Adjust the size of the iframe using Width and Height.
  3. Close the Publish dialog.

Normal permissions still apply! The published cards will only be visible to those who have been granted access. Read about making a table accessible

CSS styling for the card layout

When embedding cards in another webpage, styles declared for the hosting page will apply to the display of content in the info window.

By default the automatic and custom card content is wrapped in a div with class googft-card-view. This allows the hosting page to specify styles scoped to only card content.

For example, the CSS style declaration below will create a yellow highlight on all table cells within the card content, but no other tables on the page:

.googft-info-window td { background-color: yellow }

When using a custom template, you can change the class name and create additional divs with their own class names as needed.