SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Fountain Valley, California
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS format of DOM cells. Please help

    The following code add rows and cells nicely in a table.
    I need to apply some css formatting like fontfamily, fontsize, padding, etc., to the cells. Please advise.

    <html>
    <head>
    <script language="JavaScript" type="text/javascript">
    function addRow(id){
    var tbody = document.getElementById
    (id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild(document.createTextNode("efgh"))
    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode("5678"))
    row.appendChild(td1);
    row.appendChild(td2);
    tbody.appendChild(row);
    }

    </script>
    </head>
    <body>
    <br><br><br>
    <a href="#" onclick="addRow('myTable');return false;">Add row</a>
    <table id="myTable" cellspacing="0" border="1">
    <tbody>
    <tr>
    <td>abcd</td><td>1234</td>
    </tr>
    </tbody>
    </table>

    </body>
    </html>

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the id "myTable" to apply a style to the table and any elements within the table:

    Code:
    #myTable {
    	border: 1px solid #000;
    	border-collapse: collapse;
    }
    
    #myTable td {
    	font: 1.1em verdana, sans-serif;
    	padding: 8px;
    	border: 1px solid #000;
    }
    
    .test {
    	color: red;
    }
    I also added the class "test" to show how to apply a class name on one of your tds your creating:

    Code:
    // ... snip
    var td2 = document.createElement("TD");
    td2.className = 'test';
    td2.appendChild (document.createTextNode("5678"));
    row.appendChild(td1);
    row.appendChild(td2);
    tbody.appendChild(row);
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Fountain Valley, California
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much xDev. More than I expected.
    Truly spirit of the Internet.
    Walter Conti

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Fountain Valley, California
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way xDev, the following style applies to all TDs:

    #myTable td {font: 1em Arial,verdana,"sans-serif";padding-left:3px;padding-right:3px;white-space:nowrap;"}

    What about if a numerical cell need to be right aligned?
    Your .test example does not override #myTable td{}.
    Thanks again.

  5. #5
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Walt

    What about if a numerical cell need to be right aligned?
    Your .test example does not override #myTable td{}.
    Thanks again.
    Sure you can

    Code:
    .test {
     text-align: right;
    }
    Since in the example js code I applied the class on the second tds you can put any styles you like in them: text-align, text-decoration, color, margins, paddings, fonts, backgrounds, etc. ... and those cells with that className will override the general td styles already set in the head.


Bookmarks

Posting Permissions

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