<!DOCTYPE html>
<html>

<head>
    <!--  meta and ionic css not always necessary -->
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.ionicframework.com/1.2.4/css/ionic.css" />

    <script src="https://code.ionicframework.com/1.2.4/js/ionic.bundle.js"></script>

    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>
</head>

<body ng-app='app' ng-controller="Controller">
    <h2>{{ message }}</h2>

    <!-- Table template 
    <div id="table">
        <div class="row">
            <span class="cell"></span>
            <span class="cell"></span>
            <span class="cell"></span>
        </div>
        <div class="row">
            <span class="cell"></span>
            <span class="cell"></span>
            <span class="cell"></span>
        </div>
        <div class="row">
            <span class="cell"></span>
            <span class="cell"></span>
            <span class="cell"></span>
        </div>
    </div>
    -->

    <div id="table">
        <div class="row">
            <span class="cell">1</span>
            <span class="cell">2</span>
            <span class="cell">3</span>
        </div>
        <div class="row">
            <span class="cell">4</span>
            <span class="cell">5</span>
            <span class="cell">6</span>
        </div>
        <div class="row">
            <span class="cell">7</span>
            <span class="cell">8</span>
            <span class="cell">9</span>
        </div>
    </div>
</body>

</html>
angular.module('app', ['ionic'])

.controller('Controller', function($scope) {
    $scope.message = 'Ionic CSS working if blue';
});
# Ionic css tables

Some references:

- http://vanseodesign.com/css/tables/
- http://www.w3schools.com/html/html_css.asp
/* Ionic sandbox css */

h2 {
    color: blue; // testing
}


/* Tables support */

#caption {
    caption-side: top
}

#caption {
    caption-side: bottom
}

#table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}