System to describe the chemical formulas for WEB.

Periodic table

This section discusses the principles of generation of the periodic tables with different properties. In addition, given a few interesting examples.
CharChem system provides a relatively easy way to display the periodic table in the HTML-document.
You can use the service generation to manipulate the settings online.

List of examples

How to display a table

The easiest way to generate a table is shown in the following simple scripting code that is highlighted in blue.
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src=""></script>
  <link rel="stylesheet" type="text/css" href="" />
<h1>Periodic Table</h1>
<div id="PeriodicSysTable"></div>
<script type="text/javascript">
  var dstElem = document.getElementById('PeriodicSysTable');
  if (dstElem) dstElem.innerHTML=ChemSys.drawTable();
Click to show or hide results
For a start, a good result. But in most cases need to make any changes or additions. It is quite possible. Next we look at the various settings that control the formation of the table.

Example of modifications

Suppose you want to draw something like this table, as in Wikipedia to describe a chemical element. These are:
  1. The table should be wide, that is, the actinides and lanthanides are in the general table.
  2. Colors of cells depends on the chemical properties of elements (alkali metals, halogens, etc.)
  3. The cell displays only the symbol of the element. Name, number and weight are not needed.
Here is the code used to display a table. (Only the part that is inside the tag body)
<style type="text/css">
  #Table2 .name, #Table2 .mass, #Table2 .number {display:none;}
  #Table2 .id { font-size:12px; font-weight:100;}
<div id="Table2"></div>
<script type="text/javascript">
  var rules2 = Object.assign({}, ChemSys.TblRules.Wide);
  rules2.category = ChemSys.TblCategory.props;
  var dst2 = document.getElementById('Table2');
  if (dst2) dst2.innerHTML = ChemSys.drawTable(rules2);
Click to show or hide results

Let us consider an example, starting from the lower lines. As can be seen, the function ChemSys.drawTable takes an set of properties that describe the table.

The system CharChem already has several predefined sets of properties. Here's the list:
ChemSys.TblRules.Std The default. This is an 18-column periodic table layout, which has come to be referred to as the common or standard form.
ChemSys.TblRules.Wide The wide periodic table incorporates the lanthanides and the actinides, rather than separating them from the main body of the table.
ChemSys.TblRules.Short Short form or Mendeleev-style, which omits groups 3–12 by placing their elements into the main groups.
In this example, we used the scheme Wide (task 1). But not in pure form, but slightly modified.:
  var rules2 = Object.assign({}, ChemSys.TblRules.Wide);
  rules2.category = ChemSys.TblCategory.props;
Here we changed the table of categories of elements (task 2). By default, the table of categories for blocks ChemSys.TblCategory.block. But we use the table of categories in chemical properties - ChemSys.TblCategory.props. Both of these tables are also prepared beforehand, but you can use your table of categories.
Note that the rules are obtained using the Object.assign() function. This means that the rules3 is a copy of the original rules. All changes made to the rules3 will not affect the original rules.
Task 3 solved using CSS. In block <style>, we mentioned that you want to hide number, name and weight of the item on the table that is shown in the block Table2. Symbol of the element to display a thin font with a height of 12 pixels.

Modification of the output data. Interactivity

In the previous examples we got a table in a static image. But quite often it is desirable that the table had any interactivity. For example, in Wikipedia, each entry in the table is a reference to the relevant article.
To get such a result, we need to program the output of the contents of the table cells in a special way.
Repeat the conditions of the previous example, and assign the link to each element. In addition, the extra information will not hide with CSS, but simply exclude from the output.

To understand this example, already require some knowledge of html and JavaScript.
<style type="text/css">
  #Table3 .id  { font-size:12px; font-weight:100; text-decoration: none;}
  #Table3 .id:hover { text-decoration: underline;}
<div id="Table3"></div>
<script type="text/javascript">
  var rules3 = Object.assign({}, ChemSys.TblRules.Wide);
  rules3.category = ChemSys.TblCategory.props;
  rules3.cellFields = [drawId];
  // Function that is called to render the Latin character of each element
  function drawId(elem){
	  // get the name of the element from the dictionary, using the symbol of the element
	  var name = ChemSys.lang(;
	  // additional information about the category of the element
	  var cat = ChemSys.findCategory(rules3.category,;
	  return ChemSys.drawTag('a', {'class': 'id', href: '#elem_', title: name+', '+cat},;

  var dst3 = document.getElementById('Table3');
  if (dst3) dst3.innerHTML = ChemSys.drawTable(rules3);
Click to show or hide results
When you hover over an item, there is a signature. Symbols of the elements are references.

  1. First, unlike the previous example, in block style. You no longer need to hide classes number, name and weight, as this information is excluded from the output. But there is a new rule ":hover", which makes element symbol to the underlined when hovered (as in Wikipedia).
  2. This is followed by the creation of a special functional, responsible for the output of each element in the table:
    rules3.cellFields = [drawId];
    [drawId] means that will display only the symbol of the element. Full option that the original setting, looks like: ["number", "id", "name", "mass"].
  3. Then follows the description of the drawId function, which should form the html code of the chemical symbol. Source version of html-code looks like this:
    <div class="id">He<div>
    In our example it will display the following:
    <a class="id" href="#elem_He" title="Helium, Noble gases">He</a>
    Use of an internal dictionary of CharChem to extract the name by using ChemSys.lang(
    To get the category to which the item, use the function ChemSys.findCategory(rules3.category,
    And the line
    return ChemSys.drawTag('a', {'class': 'id', href: '#elem_', title: name+', '+cat},;
    forms the necessary html-code. Here the ChemSys.drawTag function is simply used for the convenience of generating the desired html..
Basically, here we have a pretty good opportunity for such a small package.

Additional examples

Print names in several languages

We pose the problem as follows: to display a table with the names of several languages. Main title to be displayed in the language that is currently in the browser. If the main title is displayed not in English, the second name to be displayed in English, in blue letters. The third title in Latin, in italics.

To solve this problem it is necessary include the library of internationalization. Like this:
<script type="text/javascript" src=""></script>

Now look at how to handle tools internationalization. To determine the current value of the browser language use ChemSys.navLang. Current language to use: ChemSys.curLang. To check the support of the language, using the expression: langID in ChemSys.Dict.

To generate the required data, we need to redefine the cellFields list with two additional functions. There are included two CSS-class, modifying the appearance: name.en - blue, - italics.

Click to show or hide source code

Small table, such as in Wikipedia

Usually each Wikipedia article related to the chemical elements, has a small table, allows you to quickly open the article on other elements.
Click to show or hide source code

That's quite a significant block of styles that provide the desired appearance of the table and the supporting elements.
The general structure of html is a table with id="SmallTbl", in which the two lines.
The top row has id="SmallTblHdr". It displays the name of the current script element and links to the next.
The second row has id="SmallTblMain" and contains the name and symbol of the current element. And here is a mini-table. She also formed a script. The cellFields is used to modify the properties of the cells.
Interactivity is provided by code
onclick="return setElem('He')"

The table of the custom shape. Janet left-step periodic table

Wikipedia has an alternative version of the table entitled "Janet left-step periodic table". In order to paint a table, you must fully describe the new rule. The table consists of 33 columns (of which the first contains information about the electronic layers) and 9 lines (the latter is used for the legend).
Janet left-step periodic table
Click to show or hide source code

Electronegativity table

Given: for most elements are set to electronegativity as numbers in the range of 0.5 to 4.
  1. We want to display the chemical elements in a table with the number, symbol and values of electronegativity.
  2. Given a set of intervals from 1 to 3.1 in increments of 0.3. Each set the background color. Cells should be painted in the appropriate colors.
  3. To display the name of the item when the cursor on the symbol of the element.
  4. Print the legend as a color scale.
  1. We using the clone of basic rule "Std". Create "CellRender" functional to form the html-code cells.
  2. Create a special table of categories corresponding to a given interval - ElNegCategory. The color of each interval is given in the form of CSS-class
    .elneg-bkN { background-color: #xxx;}
    The value of N will be calculated from the electronegativity by the formula:
    N = min( max( floor[(ElNeg-1)*10/3]+1, 0), 8).
  3. Chemical name will be displayed with the attribute title. To do this, you need to override cellFields to include the idDraw function to draw the symbol of the chemical element with a tooltip on hover. To do this, override the id for the functional elnegRules.cellRender. In addition, the functional is extended by function "elneg", which will print the value of electronegativity for each element.
  4. The legend will be drawn on top of the table with the element <div class="legend"> with absolute positioning.
Electronegativity of the Elements
Click to show or hide source code
Programmers may need more information about the implementation details of the CharChem library. To do this, you can refer to the source code available on github:
End of article