HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
69
1
anychart.onDocumentReady(function () {
2
3
// set stage
4
var stage = anychart.graphics.create("container");
5
6
// create table
7
var table = anychart.standalones.table();
8
9
// set table content
10
table.contents([
11
[
12
null,
13
"2003 Sales",
14
"2004 Sales"
15
],[
16
"January",
17
"$10000",
18
"$12000"
19
],[
20
"February",
21
"$12000",
22
"$15000"
23
],[
24
"March",
25
"$18000",
26
"$16000"
27
],[
28
"April",
29
"$11000",
30
"$15000"
31
],
32
[
33
"May",
34
"$9000",
35
"$14000"
36
]
37
]);
38
39
table.getRow(0).height(40); // Get first row and set height 40px
40
table.getCol(0).width(70); // Get first column and set width 70 px
41
42
// set table background color
43
table.cellFill("#FFFFE0");
44
45
// set style for table borders
46
table.cellBorder(
47
"gray", // Border color
48
2, // Border thickness
49
"5 2" // Dash and gap length
50
);
51
52
// adjust border of the cell from the second column and second row
53
table.getCell(1,1).border({
54
keys: ["red"], // Set color
55
thickness: 3 // Set border thickness
56
});
57
58
// adjust border of the cell from second column and fourth row
59
table.getCell(3, 1).border({
60
keys: ["red"], // Set leaner color
61
thickness: 3 // Set thickness
62
});
63
64
// position text in the center of each cell
65
table.vAlign("middle").hAlign("center");
66
67
// set table container and initiate draw
68
table.container(stage).draw();
69
});