Initialization from HTML table

A table can be converted to the grid by dhtmlXGridFromTable command:

Column 1 Column 2
value 11 value 12
value 21 value 22
value 31 value 32
value 41 value 42
value 51 value 52

Automatic initialization.

Initialize automatically from table the class attribute of which is set to "dhtmlxGrid"

The initialization by a CSS class will work only for those tables that were on page at the moment of loading.

Column 1 Column 2
value 11 value 12
value 21 value 22
value 31 value 32
value 41 value 42
value 51 value 52
</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Initialization from HTML table</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
</head>
<body>
	<h1>Initialization Grid from HTML table</h1>
	<p>A table can be converted to the grid by <strong>dhtmlXGridFromTable </strong>command:</p>
	<div><a href="javascript:void(0)" onClick="new dhtmlXGridFromTable('tblToGrid');this.style.display='none';">Convert table to grid</a></div>
	<table id="tblToGrid" name="grid1" gridHeight="auto" style="width:400px" imgpath="../../../codebase/imgs/" border="1" lightnavigation="true">
		<tr>
			<td type="ro">Column 1</td>
			<td>Column 2</td>
		</tr>
		<tr>
			<td>value 11</td>
			<td>value 12</td>
		</tr>
		<tr>
			<td>value 21</td>
			<td>value 22</td>
		</tr>
		<tr>
			<td>value 31</td>
			<td>value 32</td>
		</tr>
		<tr>
			<td>value 41</td>
			<td>value 42</td>
		</tr>
		<tr>
			<td>value 51</td>
			<td>value 52</td>
		</tr>
	</table>
	<br>
	<p>Automatic initialization.</p>
	<p>
		<div>Initialize automatically  from table the class attribute of which is set to "dhtmlxGrid"</div>
	</p>
	<p> The initialization by a CSS class will work only for those tables that were on page at the moment of loading.</p>
	<table class="dhtmlxGrid" gridHeight="auto" name="grid2" imgpath="../../../codebase/imgs/" style="width:400px" lightnavigation="true">
		<tr>
			<td type="ro">Column 1</td>
			<td>Column 2</td>
		</tr>
		<tr>
			<td>value 11</td>
			<td>value 12</td>
		</tr>
		<tr>
			<td>value 21</td>
			<td>value 22</td>
		</tr>
		<tr>
			<td>value 31</td>
			<td>value 32</td>
		</tr>
		<tr>
			<td>value 41</td>
			<td>value 42</td>
		</tr>
		<tr>
			<td>value 51</td>
			<td>value 52</td>
		</tr>
	</table>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.