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 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question How to format this table in CSS?

    Hi..

    I created this format with ordinary table, it's pretty simple, but I have no clue how to doing this in CSS.



    May somebody help me please..

    Thank you very much.

  • #2
    New Coder
    Join Date
    Jan 2009
    Posts
    59
    Thanks
    2
    Thanked 1 Time in 1 Post
    here is a link i found helpful in the past http://snook.ca/archives/html_and_css/getting_your_di/

  • Users who have thanked roeyfreak10 for this post:

    frozenade (03-10-2009)

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thank you. It's a bit different than I looking for, but with a little bit modification then I get it. Thank you for help me out..

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The following simple markup would do it in cross browsers friendly manner
    Code:
    ul.mylist,ul.mylist li{
    list-style:none;
    }
    ul.mylist span{
    float:left;
    width:150px;
    text-align:right;
    }
    Code:
    <ul class="mylist">
     <li><span>Name</span> Joe</li>
    <li><span>Job</span> Engineer</li>
    </ul>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    The table is more appropriate in my opinion, though.
    Code:
    
    <!doctype html>
    <html lang="en">
      <head>
        <title>Table</title>
        <style type="text/css">
    html {
      font: 16px/1.5 verdana, sans-serif;
    }
    th {
      font-weight: normal;
      text-align: right;
    }
    th,
    td {
      padding: 0 5px;
      vertical-align: bottom;
    }
    address {
      font-style: normal;
    }
        </style>
      </head>
      <body>
        <table>
          <tr>
            <th>Name</th>
            <td>Joe</td>
          </tr>
          <tr>
            <th>Address</th>
            <td>
              <address>13<sup>th</sup> Street</address>
            </td>
          </tr>
          <tr>
            <th>Job</th>
            <td>Engineer</td>
          </tr>
          <tr>
            <th>Status</th>
            <td>Single</td>
          </tr>
          <tr>
            <th>Salary</th>
            <td>$570</td>
          </tr>
        </table>
      </body>
    </html>
    This should do the job you want. Note the use of the th and address elements.


  •  

    LinkBacks (?)

    1. 07-07-2014, 10:36 AM

    Posting Permissions

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