Search
Clear search
Close search
Google apps
Main menu
true

Fusion Tables is an experimental app.

Create: a business card report

This tutorial uses a feature available only in the New look.

The Cards layout allows you to view rows of data as index cards. You can customize the content and layout of these cards using checkboxes or HTML.

This tutorial takes you through creating a custom template to display a table of U. S. Senators' contact information in a business card layout.

Get familiar with the sample data set

You can get started rapidly by simply re-using our demo data table. Or, upload your own table. 

Rapid start

  1. Open the United States Senators, 2012 table.
  2. Click the Cards 1 tab. 

For your own copy

  1. Open the United States Senators, 2012 table.
  2. Choose File > Make a copy.
  3. Click the Cards 1 tab. 

By default, the Cards layout shows 2 cards across by 100 cards down and presents the first 10 columns of data. Although this layout clearly includes the data, it's not as clean as a "business card" would be.

To make a great business card, let's clean up the layout:

  • Remove or edit most of the labels.
  • Make the picture bigger.
  • Create an actionable "Contact the senator" link.

Here's what we're going for:



Customize the card layout

Rapid start

If you're using the demo data, you need your own editable copy of the card layout. Do this one of two ways: 

  • Click the "Cards 1" tab and choose Duplicate or
  • Select [+] > Add card layout.

Everyone

  1. Select Tools > Change card layout.
    The Automatic layout makes it easy to select or deselect columns, but for this tutorial, we're going to take full control with the Custom layout.
  2. Click the Custom tab.
    This feature allows you to customize the HTML template for the cards, including changing the labels, arrangement  to make detailed adjustments to features such as the font and the card size.
  3. Replace the default HTML with the following code:

    <div class='googft-card-view' style="width: 330px; padding: 4px; margin: 4px; border: 1.5px solid #ccc; overflow: hidden">
    <img src="{Image}" title="{Name}" alt="{Name}" style="float: left; height: 150px; width: 119px; padding: 8px;">
    <div style="font-weight: bold; font-size: 125%; padding-top: 8px">
      <a style="color: #000000; text-decoration: none;" target="_blank" 
      href="{Website}">{Name}</a>
    </div>
    <div>{Party} - {State}</div>
    <div style="padding-bottom: 12px">
      <span style="color: #76797c; font-size: 95%;">Class:</span> {Class}
    </div>
    <div>{Office}<br/>{Phone Number}</div>
    <div style="font-size: 110%; font-weight: bold; padding-top: 24px">
      <a href="{Contact}" target="_blank">Contact {Name}</a>
    </div>
    </div>
  4. Click Save.

Now the rows look like business cards.

We're done!  Click the Custom cards tab to see the result in our demo table

The next two sections build on what you've just accomplished. The first explains the template in more detail, so you can play with tweaking the template yourself and see the results. The second tells how to publish and share your new business card layout. 

Optional: Behind the scenes

This section walks through the template code to understand a bit more how it is turning data into a layout. If you'd prefer, skip to the Publish section below.

Column names in curly brackets

The template code is basic HTML and exactly what you'd write for a webpage...except for this one aspect. 

Highlight column names in the template code
<div class='googft-card-view' style="width: 330px; padding: 4px; margin: 4px; border: 1.5px solid #ccc; overflow: hidden">
 
<img src="{Image}" title="{Name}" alt="{Name}" style="float: left; height: 150px; width: 119px; padding: 8px;">
 
<div style="font-weight: bold; font-size: 125%; padding-top: 8px">
  <a style="color: #000000; text-decoration: none;" target="_blank" 
   href="{Website}">{Name}</a>
</div>
 
<div>{Party} - {State}</div>
 
<div style="padding-bottom: 12px">
  <span style="color: #76797c; font-size: 95%;">Class:</span> {Class}
</div>
 
<div>{Office}<br/>{Phone Number}</div>
 
<div style="font-size: 110%; font-weight: bold; padding-top: 24px">
  <a href="{Contact}" target="_blank">Contact {Name}</a>
</div>
 
</div>

Think of each business card as its own little webpage. But to spare you the trouble of writing everything out, such as the name for each senator, you can just grab the value from your data table using {Name}.

The data from columns can be displayed, or it can be part of other webpage elements too. The following line of code creates the link at the bottom of the business card. It sets up a link using the information from the Contact column and tells that link to open in a new window. Then it creates the link's text using the word "Contact" and fills in the senator's name: 

<a href="{Contact}" target="_blank">Contact {Name}</a>

In-line .css styling

The template uses in-line styles to change the appearance of text and improve the readability of the data. 

Highlight in-line styles in the template code
<div class='googft-card-view' style="width: 330px; padding: 4px; margin: 4px; border: 1.5px solid #ccc; overflow: hidden">
 
<img src="{Image}" title="{Name}" alt="{Name}" style="float: left; height: 150px; width: 119px; padding: 8px;">
 
<div style="font-weight: bold; font-size: 125%; padding-top: 8px">
  <a style="color: #000000; text-decoration: none;" target="_blank" 
  href="{Website}">{Name}</a>
</div>
 
<div>{Party} - {State}</div>
 
<div style="padding-bottom: 12px">
  <span style="color: #76797c; font-size: 95%;">Class:</span> {Class}
</div>
 
<div>{Office}<br/>{Phone Number}</div>
 
<div style="font-size: 110%; font-weight: bold; padding-top: 24px">
  <a href="{Contact}" target="_blank">Contact {Name}</a>
</div>
 
</div>

You may notice color codes changing the font color, such as gray with #76797c. Find more hex color codes with a website such as ColorPicker.com.

Images

As you'd expect, the <img> tag in the template with a URL will cause the image to load and display in the card layout.  In this example template: 

<img src="{Image}" title="{Name}" alt="{Name}"
style="float: left; height: 150px; width: 119px; padding: 8px;">

The URL for each senator's photo is in the Image column. The minimal tag for putting the image in the template is:

<img src="{Image}">

However, the photos natively are much larger than business card size, requiring use of style="height: 150 px; width: 119px;" to display at a reasonable size. (If you own the images, speed content loading time by making the file only as big as needed.) Now we have:

<img src="{Image}" style="height: 150 px; width: 119px;">

Two additions help control the relative position of the image to the rest of the text: float: left and padding 8 px.

The title attribute gives the senator's name in a tool-tip on rolling over the image. The alt attribute shows the senator's name when the image doesn't load or for screenreaders. 

Visit a website such as w3schools.com for more HTML and CSS tips.

Now share!

Ready to share your senator business cards? Maybe you'd like to filter for all the Independent senators, or all the senators for a given class, and share that list by e-mail or embed them in a website.

Your options depend on whether you're a viewer or an owner of the data.

Rapid start

You created your own tab as a viewer of our demo data. To share, grab a link to the filtered card layout using Tools > Publish.

For your own

As the owner of the table, you can click Share to share the document with anyone you like. They will see the updated table and tabs you've created. You can move the card layout tab to the front to be the default view of the document. Editors will be able to change the document too.Viewers will be able to play with it but not change it (like the Rapid start folks did with our demo data).  

You can also grab a link using Tools > Publish too. 

When you're ready to share your business cards by e-mail or embed them in a website, read Share and publish with the New look.