SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css centering tabular data

    Need to center various numerical data within a table and would rather not use align="center"
    within each of the td's or a seperate div tag within each td

    What's the most efficient way that a class can be applied to the values?

    Code:
    .tab {
    border-right: 1px solid #CCC; 
    border-left: 1px solid #CCC;
    border-bottom: 2px solid #CCC;
    font-weight: 300;
    color: #000;
    font-size: 0.90em; 
    font-family: Arial, Helvetica, sans-serif;
    }
    
    
    <table width="140" border="1" bordercolor="#CCCCCC" cellspacing="0" cellpadding="0" class="tab">
        <tr>
          <td width="70">1000
          </td>
          <td width="70">1</td>
          </tr>
        <tr>
          <td>100000</td>
          <td>100</td>
        </tr>
      </table>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by datadriven View Post
    Need to center various numerical data within a table and would rather not use align="center"
    Just use text-align: center in the CSS instead.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    /* this centers the tanle itself within it containr element. Also,am assuming you want no space between borders this CSS will keep you from having to style the table in the markup*/
    	.tab {
    		font-weight: 300;
    		color: #000;
    		font-size:90%; 
    		font-family: Arial, Helvetica, sans-serif;
    		margin:0 auto; 
    		width:140px; 
                    border-bottom: 2px solid #CCC;
    		border-collapse: collapse; 
    		border-spacing: 0;
    		table-layout:fixed; /* this makes the WIDTH of the table cells  be automatically determined as WIDTH of table/# of columns, plus it's faster*/
    		}
     /*this centers the text within each table cell, which I THINK is what you were asking for*/
    	 .tab td{
    	   text-align: center;
    	    border: 1px solid #ccc;
    	   }
    </style>
    	</head>
    	<body>
    <table class="tab">
        <tr>
          <td>1000</td>
          <td>1</td>
          <td>1000</td>
          </tr>
        <tr>
          <td>1000</td>
          <td>1</td>
          <td>1</td>
        </tr>
      </table>
    	</body>
    </html>
    Explanation is in the CSS comments. Hope this helps.

  4. #4
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dresden_phoenix,

    Although I can't seem to use the
    table-layout:fixed;

    Since there is an label/identifier column that appears as a first <td>
    Of course you had no way of knowing this because in my efforts to simplify the post I didn't mention it.

    Tried to unfix that particular first column with:
    width: 200px !important;

    Appears as if, once the table is fixed, so is everything.

    So - I'm setting the width within the
    .tab td


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
  •