diff --git a/src/demo-app/table/custom-table/custom-table.ts b/src/demo-app/table/custom-table/custom-table.ts
index b61d79f4d9b..59173bc6008 100644
--- a/src/demo-app/table/custom-table/custom-table.ts
+++ b/src/demo-app/table/custom-table/custom-table.ts
@@ -8,7 +8,7 @@
 
 import {Component, ViewChild} from '@angular/core';
 import {MatSort, MatTableDataSource} from '@angular/material';
-import {Element, ELEMENT_DATA} from '../element-data';
+import {PeriodicElement, ELEMENT_DATA} from '../element-data';
 
 
 @Component({
@@ -18,9 +18,9 @@ import {Element, ELEMENT_DATA} from '../element-data';
 })
 export class CustomTableDemo {
   columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
-  simpleTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
-  wrapperTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
-  getWeight = (data: Element) => '~' + data.weight;
+  simpleTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  wrapperTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  getWeight = (data: PeriodicElement) => '~' + data.weight;
 
   @ViewChild('simpleTableSort') simpleTableSort: MatSort;
   @ViewChild('wrapperTableSort') wrapperTableSort: MatSort;
diff --git a/src/demo-app/table/data-input-table/data-input-table.ts b/src/demo-app/table/data-input-table/data-input-table.ts
index 5729689a0a2..e20c5bd19e0 100644
--- a/src/demo-app/table/data-input-table/data-input-table.ts
+++ b/src/demo-app/table/data-input-table/data-input-table.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
-import {Element, ELEMENT_DATA} from '../element-data';
+import {PeriodicElement, ELEMENT_DATA} from '../element-data';
 import {CdkTable} from '@angular/cdk/table';
 import {MatRadioChange, MatTable, MatTableDataSource} from '@angular/material';
 import {Observable} from 'rxjs';
@@ -28,7 +28,7 @@ export class DataInputTableDemo {
   matTableDataSource = new MatTableDataSource(this.data);
 
   trackByStrategy: TrackByStrategy = 'reference';
-  trackBy = (index: number, item: Element) => {
+  trackBy = (index: number, item: PeriodicElement) => {
     switch (this.trackByStrategy) {
       case 'position': return item.position;
       case 'reference': return item;
@@ -36,10 +36,12 @@ export class DataInputTableDemo {
     }
   }
 
-  dataSource: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
+  dataSource: DataSource<PeriodicElement> |
+      Observable<PeriodicElement[]> |
+      PeriodicElement[] | null = this.data;
 
-  @ViewChild(CdkTable) cdkTable: CdkTable<Element>;
-  @ViewChild(MatTable) matTable: MatTable<Element>;
+  @ViewChild(CdkTable) cdkTable: CdkTable<PeriodicElement>;
+  @ViewChild(MatTable) matTable: MatTable<PeriodicElement>;
 
   changeInput(e: MatRadioChange) {
     this.inputType = e.value;
diff --git a/src/demo-app/table/dynamic-columns/dynamic-columns.ts b/src/demo-app/table/dynamic-columns/dynamic-columns.ts
index 7adccaaad2f..39e1d453705 100644
--- a/src/demo-app/table/dynamic-columns/dynamic-columns.ts
+++ b/src/demo-app/table/dynamic-columns/dynamic-columns.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {Element, ELEMENT_DATA} from '../element-data';
+import {PeriodicElement, ELEMENT_DATA} from '../element-data';
 
 @Component({
   moduleId: module.id,
@@ -16,7 +16,7 @@ import {Element, ELEMENT_DATA} from '../element-data';
 export class DynamicColumnsDemo {
   definedColumns = ['name', 'weight', 'symbol', 'position'];
   columnsToDisplay = this.definedColumns.slice();
-  dataSource: Element[] = ELEMENT_DATA.slice();
+  dataSource: PeriodicElement[] = ELEMENT_DATA.slice();
 
   addColumn() {
     const randomColumn = Math.floor(Math.random() * 4);
diff --git a/src/demo-app/table/element-data.ts b/src/demo-app/table/element-data.ts
index 8c6394ad4a1..169d19a0ae1 100644
--- a/src/demo-app/table/element-data.ts
+++ b/src/demo-app/table/element-data.ts
@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export interface Element {
+export interface PeriodicElement {
   position: number;
   name: string;
   weight: number;
   symbol: string;
 }
 
-export const ELEMENT_DATA: Element[] = [
+export const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
diff --git a/src/demo-app/table/expandable-rows/expandable-rows.ts b/src/demo-app/table/expandable-rows/expandable-rows.ts
index 260822cfc08..96cd8b147a1 100644
--- a/src/demo-app/table/expandable-rows/expandable-rows.ts
+++ b/src/demo-app/table/expandable-rows/expandable-rows.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
-import {Element, ELEMENT_DATA} from 'table/element-data';
+import {PeriodicElement, ELEMENT_DATA} from 'table/element-data';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 
@@ -48,7 +48,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 export class ExpandableRowsDemo {
   dataSource = new MatTableDataSource(ELEMENT_DATA.slice());
   columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
-  expandedElement: Element;
+  expandedElement: PeriodicElement;
 
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatPaginator) paginator: MatPaginator;
diff --git a/src/demo-app/table/mat-table-data-source/mat-table-data-source.ts b/src/demo-app/table/mat-table-data-source/mat-table-data-source.ts
index 88bdd857953..8f9b69632ae 100644
--- a/src/demo-app/table/mat-table-data-source/mat-table-data-source.ts
+++ b/src/demo-app/table/mat-table-data-source/mat-table-data-source.ts
@@ -8,7 +8,7 @@
 
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
-import {Element, ELEMENT_DATA} from '../element-data';
+import {PeriodicElement, ELEMENT_DATA} from '../element-data';
 import {fromEvent} from 'rxjs';
 
 @Component({
@@ -21,7 +21,7 @@ import {fromEvent} from 'rxjs';
 })
 export class MatTableDataSourceDemo {
   columns = ['name', 'weight', 'symbol', 'position'];
-  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
   // Add button that lets you override the filter predicate with a strict name match
   originalFilterPredicate = this.dataSource.filterPredicate;
@@ -41,7 +41,7 @@ export class MatTableDataSourceDemo {
   toggleFilterPredicate() {
     this.useOverrideFilterPredicate = !this.useOverrideFilterPredicate;
     this.dataSource.filterPredicate = this.useOverrideFilterPredicate ?
-        (d: Element, filter: string) => d.name.indexOf(filter) != -1 :
+        (d: PeriodicElement, filter: string) => d.name.indexOf(filter) != -1 :
         this.originalFilterPredicate;
   }
 }
diff --git a/src/demo-app/table/table-demo.ts b/src/demo-app/table/table-demo.ts
index 702a9cce802..eefea87a5a0 100644
--- a/src/demo-app/table/table-demo.ts
+++ b/src/demo-app/table/table-demo.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {Element, ELEMENT_DATA} from './element-data';
+import {PeriodicElement, ELEMENT_DATA} from './element-data';
 
 @Component({
   moduleId: module.id,
@@ -26,5 +26,5 @@ import {Element, ELEMENT_DATA} from './element-data';
 })
 export class TableDemo {
   columns = ['name', 'weight', 'symbol', 'position'];
-  dataSource: Element[] = ELEMENT_DATA.slice();
+  dataSource: PeriodicElement[] = ELEMENT_DATA.slice();
 }
diff --git a/src/demo-app/table/when-rows/when-rows.ts b/src/demo-app/table/when-rows/when-rows.ts
index 4ce53d65e5b..faba99c0f15 100644
--- a/src/demo-app/table/when-rows/when-rows.ts
+++ b/src/demo-app/table/when-rows/when-rows.ts
@@ -16,6 +16,7 @@ export interface DemoDataObject {
 }
 
 @Component({
+  selector: 'when-rows-demo',
   moduleId: module.id,
   templateUrl: 'when-rows.html',
 })
diff --git a/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css
new file mode 100644
index 00000000000..f0d18e4f1d1
--- /dev/null
+++ b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css
@@ -0,0 +1,10 @@
+/**
+ * Add basic flex styling so that the cells evenly space themselves in the row.
+ */
+cdk-row, cdk-header-row, cdk-footer-row {
+  display: flex;
+}
+
+cdk-cell, cdk-header-cell, cdk-footer-cell {
+  flex: 1;
+}
diff --git a/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html
new file mode 100644
index 00000000000..4f8f17a938b
--- /dev/null
+++ b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html
@@ -0,0 +1,28 @@
+<cdk-table [dataSource]="dataSource">
+  <!-- Position Column -->
+  <ng-container cdkColumnDef="position">
+    <cdk-header-cell *cdkHeaderCellDef> No. </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.position}} </cdk-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container cdkColumnDef="name">
+    <cdk-header-cell *cdkHeaderCellDef> Name </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.name}} </cdk-cell>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container cdkColumnDef="weight">
+    <cdk-header-cell *cdkHeaderCellDef> Weight </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.weight}} </cdk-cell>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container cdkColumnDef="symbol">
+    <cdk-header-cell *cdkHeaderCellDef> Symbol </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.symbol}} </cdk-cell>
+  </ng-container>
+
+  <cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
+  <cdk-row *cdkRowDef="let row; columns: displayedColumns;"></cdk-row>
+</cdk-table>
diff --git a/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
new file mode 100644
index 00000000000..b117d4dee4e
--- /dev/null
+++ b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
@@ -0,0 +1,55 @@
+import {DataSource} from '@angular/cdk/collections';
+import {Component} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+
+/**
+ * @title Basic use of `<cdk-table>` (uses display flex)
+ */
+@Component({
+  selector: 'cdk-table-basic-flex-example',
+  styleUrls: ['cdk-table-basic-flex-example.css'],
+  templateUrl: 'cdk-table-basic-flex-example.html',
+})
+export class CdkTableBasicFlexExample {
+  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new ExampleDataSource();
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+/**
+ * Data source to provide what data should be rendered in the table. Note that the data source
+ * can retrieve its data in any way. In this case, the data source is provided a reference
+ * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
+ * the underlying data. Instead, it only needs to take the data and send the table exactly what
+ * should be rendered.
+ */
+export class ExampleDataSource extends DataSource<PeriodicElement> {
+  /** Stream of data that is provided to the table. */
+  data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
+
+  /** Connect function called by the table to retrieve one stream containing the data to render. */
+  connect(): Observable<PeriodicElement[]> {
+    return this.data;
+  }
+
+  disconnect() {}
+}
diff --git a/src/material-examples/cdk-table-basic/cdk-table-basic-example.css b/src/material-examples/cdk-table-basic/cdk-table-basic-example.css
index 527bb2a3861..edaff91eb1a 100644
--- a/src/material-examples/cdk-table-basic/cdk-table-basic-example.css
+++ b/src/material-examples/cdk-table-basic/cdk-table-basic-example.css
@@ -1,39 +1,7 @@
-/* Structure */
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
+table {
+  width: 100%;
 }
 
-/*
- * Styles to make the demo's cdk-table match the material design spec
- * https://material.io/guidelines/components/data-tables.html
- */
-.example-table {
-  flex: 1 1 auto;
-  overflow: auto;
-  max-height: 500px;
-}
-
-.example-header-row, .example-row {
-  display: flex;
-  border-bottom: 1px solid #ccc;
-  align-items: center;
-  height: 32px;
-  padding: 0 8px;
-}
-
-.example-cell, .example-header-cell {
-  flex: 1;
-}
-
-.example-header-cell {
-  font-size: 12px;
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.example-cell {
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.87);
+th {
+  text-align: left;
 }
diff --git a/src/material-examples/cdk-table-basic/cdk-table-basic-example.html b/src/material-examples/cdk-table-basic/cdk-table-basic-example.html
index df20a4d1ed6..2664fe00125 100644
--- a/src/material-examples/cdk-table-basic/cdk-table-basic-example.html
+++ b/src/material-examples/cdk-table-basic/cdk-table-basic-example.html
@@ -1,36 +1,28 @@
-<div class="example-container mat-elevation-z8">
-  <cdk-table #table [dataSource]="dataSource" class="example-table">
-    <!--- Note that these columns can be defined in any order.
-          The actual rendered columns are set as a property on the row definition" -->
+<table cdk-table [dataSource]="dataSource">
+  <!-- Position Column -->
+  <ng-container cdkColumnDef="position">
+    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- ID Column -->
-    <ng-container cdkColumnDef="userId">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container cdkColumnDef="name">
+    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Progress Column -->
-    <ng-container cdkColumnDef="progress">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container cdkColumnDef="weight">
+    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container cdkColumnDef="userName">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container cdkColumnDef="symbol">
+    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
 
-    <!-- Color Column -->
-    <ng-container cdkColumnDef="color">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"
-                [style.color]="row.color">
-        {{row.color}}
-      </cdk-cell>
-    </ng-container>
-
-    <cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
-    <cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
-  </cdk-table>
-</div>
+  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
+  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts b/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts
index fe7338fb8ec..57ca60603a9 100644
--- a/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts
+++ b/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts
@@ -11,61 +11,29 @@ import {BehaviorSubject, Observable} from 'rxjs';
   templateUrl: 'cdk-table-basic-example.html',
 })
 export class CdkTableBasicExample {
-  displayedColumns = ['userId', 'userName', 'progress', 'color'];
-  exampleDatabase = new ExampleDatabase();
-  dataSource: ExampleDataSource | null;
-
-  ngOnInit() {
-    this.dataSource = new ExampleDataSource(this.exampleDatabase);
-  }
+  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new ExampleDataSource();
 }
 
-/** Constants used to fill up our data base. */
-const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
-  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
-const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
-  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
-  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
-
-export interface UserData {
-  id: string;
+export interface PeriodicElement {
   name: string;
-  progress: string;
-  color: string;
+  position: number;
+  weight: number;
+  symbol: string;
 }
 
-/** An example database that the data source uses to retrieve data for the table. */
-export class ExampleDatabase {
-  /** Stream that emits whenever the data has been modified. */
-  dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
-  get data(): UserData[] { return this.dataChange.value; }
-
-  constructor() {
-    // Fill up the database with 100 users.
-    for (let i = 0; i < 100; i++) { this.addUser(); }
-  }
-
-  /** Adds a new user to the database. */
-  addUser() {
-    const copiedData = this.data.slice();
-    copiedData.push(this.createNewUser());
-    this.dataChange.next(copiedData);
-  }
-
-  /** Builds and returns a new User. */
-  private createNewUser() {
-    const name =
-        NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
-        NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
-
-    return {
-      id: (this.data.length + 1).toString(),
-      name: name,
-      progress: Math.round(Math.random() * 100).toString(),
-      color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
-    };
-  }
-}
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
 
 /**
  * Data source to provide what data should be rendered in the table. Note that the data source
@@ -74,14 +42,13 @@ export class ExampleDatabase {
  * the underlying data. Instead, it only needs to take the data and send the table exactly what
  * should be rendered.
  */
-export class ExampleDataSource extends DataSource<any> {
-  constructor(private _exampleDatabase: ExampleDatabase) {
-    super();
-  }
+export class ExampleDataSource extends DataSource<PeriodicElement> {
+  /** Stream of data that is provided to the table. */
+  data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
-  connect(): Observable<UserData[]> {
-    return this._exampleDatabase.dataChange;
+  connect(): Observable<PeriodicElement[]> {
+    return this.data;
   }
 
   disconnect() {}
diff --git a/src/material-examples/table-basic-flex/table-basic-flex-example.css b/src/material-examples/table-basic-flex/table-basic-flex-example.css
new file mode 100644
index 00000000000..1922e7ffa3a
--- /dev/null
+++ b/src/material-examples/table-basic-flex/table-basic-flex-example.css
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/src/material-examples/table-basic-flex/table-basic-flex-example.html b/src/material-examples/table-basic-flex/table-basic-flex-example.html
new file mode 100644
index 00000000000..e0316d41f2c
--- /dev/null
+++ b/src/material-examples/table-basic-flex/table-basic-flex-example.html
@@ -0,0 +1,28 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
\ No newline at end of file
diff --git a/src/material-examples/table-basic-flex/table-basic-flex-example.ts b/src/material-examples/table-basic-flex/table-basic-flex-example.ts
new file mode 100644
index 00000000000..f75072d0e74
--- /dev/null
+++ b/src/material-examples/table-basic-flex/table-basic-flex-example.ts
@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Basic use of `<mat-table>` (uses display flex)
+ */
+@Component({
+  selector: 'table-basic-flex-example',
+  styleUrls: ['table-basic-flex-example.css'],
+  templateUrl: 'table-basic-flex-example.html',
+})
+export class TableBasicFlexExample {
+  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
diff --git a/src/material-examples/table-basic/table-basic-example.css b/src/material-examples/table-basic/table-basic-example.css
index bbfba32dec4..1922e7ffa3a 100644
--- a/src/material-examples/table-basic/table-basic-example.css
+++ b/src/material-examples/table-basic/table-basic-example.css
@@ -1,7 +1,3 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  max-height: 500px;
-  min-width: 300px;
-  overflow: auto;
+table {
+  width: 100%;
 }
diff --git a/src/material-examples/table-basic/table-basic-example.html b/src/material-examples/table-basic/table-basic-example.html
index 7531ffcc5db..054cb0c6ae4 100644
--- a/src/material-examples/table-basic/table-basic-example.html
+++ b/src/material-examples/table-basic/table-basic-example.html
@@ -1,34 +1,33 @@
-<div class="example-container mat-elevation-z8">
-  <table mat-table #table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-    <!--- Note that these columns can be defined in any order.
-          The actual rendered columns are set as a property on the row definition" -->
+  <!--- Note that these columns can be defined in any order.
+        The actual rendered columns are set as a property on the row definition" -->
 
-    <!-- Position Column -->
-    <ng-container matColumnDef="position">
-      <th mat-header-cell *matHeaderCellDef> No. </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-    </ng-container>
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="weight">
-      <th mat-header-cell *matHeaderCellDef> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-</div>
diff --git a/src/material-examples/table-basic/table-basic-example.ts b/src/material-examples/table-basic/table-basic-example.ts
index c1176481836..3042613e2d5 100644
--- a/src/material-examples/table-basic/table-basic-example.ts
+++ b/src/material-examples/table-basic/table-basic-example.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Basic table
+ * @title Basic use of `<table mat-table>`
  */
 @Component({
   selector: 'table-basic-example',
@@ -13,14 +13,14 @@ export class TableBasicExample {
   dataSource = ELEMENT_DATA;
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@@ -31,14 +31,4 @@ const ELEMENT_DATA: Element[] = [
   {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
-  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
-  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
-  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
-  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
-  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
-  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
-  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
-  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
-  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
 ];
diff --git a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.css b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.css
new file mode 100644
index 00000000000..879b4295bb1
--- /dev/null
+++ b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.css
@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+}
+
+button {
+  margin: 16px 8px;
+}
diff --git a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html
new file mode 100644
index 00000000000..0463410e596
--- /dev/null
+++ b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html
@@ -0,0 +1,13 @@
+<button mat-raised-button (click)="addColumn()"> Add column </button>
+<button mat-raised-button (click)="removeColumn()"> Remove column </button>
+<button mat-raised-button (click)="shuffle()"> Shuffle </button>
+
+<table mat-table [dataSource]="data" class="mat-elevation-z8">
+  <ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
+    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
+</table>
diff --git a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
new file mode 100644
index 00000000000..107226fc60a
--- /dev/null
+++ b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
@@ -0,0 +1,59 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Table dynamically changing the columns displayed
+ */
+@Component({
+  selector: 'table-dynamic-columns-example',
+  styleUrls: ['table-dynamic-columns-example.css'],
+  templateUrl: 'table-dynamic-columns-example.html',
+})
+export class TableDynamicColumnsExample {
+  definedColumns = ['name', 'weight', 'symbol', 'position'];
+  columnsToDisplay = this.definedColumns.slice();
+  data: PeriodicElement[] = ELEMENT_DATA;
+
+  addColumn() {
+    const randomColumn = Math.floor(Math.random() * this.definedColumns.length);
+    this.columnsToDisplay.push(this.definedColumns[randomColumn]);
+  }
+
+  removeColumn() {
+    if (this.columnsToDisplay.length) {
+      this.columnsToDisplay.pop();
+    }
+  }
+
+  shuffle() {
+    let currentIndex = this.columnsToDisplay.length;
+    while (0 !== currentIndex) {
+      let randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
+
+      // Swap
+      let temp = this.columnsToDisplay[currentIndex];
+      this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex];
+      this.columnsToDisplay[randomIndex] = temp;
+    }
+  }
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
diff --git a/src/material-examples/table-filtering/table-filtering-example.css b/src/material-examples/table-filtering/table-filtering-example.css
index 67230469c15..2d9da922800 100644
--- a/src/material-examples/table-filtering/table-filtering-example.css
+++ b/src/material-examples/table-filtering/table-filtering-example.css
@@ -1,15 +1,6 @@
 /* Structure */
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  max-height: 500px;
-  overflow: auto;
-}
-
-.example-header {
-  min-height: 64px;
-  padding: 8px 24px 0;
+table {
+  width: 100%;
 }
 
 .mat-form-field {
diff --git a/src/material-examples/table-filtering/table-filtering-example.html b/src/material-examples/table-filtering/table-filtering-example.html
index cc52968033a..f0e4e00af65 100644
--- a/src/material-examples/table-filtering/table-filtering-example.html
+++ b/src/material-examples/table-filtering/table-filtering-example.html
@@ -1,37 +1,33 @@
-<div class="example-container mat-elevation-z8">
-  <div class="example-header">
-    <mat-form-field>
-      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-    </mat-form-field>
-  </div>
+<mat-form-field>
+  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+</mat-form-field>
 
-  <table mat-table #table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-    <!-- Position Column -->
-    <ng-container matColumnDef="position">
-      <th mat-header-cell *matHeaderCellDef> No. </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-    </ng-container>
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="weight">
-      <th mat-header-cell *matHeaderCellDef> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-</div>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/material-examples/table-filtering/table-filtering-example.ts b/src/material-examples/table-filtering/table-filtering-example.ts
index 3e9ccbb26fc..4b4800b1afd 100644
--- a/src/material-examples/table-filtering/table-filtering-example.ts
+++ b/src/material-examples/table-filtering/table-filtering-example.ts
@@ -20,14 +20,14 @@ export class TableFilteringExample {
   }
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
   {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
-  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
-  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
-  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
-  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
-  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
-  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
-  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
-  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
-  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
 ];
diff --git a/src/material-examples/table-footer-row/table-footer-row-example.css b/src/material-examples/table-footer-row/table-footer-row-example.css
index 8b311e6d363..de64c6e5369 100644
--- a/src/material-examples/table-footer-row/table-footer-row-example.css
+++ b/src/material-examples/table-footer-row/table-footer-row-example.css
@@ -1,11 +1,7 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  max-height: 500px;
-  min-width: 300px;
+table {
+  width: 100%;
 }
 
-.mat-table {
-  overflow: auto;
-  max-height: 500px;
+tr.mat-footer-row {
+  font-weight: bold;
 }
diff --git a/src/material-examples/table-footer-row/table-footer-row-example.html b/src/material-examples/table-footer-row/table-footer-row-example.html
index 780ba28bd50..c5faed4ef69 100644
--- a/src/material-examples/table-footer-row/table-footer-row-example.html
+++ b/src/material-examples/table-footer-row/table-footer-row-example.html
@@ -1,22 +1,19 @@
-<div class="example-container mat-elevation-z8">
-  <mat-table [dataSource]="transactions">
+<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
+  <!-- Item Column -->
+  <ng-container matColumnDef="item">
+    <th mat-header-cell *matHeaderCellDef> Item </th>
+    <td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
+    <td mat-footer-cell *matFooterCellDef> Total </td>
+  </ng-container>
 
-    <!-- Item Column -->
-    <ng-container matColumnDef="item">
-      <mat-header-cell *matHeaderCellDef> Item </mat-header-cell>
-      <mat-cell *matCellDef="let transaction"> {{transaction.item}} </mat-cell>
-      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-    </ng-container>
+  <!-- Cost Column -->
+  <ng-container matColumnDef="cost">
+    <th mat-header-cell *matHeaderCellDef> Cost </th>
+    <td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
+    <td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
+  </ng-container>
 
-    <!-- Cost Column -->
-    <ng-container matColumnDef="cost">
-      <mat-header-cell *matHeaderCellDef> Cost </mat-header-cell>
-      <mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </mat-cell>
-      <mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </mat-footer-cell>
-    </ng-container>
-
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-    <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-  </mat-table>
-</div>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+</table>
diff --git a/src/material-examples/table-http/table-http-example.css b/src/material-examples/table-http/table-http-example.css
index c2445f18dfd..256f8028b84 100644
--- a/src/material-examples/table-http/table-http-example.css
+++ b/src/material-examples/table-http/table-http-example.css
@@ -1,19 +1,16 @@
 /* Structure */
 .example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
   position: relative;
-  max-height: 500px;
+}
+
+.example-table-container {
+  position: relative;
+  max-height: 400px;
   overflow: auto;
 }
 
-.example-header {
-  min-height: 64px;
-  display: flex;
-  align-items: center;
-  padding-left: 24px;
-  font-size: 20px;
+table {
+  width: 100%;
 }
 
 .example-loading-shade {
diff --git a/src/material-examples/table-http/table-http-example.html b/src/material-examples/table-http/table-http-example.html
index 68799c356a1..499928578d9 100644
--- a/src/material-examples/table-http/table-http-example.html
+++ b/src/material-examples/table-http/table-http-example.html
@@ -7,44 +7,40 @@
     </div>
   </div>
 
-  <table mat-table #table [dataSource]="dataSource" class="example-table"
-             matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
+  <div class="example-table-container">
 
-    <!--- Note that these columns can be defined in any order.
-          The actual rendered columns are set as a property on the row definition" -->
+    <table mat-table [dataSource]="data" class="example-table"
+           matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
+      <!-- Number Column -->
+      <ng-container matColumnDef="number">
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let row">{{ row.number }}</td>
+      </ng-container>
 
-    <!-- Number Column -->
-    <ng-container matColumnDef="number">
-      <th mat-header-cell *matHeaderCellDef>#</th>
-      <td mat-cell *matCellDef="let row">{{ row.number }}</td>
-    </ng-container>
+      <!-- Title Column -->
+      <ng-container matColumnDef="title">
+        <th mat-header-cell *matHeaderCellDef>Title</th>
+        <td mat-cell *matCellDef="let row">{{ row.title }}</td>
+      </ng-container>
 
-    <!-- Title Column -->
-    <ng-container matColumnDef="title">
-      <th mat-header-cell *matHeaderCellDef>Title</th>
-      <td mat-cell *matCellDef="let row">{{ row.title }}</td>
-    </ng-container>
+      <!-- State Column -->
+      <ng-container matColumnDef="state">
+        <th mat-header-cell *matHeaderCellDef>State</th>
+        <td mat-cell *matCellDef="let row">{{ row.state }}</td>
+      </ng-container>
 
-    <!-- State Column -->
-    <ng-container matColumnDef="state">
-      <th mat-header-cell *matHeaderCellDef>State</th>
-      <td mat-cell *matCellDef="let row">{{ row.state }}</td>
-    </ng-container>
+      <!-- Created Column -->
+      <ng-container matColumnDef="created">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true">
+          Created
+        </th>
+        <td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
+      </ng-container>
 
-    <!-- Created Column -->
-    <ng-container matColumnDef="created">
-      <th mat-header-cell *matHeaderCellDef
-                       mat-sort-header
-                       disableClear="true">
-        Created
-      </th>
-      <td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
-    </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-
-  <mat-paginator [length]="resultsLength" [pageSize]="30">
-  </mat-paginator>
+  <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
 </div>
diff --git a/src/material-examples/table-http/table-http-example.ts b/src/material-examples/table-http/table-http-example.ts
index f3aee68d1ed..9475078b244 100644
--- a/src/material-examples/table-http/table-http-example.ts
+++ b/src/material-examples/table-http/table-http-example.ts
@@ -1,6 +1,6 @@
 import {HttpClient} from '@angular/common/http';
-import {AfterViewInit, Component, ViewChild} from '@angular/core';
-import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MatPaginator, MatSort} from '@angular/material';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {catchError, map, startWith, switchMap} from 'rxjs/operators';
 
@@ -12,10 +12,10 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
   styleUrls: ['table-http-example.css'],
   templateUrl: 'table-http-example.html',
 })
-export class TableHttpExample implements AfterViewInit {
+export class TableHttpExample implements OnInit {
   displayedColumns = ['created', 'state', 'number', 'title'];
   exampleDatabase: ExampleHttpDao | null;
-  dataSource = new MatTableDataSource();
+  data: GithubIssue[] = [];
 
   resultsLength = 0;
   isLoadingResults = true;
@@ -26,7 +26,7 @@ export class TableHttpExample implements AfterViewInit {
 
   constructor(private http: HttpClient) {}
 
-  ngAfterViewInit() {
+  ngOnInit() {
     this.exampleDatabase = new ExampleHttpDao(this.http);
 
     // If the user changes the sort order, reset back to the first page.
@@ -54,7 +54,7 @@ export class TableHttpExample implements AfterViewInit {
           this.isRateLimitReached = true;
           return observableOf([]);
         })
-      ).subscribe(data => this.dataSource.data = data);
+      ).subscribe(data => this.data = data);
   }
 }
 
diff --git a/src/material-examples/table-native-only/table-native-only-example.css b/src/material-examples/table-native-only/table-native-only-example.css
index e69de29bb2d..1922e7ffa3a 100644
--- a/src/material-examples/table-native-only/table-native-only-example.css
+++ b/src/material-examples/table-native-only/table-native-only-example.css
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/src/material-examples/table-native-only/table-native-only-example.html b/src/material-examples/table-native-only/table-native-only-example.html
index 0570e323e00..a46f5bf62c3 100644
--- a/src/material-examples/table-native-only/table-native-only-example.html
+++ b/src/material-examples/table-native-only/table-native-only-example.html
@@ -1,4 +1,4 @@
-<table class="mat-table">
+<table class="mat-table mat-elevation-z8">
   <thead>
     <tr class="mat-header-row">
       <th class="mat-header-cell"> No. </th>
diff --git a/src/material-examples/table-overview/table-overview-example.css b/src/material-examples/table-overview/table-overview-example.css
index 1819289dc64..369cbec26d5 100644
--- a/src/material-examples/table-overview/table-overview-example.css
+++ b/src/material-examples/table-overview/table-overview-example.css
@@ -1,14 +1,5 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  max-height: 500px;
-  overflow: auto;
-}
-
-.example-header {
-  min-height: 64px;
-  padding: 8px 24px 0;
+table {
+  width: 100%;
 }
 
 .mat-form-field {
@@ -16,3 +7,6 @@
   width: 100%;
 }
 
+td, th {
+  width: 25%;
+}
diff --git a/src/material-examples/table-overview/table-overview-example.html b/src/material-examples/table-overview/table-overview-example.html
index c9eb65ec1df..20620a8ef31 100644
--- a/src/material-examples/table-overview/table-overview-example.html
+++ b/src/material-examples/table-overview/table-overview-example.html
@@ -1,11 +1,8 @@
-<div class="example-header">
-  <mat-form-field>
-    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-  </mat-form-field>
-</div>
-
-<div class="example-container mat-elevation-z8">
+<mat-form-field>
+  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+</mat-form-field>
 
+<div class="mat-elevation-z8">
   <table mat-table [dataSource]="dataSource" matSort>
 
     <!-- ID Column -->
diff --git a/src/material-examples/table-pagination/table-pagination-example.css b/src/material-examples/table-pagination/table-pagination-example.css
index 8e156acffca..1922e7ffa3a 100644
--- a/src/material-examples/table-pagination/table-pagination-example.css
+++ b/src/material-examples/table-pagination/table-pagination-example.css
@@ -1,8 +1,3 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  max-height: 500px;
-  overflow: auto;
+table {
+  width: 100%;
 }
-
diff --git a/src/material-examples/table-pagination/table-pagination-example.html b/src/material-examples/table-pagination/table-pagination-example.html
index bfacadd5a42..a410ebbe9d0 100644
--- a/src/material-examples/table-pagination/table-pagination-example.html
+++ b/src/material-examples/table-pagination/table-pagination-example.html
@@ -1,5 +1,5 @@
-<div class="example-container mat-elevation-z8">
-  <table mat-table #table [dataSource]="dataSource">
+<div class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource">
 
     <!-- Position Column -->
     <ng-container matColumnDef="position">
@@ -29,9 +29,5 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <mat-paginator #paginator
-                 [pageSize]="10"
-                 [pageSizeOptions]="[5, 10, 20]"
-                 [showFirstLastButtons]="true">
-  </mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
 </div>
diff --git a/src/material-examples/table-pagination/table-pagination-example.ts b/src/material-examples/table-pagination/table-pagination-example.ts
index 2d10a411f4a..b10934df098 100644
--- a/src/material-examples/table-pagination/table-pagination-example.ts
+++ b/src/material-examples/table-pagination/table-pagination-example.ts
@@ -11,7 +11,7 @@ import {MatPaginator, MatTableDataSource} from '@angular/material';
 })
 export class TablePaginationExample {
   displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
@@ -20,14 +20,14 @@ export class TablePaginationExample {
   }
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
diff --git a/src/material-examples/table-row-context/table-row-context-example.css b/src/material-examples/table-row-context/table-row-context-example.css
new file mode 100644
index 00000000000..1922e7ffa3a
--- /dev/null
+++ b/src/material-examples/table-row-context/table-row-context-example.css
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/src/material-examples/table-row-context/table-row-context-example.html b/src/material-examples/table-row-context/table-row-context-example.html
new file mode 100644
index 00000000000..3f3d776e5ac
--- /dev/null
+++ b/src/material-examples/table-row-context/table-row-context-example.html
@@ -0,0 +1,46 @@
+<table mat-table [dataSource]="data" class="mat-elevation-z8">
+  <!-- Index Column -->
+  <ng-container matColumnDef="$implicit">
+    <th mat-header-cell *matHeaderCellDef> $implicit </th>
+    <td mat-cell *matCellDef="let data"> {{data}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="index">
+    <th mat-header-cell *matHeaderCellDef> index </th>
+    <td mat-cell *matCellDef="let index = index"> {{index}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="count">
+    <th mat-header-cell *matHeaderCellDef> count </th>
+    <td mat-cell *matCellDef="let count = count"> {{count}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="first">
+    <th mat-header-cell *matHeaderCellDef> first </th>
+    <td mat-cell *matCellDef="let first = first"> {{first}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="last">
+    <th mat-header-cell *matHeaderCellDef> last </th>
+    <td mat-cell *matCellDef="let last = last"> {{last}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="even">
+    <th mat-header-cell *matHeaderCellDef> even </th>
+    <td mat-cell *matCellDef="let even = even"> {{even}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="odd">
+    <th mat-header-cell *matHeaderCellDef> odd </th>
+    <td mat-cell *matCellDef="let odd = odd"> {{odd}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/material-examples/table-row-context/table-row-context-example.ts b/src/material-examples/table-row-context/table-row-context-example.ts
new file mode 100644
index 00000000000..7799dd0547e
--- /dev/null
+++ b/src/material-examples/table-row-context/table-row-context-example.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Table showing each row context properties.
+ */
+@Component({
+  selector: 'table-row-context-example',
+  styleUrls: ['table-row-context-example.css'],
+  templateUrl: 'table-row-context-example.html',
+})
+export class TableRowContextExample {
+  displayedColumns = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd'];
+  data: string[] = ['one', 'two', 'three', 'four', 'five'];
+}
diff --git a/src/material-examples/table-selection/table-selection-example.css b/src/material-examples/table-selection/table-selection-example.css
index fd79d00fecb..1922e7ffa3a 100644
--- a/src/material-examples/table-selection/table-selection-example.css
+++ b/src/material-examples/table-selection/table-selection-example.css
@@ -1,11 +1,3 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  max-height: 500px;
-  min-width: 300px;
-  overflow: auto;
-}
-
-.mat-column-select {
-  overflow: visible;
+table {
+  width: 100%;
 }
diff --git a/src/material-examples/table-selection/table-selection-example.html b/src/material-examples/table-selection/table-selection-example.html
index 31ef280abff..a22d56266de 100644
--- a/src/material-examples/table-selection/table-selection-example.html
+++ b/src/material-examples/table-selection/table-selection-example.html
@@ -1,49 +1,47 @@
-<div class="example-container mat-elevation-z8">
-  <table mat-table #table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-    <!-- Checkbox Column -->
-    <ng-container matColumnDef="select">
-      <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox (change)="$event ? masterToggle() : null"
-                      [checked]="selection.hasValue() && isAllSelected()"
-                      [indeterminate]="selection.hasValue() && !isAllSelected()">
-        </mat-checkbox>
-      </th>
-      <td mat-cell *matCellDef="let row">
-        <mat-checkbox (click)="$event.stopPropagation()"
-                      (change)="$event ? selection.toggle(row) : null"
-                      [checked]="selection.isSelected(row)">
-        </mat-checkbox>
-      </td>
-    </ng-container>
+  <!-- Checkbox Column -->
+  <ng-container matColumnDef="select">
+    <th mat-header-cell *matHeaderCellDef>
+      <mat-checkbox (change)="$event ? masterToggle() : null"
+                    [checked]="selection.hasValue() && isAllSelected()"
+                    [indeterminate]="selection.hasValue() && !isAllSelected()">
+      </mat-checkbox>
+    </th>
+    <td mat-cell *matCellDef="let row">
+      <mat-checkbox (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null"
+                    [checked]="selection.isSelected(row)">
+      </mat-checkbox>
+    </td>
+  </ng-container>
 
-    <!-- Position Column -->
-    <ng-container matColumnDef="position">
-      <th mat-header-cell *matHeaderCellDef> No. </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-    </ng-container>
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="weight">
-      <th mat-header-cell *matHeaderCellDef> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"
-             (click)="selection.toggle(row)">
-    </tr>
-  </table>
-</div>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+      (click)="selection.toggle(row)">
+  </tr>
+</table>
diff --git a/src/material-examples/table-selection/table-selection-example.ts b/src/material-examples/table-selection/table-selection-example.ts
index 88e72ead84c..cee88c81e7c 100644
--- a/src/material-examples/table-selection/table-selection-example.ts
+++ b/src/material-examples/table-selection/table-selection-example.ts
@@ -12,8 +12,8 @@ import {SelectionModel} from '@angular/cdk/collections';
 })
 export class TableSelectionExample {
   displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
-  selection = new SelectionModel<Element>(true, []);
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  selection = new SelectionModel<PeriodicElement>(true, []);
 
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
@@ -30,14 +30,14 @@ export class TableSelectionExample {
   }
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@@ -48,14 +48,4 @@ const ELEMENT_DATA: Element[] = [
   {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
-  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
-  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
-  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
-  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
-  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
-  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
-  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
-  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
-  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
 ];
diff --git a/src/material-examples/table-sorting/table-sorting-example.css b/src/material-examples/table-sorting/table-sorting-example.css
index 342b186a366..11b40820cb5 100644
--- a/src/material-examples/table-sorting/table-sorting-example.css
+++ b/src/material-examples/table-sorting/table-sorting-example.css
@@ -1,11 +1,7 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  overflow: auto;
-  max-height: 500px;
+table {
+  width: 100%;
 }
 
-.mat-header-cell.mat-sort-header-sorted {
+th.mat-sort-header-sorted {
   color: black;
 }
diff --git a/src/material-examples/table-sorting/table-sorting-example.html b/src/material-examples/table-sorting/table-sorting-example.html
index 00a89980eb0..977bed07a81 100644
--- a/src/material-examples/table-sorting/table-sorting-example.html
+++ b/src/material-examples/table-sorting/table-sorting-example.html
@@ -1,31 +1,29 @@
-<div class="example-container mat-elevation-z8">
-  <table mat-table #table [dataSource]="dataSource" matSort>
+<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
-    <!-- Position Column -->
-    <ng-container matColumnDef="position">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-    </ng-container>
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="weight">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-</div>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/material-examples/table-sorting/table-sorting-example.ts b/src/material-examples/table-sorting/table-sorting-example.ts
index d7c5a196c2f..23b611e3135 100644
--- a/src/material-examples/table-sorting/table-sorting-example.ts
+++ b/src/material-examples/table-sorting/table-sorting-example.ts
@@ -20,14 +20,14 @@ export class TableSortingExample {
   }
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
   {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
-  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
-  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
-  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
-  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
-  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
-  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
-  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
-  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
-  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
 ];