These elements are usually gases at room temperature but may also become a solid or liquid at certain temperatures. Elements are considered a non-metal if they lack luster, don’t conduct heat or electricity, and are non-malleable.Elements are labeled as a metal if they have luster, are solid at room temperature, conduct heat and electricity, and are malleable and ductile.Keep in mind that hydrogen can be grouped with either the Halogens or the Alkali Metals because of its properties, so it may appear on either side of the table or may be colored differently.You’ll notice that metals occur to the left of the table, while non-metals fall on the right. Fortunately, most periodic tables use color to indicate whether the element is a metal, semi-metal, or non-metal. You can better understand the properties of an element by recognizing what type of element it is. The 'wholeContainer' DIV wraps the entire periodic table.Distinguish between metals, semi-metals, and non-metals. The between the two element blocks puts the Lanthanide block on a new line. The "Lanthanide" div has CSS that positions it left so it lines up vertically correctly. Other than that, the two spry:regions that output the elements are the same. (The 'element DIV' is the Div tag that contains the data for a single element. Other classes are used for positioning things correctly within the element Div. This will allow us to color the different element types using a data reference, since the value of the data reference and the class name are identical. We have a set of class names that are named after the different 'Element_Types'. 'atom_functions.js' contains the 3 extra functions used for filtering the data.Ī big part of the functionality depends on class names.'SpryTooltip.js' provides the code for the Tooltip widget.
![periodic table html code with color periodic table html code with color](https://www.thoughtco.com/thmb/YME9LosCARP6Hhl0NYcwEOaxSGE=/1701x1701/smart/filters:no_upscale()/PeriodicTableallcolor-58b5c82c3df78cdcd8bbb80f.png)
'SpryHTMLDataSet.js' provides the functionality for using HTML tables as data sets.'SpryData.js' is the main Spry functionality file.'atom.css' contains the bulk of the CSS used in the page functionality.Setting up the pageĪs with all Spry pages, we need to attach files so we can get started. Using a HTML table made it easy to add columns for additional data points and to find elements quickly. We also use 'Group', 'Period' and 'Element_Type' for additional functionality, explained later. We use 'No' (atomic number) frequently as a unique ID. The header row is used as the data reference names used throughout the page. The data table, located at the bottom of the page, is a straight HTML table: No The tooltip widget is used with a detailregion to provide additional information when mousing over an element. These class are also used to highlight the different sections of the table via the links. We then use Spry:repeats and regions, plus a good use of CSS classes to position things to they look like a periodic table. HTML tables are easier to create and edit than XML and you can use visual editors to modify them. This allows the page to load faster, allows the page to degrade gracefully and gives search engines content to index. The actual data source table is on the same page.
![periodic table html code with color periodic table html code with color](https://i.ytimg.com/vi/OqlKpJqfFB8/hqdefault.jpg)
The Spry Periodic Table uses an HTML data set to populate the periodic table. Since this demo gets away from our common use patterns, it may serve to expand the ways in which Spry can be used on pages. This document will go through the code section by section and explain the thinking and methods behind the code. The Spry Periodic Table takes advantage of many Spry techniques that the Spry community might be interested in. Spry Periodic Table Case Study Spry Periodic Case study