Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Periodic Table

  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Periodic Table

    Does anyone know how I can make a Perioidic Table with HTML and CSS?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Have you tried to do this yourself? Its just a big table with a mix of colspan and rowspan.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by MindTheGap View Post
    Does anyone know how I can make a Perioidic Table with HTML and CSS?
    yes, I know, I allready tell you,

    http://oesxyl.atwebpages.com/index.html

    if this is not a homework assigment, you can get the page from my site, or tell me what do you need and I help you.

    PS: I guess, you have a comunication problem,

    best regards

  • #4
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    The problem with a periodic table is the transition elements. What you could try is to have a hidden div (containing another table) within one cell (say La to Lu). When this cell is clicked the div is displayed. You will need a close button in your div as well.

    Style:
    Code:
    .transition { display: hide; }
    Table fragment:
    Code:
    <td><a onclick="document.getElementById('LaLu').style.display='block';">Lanthanum to Lutectium</a></td>
    Transition element sub-table:
    Code:
    <div class="transition" id="LaLu">
    <table><tr><td>Lanthanum</td> . . . <td>Lutectium</td></tr></table>
    <h4 onclick="document.getElementById('LaLu').style.display='hide';">Close</h4>
    </div>
    J


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •