demo1

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Table</title>

    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <!--BOOTSTRAP CSS-->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- DATATABLES BOOTSTRAP INTEGRATION CSS -->
    <link rel="stylesheet" href="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css">

    <style type="text/css">
        html {
            -webkit-text-size-adjust: none;
        }

        body {
            margin: 0;
            padding: 0;
            font: 14px/1.4 Arial, Helvetica, sans-serif;
            color: black;
        }

        h1 {
            margin: 0 0 6px 0;
            font-size: 20px;
            color: black;
        }

        h2 {
            font-weight: normal;
            color: #666;
            font-size: 14px;
            margin: 0 0 22px 0;
        }

        .footnotes {
            margin-bottom: 20px;
        }

        .footnotes h4 {
            margin: 2px 0 7px 0;
            color: #666;
            font-size: 11px;
        }

.footnotes p,
        .footer p {
            margin: 2px 0 0 0;
            font-size: 11px;
            line-height: 1.3;
            color: #808080;
        }

        a,
        a:link,
        a:visited {
            color: #4774CC;
            text-decoration: none;
        }

        a:hover,
        a:active {
            opacity: 0.7;
        }
        /*custom styles*/
    table {
      width: 100%;
    }
        table,
        th {
            text-align: center;
        }
        /*make odd rows...

JavaScript

//Edit 'key' and 'columns' to connect your spreadsheet

//enter google sheets key here
var key =
  "https://docs.google.com/spreadsheets/d/113QZOTS9JQ1WGfwjwQrOpErUBJTAnaBmdjP0_OjA53c/pubhtml?gid=489792061&single=true";

//"data" refers to the column name with no spaces and no capitals
//punctuation or numbers in your column name
//"title" is the column name you want to appear in the published table
var columns = [{
 "data": "company",
  "title": "Company"
}, {
  "data": "violations",
  "title": "Claims"
}, {
  "data": "total-award",
  "title": "Total Awarded"
}];

$(document).ready(function() {

  function initializeTabletopObject() {
    Tabletop.init({
      key: key,
      callback: function(data, tabletop) {
        writeTable(data); //call up datatables function
      },
      simpleSheet: true,
      debug: false
    });
  }

  initializeTabletopObject();

  function writeTable(data) {
    //select main div and put a table there
    //use bootstrap css to customize table style: http://getbootstrap.com/css/#tables
    $('#graphic').html(
      '<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-condensed table-responsive" id="mySelection"></table>'
    );

    //initialize the DataTable object and put settings in
    $("#mySelection").DataTable({
      "autoWidth": false,
      "data": data,
      "columns": columns,
      "order": [
        [0, "asc"]
      ], //order on second column
      "pagingType": "simple" //no page numbers
        //uncomment these options to simplify your table
        //"paging": false,
        //"searching": false,
        //"info": false
   });
  }
});
//end of writeTable