<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8" />
    <title>SAPUI5 demo</title>
    <script id="sap-ui-bootstrap" 
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
            data-sap-ui-theme="sap_bluecrystal" 
            data-sap-ui-libs="sap.m, sap.ui.layout" 
            data-sap-ui-xx-bindingsyntax="complex" 
            data-sap-ui-resourceroots='{"be.wl.color": "./"}'></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script>
  			var app = new sap.m.App({initialPage:"main"});
  			var page = sap.ui.view({id:"main", viewName:"be.wl.color.views.main", type:sap.ui.core.mvc.ViewType.XML});
  			app.addPage(page);
  			app.placeAt("content");
		</script>
  </head>

  <body class="sapUiBody" id="content"></body>

</html>
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
xmlns:t="sap.ui.table" 
controllerName="be.wl.color.views.main" >  
  <t:Table id="table" visibleRowCount="17" rows="{/data}" >
		<t:columns>
			<t:Column id="col1"  >
				<Label text="Col1"/>
				<t:template>
				    <Text text="{col1}">
				      <customData>
							  <core:CustomData key="colorClass" value="{ path:'col1Color'}" writeToDom="true" />
							</customData>
				    </Text>
				</t:template>
			</t:Column>
			<t:Column id="col2"  >
				<Label text="Col2"/>
				<t:template>
				    <Text text="{col2}">
				      <customData>
							  <core:CustomData key="colorClass" value="{ path:'col2Color'}" writeToDom="true" />
							</customData>
				    </Text>
				</t:template>
			</t:Column>
		</t:columns>
	</t:Table>
</core:View>
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";

    return Controller.extend("be.wl.color.views.main", {
      
      onInit:function(){ 	
        var data = 
        {
          data:[
            {col1:"red cell",col1Color:"red",col2:"orange cell",col2Color:"orange"},
            {col1:"no color cell",col1Color:"",col2:"green",col2Color:"green"}
            ]
        };
        var json = new JSONModel(data);
        this.getView().setModel(json);
      }
    });
});
span[data-colorclass="red"] { 
  background-color:#F00000 !important; 
}
span[data-colorclass="green"] { 
  background-color:#01DF01 !important; 
}
span[data-colorclass="orange"] { 
  background-color:#FA8258 !important; 
}