Here we changed the table of categories of elements (task 2).
By default, the table of categories for blocks MenTblCategoryBlock.
But we use the table of categories in chemical properties - MenTblCategoryProps.
Both of these tables are also prepared beforehand, but you can use your table of categories.
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 do the same, we use the special function that allows the output to modify.
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.

When you hover over an item, there is a signature. Symbols of the elements are references.

Explanation.

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).

The following is a small difference is that the rules we get by using the ChemSys.Clone.
This means that the rules3 is a copy of the original rules. All changes made to the rules3 will not affect the original rules.

This is followed by the creation of a special functional, responsible for the output of each element in the table:rules3.cellRender = new ChemSys.CellRender("id")
The string "id" means that will display only the symbol of the element.
Full option that the original setting, looks like: "number,id,name,mass".

We need to change the existing behavior of the functional. Create a function that forms 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 easyChem to extract the name by using ChemSys.lang(elem.id).
To get the category to which the item, use the function ChemSys.findCategory(rules3.category, elem.id, null).
And the linereturn '<a class="id" href="#elem_' + elem.id + '" title="'
+ name + ', ' +cat+ '">' +elem.id+ '</a>';
forms the necessary html-code.

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="http://easychem.org/download/easychem-lang.js"></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.

For the formation of the desired data will be used functional ChemSys.CellRender with two
additional functions: name_en, name_lat. There are included two CSS-class, modifying the appearance:
name.en - blue, name.lat - italics.

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.
Functional CellRenderer is used to modify the properties of the cells.
Interactivity is provided by codeonclick="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).

Electronegativity table

Given: for most elements are set to electronegativity as numbers in the range of 0.5 to 4.
Tasks:

You want to display the chemical elements in a table with the number, symbol and values of electronegativity.

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.

To display the name of the item when the cursor on the symbol of the element.

Print the legend as a color scale.

Solution:

We using the clone of basic rule "Std".
Create "CellRender" functional to form the html-code cells.

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).

Chemical name will be displayed with the attribute title.
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.
Name matches that specified when creating functional.

The legend will be drawn on top of the table with the element <div class="legend"> with absolute positioning.