Table of Elements
How do I make an table of elements?
What is a table of elements? How do you make a table of elements? This script and codes were developed by Emilio Incerto on 15 November 2022, Tuesday.
Table of Elements Previews
Table of Elements - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Table of Elements</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body { background: linear-gradient(#dbeaf8, #dbeaf8); color: #222; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}
.wrapper { width: 1090px; margin: 30px auto; position: relative;
}
.main ul { padding: 0; margin: 0;
}
.main li { width: 56px; height: 60px; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); position: relative; font-size: 18px; float: left; padding: 0 2px; margin: 1px; cursor: pointer; padding-top: 20px; overflow: hidden; transition: all .2s ease-in; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.main li span { display: block; line-height: 1; font-size: 9px; color: black; padding-top: 9px;
}
/*1. Write 9 separate selectors for each of the types from class type-0 to class type-9.
// Give them each a unique background colour
2. Write 4 separate selectors for each of the categories from cat-0 to cat-3 and give each it's own text color
3. Select all list items and create a new style that adds a pseudo before style that contains the content of the current element's attribute: "data-atomic-number". Change this element's font size and position inside of it's parent at the top left.
4. Select all list items and create a new style that adds a pseudo after style that contains the content of the current element's attribute: "data-mass. Change this element's font size and position inside of it's parent at the top right.
5. Select all li elements that are empty and give them a darkgrey background.
6. When hovering over any empty list element force it to use the 'no-drop' mouse arrow, not the hand.
- If you don't know which css property to use here, visit https://www.w3schools.com/cssref/pr_class_cursor.asp
7. Select every list item with a class that begins with the characters 'type-' and give it a single pixel wide outline that uses a half transparent blue colour
8. When a user hovers over the table set all elements to half opacity
9. In one declaration ensure that when a user hovers over an element that both all empty elements and the hovered element always remain at full opacity, overriding #8
10. In one declaration select the first letter of both the text in the element name and in the element's span tag and change it to capitals
*/
@media (max-width: 800px) { /* All Mid-Sized Tablet Rules belong inside this breakpoint 11. Reduce the size of the container 12. Hide the atomic number and mass of all elements
*/
}
@media (max-width: 620px) {
/* All Small-Sized Mobile Rules Go inside this breakpoint
13. Ensure all elements become full width 100%
12. Ensure the atomic number and mass of all elements appear alongside the element name
*/
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <html> <head></head> <body>
<div class="wrapper"> <ul class="main"> <!-- row 1 --> <ul> <li element-name="" atomic-number="1" atomic-mass="1.0079" class="type-1 cat-2">h<span>hydrogen</span></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li element-name="helium" atomic-number="2" atomic-mass="4.0026" class="type-2 cat-2">he<span>helium</span></li> </ul> <!-- row 2 -->
<ul> <li element-name="lithium" atomic-number="3" atomic-mass="6.941" class="type-3 cat-0">li<span>lithium</span></li> <li element-name="beryllium" atomic-number="4" atomic-mass="9.0122" class="type-4 cat-0">be<span>beryllium</span></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li element-name="boron" atomic-number="5" atomic-mass="10.811" class="type-5 cat-0">b<span>boron</span></li> <li element-name="carbon" atomic-number="6" atomic-mass="12.011" class="type-5 cat-0">c<span>carbon</span></li> <li element-name="nitrogen" atomic-number="7" atomic-mass="14.007" class="type-5 cat-2">n<span>nitrogen</span></li> <li element-name="oxygen" atomic-number="8" atomic-mass="15.999" class="type-5 cat-2">o<span>oxygen</span></li> <li element-name="fluorine" atomic-number="9" atomic-mass="18.998" class="type-5 cat-2">f<span>fluorine</span></li> <li element-name="neon" atomic-number="10" atomic-mass="20.180" class="type-2 cat-2">ne<span>neon</span></li> </ul> <!-- row 3 -->
<ul> <li element-name="sodium" atomic-number="11" atomic-mass="22.990" class="type-3 cat-0">na<span>sodium</span></li> <li element-name="magnesium" atomic-number="12" atomic-mass="24.305" class="type-4 cat-0">mg<span>magnesium</span></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li element-name="aluminium" atomic-number="13" atomic-mass="26.982" class="type-7 cat-0">al<span>aluminium</span></li> <li element-name="silicon" atomic-number="14" atomic-mass="28.086" class="type-5 cat-0">si<span>silicon</span></li> <li element-name="phosphorus" atomic-number="15" atomic-mass="30.974" class="type-5 cat-0">p<span>phosphorus</span></li> <li element-name="sulfur" atomic-number="16" atomic-mass="32.065" class="type-5 cat-0">s<span>sulfur</span></li> <li element-name="chlorine" atomic-number="17" atomic-mass="35.453" class="type-5 cat-2">cl<span>chlorine</span></li> <li element-name="argon" atomic-number="18" atomic-mass="39.948" class="type-2 cat-2">ar<span>argon</span></li> </ul> <!-- row 4 -->
<ul> <li element-name="potassium" atomic-number="19" atomic-mass="39.098" class="type-3 cat-0">k<span>potassium</span></li> <li element-name="calcium" atomic-number="20" atomic-mass="40.078" class="type-4 cat-0">ca<span>calcium</span></li> <li element-name="scandium" atomic-number="21" atomic-mass="44.956" class="type-6 cat-0">sc<span>scandium</span></li> <li element-name="titanium" atomic-number="22" atomic-mass="47.867" class="type-6 cat-0">ti<span>titanium</span></li> <li element-name="vanadium" atomic-number="23" atomic-mass="50.942" class="type-6 cat-0">v<span>vanadium</span></li> <li element-name="chromium" atomic-number="24" atomic-mass="51.996" class="type-6 cat-0">cr<span>chromium</span></li> <li element-name="manganese" atomic-number="25" atomic-mass="54.938" class="type-6 cat-0">mn<span>manganese</span></li> <li element-name="iron" atomic-number="26" atomic-mass="55.845" class="type-6 cat-0">fe<span>iron</span></li> <li element-name="cobalt" atomic-number="27" atomic-mass="58.933" class="type-6 cat-0">co<span>cobalt</span></li> <li element-name="nickel" atomic-number="28" atomic-mass="58.693" class="type-6 cat-0">ni<span>nickel</span></li> <li element-name="copper" atomic-number="29" atomic-mass="63.546" class="type-6 cat-0">cu<span>copper</span></li> <li element-name="zinc" atomic-number="30" atomic-mass="65.39" class="type-7 cat-0">zn<span>zinc</span></li> <li element-name="gallium" atomic-number="31" atomic-mass="69.723" class="type-7 cat-0">ga<span>gallium</span></li> <li element-name="germanium" atomic-number="32" atomic-mass="72.64" class="type-7 cat-0">ge<span>germanium</span></li> <li element-name="arsenic" atomic-number="33" atomic-mass="74.922" class="type-5 cat-0">as<span>arsenic</span></li> <li element-name="selenium" atomic-number="34" atomic-mass="78.96" class="type-5 cat-0">se<span>selenium</span></li> <li element-name="bromine" atomic-number="35" atomic-mass="79.904" class="type-5 cat-1">br<span>bromine</span></li> <li element-name="krypton" atomic-number="36" atomic-mass="83.80" class="type-2 cat-2">kr<span>krypton</span></li> </ul> <!-- row 5 -->
<ul> <li element-name="rubidium" atomic-number="37" atomic-mass="85.468" class="type-3 cat-0">rb<span>rubidium</span></li> <li element-name="strontium" atomic-number="38" atomic-mass="87.62" class="type-4 cat-0">sr<span>strontium</span></li> <li element-name="yttrium" atomic-number="39" atomic-mass="88.906" class="type-6 cat-0">y<span>yttrium</span></li> <li element-name="zirconium" atomic-number="40" atomic-mass="91.224" class="type-6 cat-0">zr<span>zirconium</span></li> <li element-name="niobium" atomic-number="41" atomic-mass="92.906" class="type-6 cat-0">nb<span>niobium</span></li> <li element-name="molybdenum" atomic-number="42" atomic-mass="95.94" class="type-6 cat-0">mo<span>molybdenum</span></li> <li element-name="technetium" atomic-number="43" atomic-mass="(96)" class="type-6 cat-0">tc<span>technetium</span></li> <li element-name="ruthenium" atomic-number="44" atomic-mass="101.07" class="type-6 cat-0">ru<span>ruthenium</span></li> <li element-name="rhodium" atomic-number="45" atomic-mass="102.91" class="type-6 cat-0">rh<span>rhodium</span></li> <li element-name="palladium" atomic-number="46" atomic-mass="106.42" class="type-6 cat-0">pd<span>palladium</span></li> <li element-name="silver" atomic-number="47" atomic-mass="107.87" class="type-6 cat-0">ag<span>silver</span></li> <li element-name="cadmium" atomic-number="48" atomic-mass="112.41" class="type-7 cat-0">cd<span>cadmium</span></li> <li element-name="indium" atomic-number="49" atomic-mass="114.82" class="type-7 cat-0">in<span>indium</span></li> <li element-name="tin" atomic-number="50" atomic-mass="118.71" class="type-7 cat-0">sn<span>tin</span></li> <li element-name="antimony" atomic-number="51" atomic-mass="121.76" class="type-7 cat-0">sb<span>antimony</span></li> <li element-name="tellurium" atomic-number="52" atomic-mass="127.60" class="type-5 cat-0">te<span>tellurium</span></li> <li element-name="iodine" atomic-number="53" atomic-mass="126.90" class="type-5 cat-0">i<span>iodine</span></li> <li element-name="xenon" atomic-number="54" atomic-mass="131.29" class="type-2 cat-2">xe<span>xenon</span></li> </ul> <!-- row 6 -->
<ul> <li element-name="caesium" atomic-number="55" atomic-mass="132.91" class="type-3 cat-0">cs<span>caesium</span></li> <li element-name="barium" atomic-number="56" atomic-mass="137.33" class="type-4 cat-0">ba<span>barium</span></li> <li element-name="lanthanide" atomic-number="57-71" class="type-8">la-lu<span>lanthanide</span></li> <li element-name="hafnium" atomic-number="72" atomic-mass="178.49" class="type-6 cat-0">hf<span>hafnium</span></li> <li element-name="tantalum" atomic-number="73" atomic-mass="180.95" class="type-6 cat-0">ta<span>tantalum</span></li> <li element-name="tungsten" atomic-number="74" atomic-mass="183.64" class="type-6 cat-0">w<span>tungsten</span></li> <li element-name="rhenium" atomic-number="75" atomic-mass="186.21" class="type-6 cat-0">re<span>rhenium</span></li> <li element-name="osmium" atomic-number="76" atomic-mass="190.23" class="type-6 cat-0">os<span>osmium</span></li> <li element-name="iridium" atomic-number="77" atomic-mass="192.22" class="type-6 cat-0">ir<span>iridium</span></li> <li element-name="platinum" atomic-number="78" atomic-mass="195.08" class="type-6 cat-0">pt<span>platinum</span></li> <li element-name="gold" atomic-number="79" atomic-mass="196.97" class="type-6 cat-0">au<span>gold</span></li> <li element-name="mercury" atomic-number="80" atomic-mass="200.59" class="type-7 cat-1">hg<span>mercury</span></li> <li element-name="thallium" atomic-number="81" atomic-mass="204.38" class="type-7 cat-0">tl<span>thallium</span></li> <li element-name="lead" atomic-number="82" atomic-mass="207.2" class="type-7 cat-0">pb<span>lead</span></li> <li element-name="bismuth" atomic-number="83" atomic-mass="208.96" class="type-7 cat-0">bi<span>bismuth</span></li> <li element-name="polonium" atomic-number="84" atomic-mass="(209)" class="type-7 cat-0">po<span>polonium</span></li> <li element-name="astatine" atomic-number="85" atomic-mass="(210)" class="type-5 cat-0">at<span>astatine</span></li> <li element-name="radon" atomic-number="86" atomic-mass="(222)" class="type-2 cat-2">rn<span>radon</span></li> </ul> <!-- row 7 -->
<ul> <li element-name="francium" atomic-number="87" atomic-mass="(223)" class="type-3 cat-0">fr<span>francium</span></li> <li element-name="radium" atomic-number="88" atomic-mass="(226)" class="type-4 cat-0">ra<span>radium</span></li> <li element-name="actinide" atomic-number="89-103" class="type-9">ac-lr<span>actinide</span></li> <li element-name="rutherfodum" atomic-number="104" atomic-mass="(261)" class="type-6 cat-3">rf<span>rutherfodum</span></li> <li element-name="dubnium" atomic-number="105" atomic-mass="(262)" class="type-6 cat-3">db<span>dubnium</span></li> <li element-name="seaborgium" atomic-number="106" atomic-mass="(266)" class="type-6 cat-3">sg<span>seaborgium</span></li> <li element-name="bohrium" atomic-number="107" atomic-mass="(264)" class="type-6 cat-3">bh<span>bohrium</span></li> <li element-name="hassium" atomic-number="108" atomic-mass="(277)" class="type-6 cat-3">hs<span>hassium</span></li> <li element-name="meitnerium" atomic-number="109" atomic-mass="(268)" class="type-6 cat-3">mt<span>meitnerium</span></li> <li element-name="damstadium" atomic-number="110" atomic-mass="(281)" class="type-6 cat-3">ds<span>damstadium</span></li> <li element-name="roentgenium" atomic-number="111" atomic-mass="(272)" class="type-6 cat-3">rg<span>roentgenium</span></li> <li element-name="ununbium" atomic-number="112" atomic-mass="(285)" class="type-7 cat-3">uub<span>ununbium</span></li> <li element-name="ununtrium" atomic-number="113" atomic-mass="(285)" class="type-7 cat-3">uut<span>ununtrium</span></li> <li element-name="ununquadium" atomic-number="114" atomic-mass="(289)" class="type-7 cat-3">uuq<span>ununquadium</span></li> <li element-name="ununpentium" atomic-number="115" atomic-mass="(289)" class="type-7 cat-3">uup<span>ununpentium</span></li> <li element-name="ununhexium" atomic-number="115" atomic-mass="(289)" class="type-7 cat-3">uuh<span>ununhexium</span></li> <li element-name="ununseptum" atomic-number="115" atomic-mass="(289)" class="type-0 cat-3">uus<span>ununseptum</span></li> <li element-name="ununoctium" atomic-number="115" atomic-mass="(289)" class="type-2 cat-3">uuo<span>ununoctium</span></li> </ul> </ul>
</div> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</body>
</html>
Table of Elements - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background: linear-gradient(#dbeaf8, #dbeaf8); color: #222; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}
.wrapper { width: 1090px; margin: 30px auto; position: relative;
}
.main ul { padding: 0; margin: 0;
}
.main li { width: 56px; height: 60px; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); position: relative; font-size: 18px; float: left; padding: 0 2px; margin: 1px; cursor: pointer; padding-top: 20px; overflow: hidden; transition: all .2s ease-in; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.main li span { display: block; line-height: 1; font-size: 9px; color: black; padding-top: 9px;
}
/*1. Write 9 separate selectors for each of the types from class type-0 to class type-9.
// Give them each a unique background colour
2. Write 4 separate selectors for each of the categories from cat-0 to cat-3 and give each it's own text color
3. Select all list items and create a new style that adds a pseudo before style that contains the content of the current element's attribute: "data-atomic-number". Change this element's font size and position inside of it's parent at the top left.
4. Select all list items and create a new style that adds a pseudo after style that contains the content of the current element's attribute: "data-mass. Change this element's font size and position inside of it's parent at the top right.
5. Select all li elements that are empty and give them a darkgrey background.
6. When hovering over any empty list element force it to use the 'no-drop' mouse arrow, not the hand.
- If you don't know which css property to use here, visit https://www.w3schools.com/cssref/pr_class_cursor.asp
7. Select every list item with a class that begins with the characters 'type-' and give it a single pixel wide outline that uses a half transparent blue colour
8. When a user hovers over the table set all elements to half opacity
9. In one declaration ensure that when a user hovers over an element that both all empty elements and the hovered element always remain at full opacity, overriding #8
10. In one declaration select the first letter of both the text in the element name and in the element's span tag and change it to capitals
*/
@media (max-width: 800px) { /* All Mid-Sized Tablet Rules belong inside this breakpoint 11. Reduce the size of the container 12. Hide the atomic number and mass of all elements
*/
}
@media (max-width: 620px) {
/* All Small-Sized Mobile Rules Go inside this breakpoint
13. Ensure all elements become full width 100%
12. Ensure the atomic number and mass of all elements appear alongside the element name
*/
}
| Developer | Emilio Incerto |
| Username | eincerto |
| Uploaded | November 15, 2022 |
| Rating | 3 |
| Size | 6,068 Kb |
| Views | 20,240 |
Do you need developer help for Table of Elements?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Emilio Incerto (eincerto) Script Codes
| Name | Size |
| Using Media Queries | 1,847 Kb |
| A Pen by Emilio Incerto | 91,533 Kb |
| Whack A Gopher | 3,191 Kb |
| Animate the Elements | 4,161 Kb |
| Bootstrap Fluid Container Starter Code | 1,717 Kb |
| JQuery Reference and Animations | 4,880 Kb |
| Animate a City | 5,760 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Magnus 3 | ARocketfish | 7,944 Kb |
| Flat UI - Checkbox FIX | ARS | 2,663 Kb |
| Simple DevTools | Deegill | 2,511 Kb |
| Flat design iframe | Damienpm | 1,819 Kb |
| Portfolio Landing Page | FDfranklin | 3,585 Kb |
| C.Rowe Button | Brownerd | 2,473 Kb |
| Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
| Sample Profile Screen | OurDailyBread | 5,375 Kb |
| Canvas Fireworks | Jackrugile | 6,200 Kb |
| RPG Style Text Dialogue | Odylic | 2,635 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!