SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS Table

Hybrid View

  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Table

    Hiya,

    How do I create a 4x4 (Column x Row) table using CSS?

    TicTac

  2. #2

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    HI TicTac,

    To make elements align horizontally all you need to do is give the element a width and a float.
    So if you wanted a 400px 4x4 'table' layout something like this should work
    Code:
    #tableyGoodness { width: 400px }
    #tableyGoodness div {
      float: left;
      width: 100px;
    }
    Code:
    <div id="tableyGoodness">
      <div>1 - 1</div>
      <div>1 - 2</div>
      <div>1 - 3</div>
      <div>1 - 4</div>
      <div>2 - 1</div>
      <div>2 - 2</div>
      <div>2 - 3</div>
      <div>2 - 4</div>
      <div>3 - 1</div>
      <div>3 - 2</div>
      <div>3 - 3</div>
      <div>3 - 4</div>
      <div>4 - 1</div>
      <div>4 - 2</div>
      <div>4 - 3</div>
      <div>4 - 4</div>
    </div>
    Consecutive floats stack up against each other.
    But of course - If you are marking up tabular data - the table semantics have much more meaning than the neutral div elements.

    Hope it helps

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easy. Use a table, then use CSS to style it. As Mark said though, it does depend on what purpose the container holding the information inside is for. Is this going to hold tabular data?

  5. #5
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Is this going to hold tabular data?
    Yep! if it is gonna be holding tabular data then you should use
    Code HTML4Strict:
    <table summary="summary of the table content">
     
    <tr>
    <td>fluff</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
     
    <tr>
    <td>more fluff1</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
     
    <tr>
    <td>more fluff2</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
     
    <tr>
    <td>more fluff3</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
     
    </table> <!--End of your table -->

    then style it with CSS! the links I gave you will offer great inspiration


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
  •