treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Creating tables with DIV

  • Ive tried every combination of div tags, css, etc that I know of, and I still cannot get it to do what I want.

    Heres the deal.. Ive got a page. Its a table done 20%,60%,20%. In the right 20%, Ive got another table. This table is set up as the following:


    <table width=100% border=1>
    <tr width=100%><td width=100%><center><b>Server Status:</b></center></td></tr>
    <tr width=100%><td width=100%><div id=serverstatus name=serverstatus></div></td></tr></table>


    The contents of that div tag are inserted using AjaxUpdate. Its set to refresh every 15 seconds. What Im doing could very easily be done with tables, but the browser will not render the table if its inserted after the page is created, it must be done before hand. This is not an option. It leaves me with using css and div tags to create the list.

    What Im looking for, is a name aligned to the left of the table, a status (simple UP/DN, may be images later.. would use X and a checkmark, but IE *puke* will not render the checkmark, and that craptastic browser is forced on people here at work.) aligned to the right, and multiple rows of this. Each row separated by an <hr> maybe.


    <align left>Name</align><align right>Status</align>
    <hr size=1 width=100%>
    <align left>Name</align><align right>Status</align>
    <hr size=1 width=100%>
    <align left>Name</align><align right>Status</align>
    <hr size=1 width=100%>
    <align left>Name</align><align right>Status</align>


    If Im unclear or left anything out, let me know.. a bit distracted here at work.

    Thanks.
  • I'm not sure if I follow, but... why don't you put the section in a div with text-align to the right, then make a class for the name and float it left.

    CSS

    div#statusBox {width: 20%; float: right; text-align:right;
    div#statusBox .name {float: left;}


    HTML

    <div id=\"statusBox\">
    <span class=\"name\">Name:</span> Status:
    </div>


    Name will be on the left edge, status on the right.
  • Thank you, that worked.