Tips To Control HTML Tables

mathlayer® HTML tables can be controlled through the options argument or by assigning some css code.

Default format

⎘ 
Xvalues = (1:6)'
% defining columns

y1 = rand(30,1)
y2 = rand(30,1)*10
Purple = y1(1:6)
Orange = y2(1:6)
Green = y1(7:12)
Yellow = y2(7:12)
Pink = y1(13:18)
T = table(Xvalues,Purple,Orange,Green,Yellow,Pink)
% defining T table


table2html(T)	
% calling table2html function to generate an HTML table with T data
1 0.811766 4.25948 0.303011 2.88378 0.527006
2 0.217022 7.57885 0.548494 5.34664 0.990633
3 0.85322 9.12744 0.780236 3.18089 0.252596
4 0.608837 8.85264 0.606147 4.38819 0.0964452
5 0.944835 8.05401 0.98513 3.69844 0.0389623
6 0.098877 5.18277 0.00547903 5.39925 0.450229

Specifying format through options argument

⎘ 
o1 = struct	
% initializing options struct

o1.tableVN = true
o1.styleTable = 'width:100%;border-collapse: collapse;font:12px arial;'
o1.styleTabletr = 'border:1px solid black;'
o1.styleTableth = 'border:1px solid black;background-color: #f2f2f2;'
o1.styleTabletd = 'font-size:0.8em;'

table2html(T,o1)
Xvalues Purple Orange Green Yellow Pink
1 0.862196 5.11116 0.822818 8.55156 0.179707
2 0.909801 6.63228 0.298027 6.81172 0.206247
3 0.0237386 6.50687 0.936699 0.367267 0.0542865
4 0.831371 9.50581 0.0771774 1.42525 0.213062
5 0.881551 6.42048 0.313963 5.57712 0.687743
6 0.978125 7.46918 0.95856 8.93339 0.229886

Specifying format using css

⎘ 
o=struct 		
% initializing options struct

o.show = false


% defining table format

style = '<style>	
table#tab {
width:450px;
border-collapse: collapse;
font:12px arial;
}
table#tab tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>'


% calling html function to define css

st = html(style,o)	

o1 = o 			
% initializing table options

o1.tableVN = true
o1.tableid = 'tab'

tr = table2html(T,o1)	

assemble({tr,st})	
% final graph
Xvalues Purple Orange Green Yellow Pink
1 0.0330135 6.60131 0.314113 6.0046 0.924846
2 0.865286 5.55987 0.283462 0.030411 0.57775
3 0.788491 7.5043 0.515048 5.17643 0.0260178
4 0.593864 1.37613 0.828765 1.56609 0.390906
5 0.393339 1.60977 0.67156 3.40479 0.304672
6 0.190432 7.29274 0.930293 4.09162 0.635204

Related functions

table2html | html