Friday, 15 June 2012

HTML Table css style reference

css-table
<html>
  <head>
    <link rel="stylesheet" href="table.css"/>
  </head>
  <body>	     
    <table class="table1">
      <thead>
        <tr>
          <th width="120px"></th>
          <th width="100px">Column1</th>
          <th width="100px">Column2</th>
        </tr>
      </thead>			
      <tbody>
        <tr>
          <th scope="row">Row1</th>
          <td>1.1</td>        
          <td>1.2</td>
        </tr>
        <tr>
          <th scope="row">Row2</th>
          <td>2.1</td>        
          <td>2.2</td>
        </tr>        
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">Totals</th>
          <td><div>1st Footer</div></td>
          <td><div>2nd Footer</div></td>
        </tr>
      </tfoot>
    </table>
    <p/>
		
    <table class="table2">
      <tbody>
        <tr>
          <td>Sample</td>
        </tr>
        <tr>
          <td>Sample</td>
        </tr>			
        <tr>
          <td>Sample</td>
        </tr>				
        </tbody>
    </table>
		
    <p/>
		
    <span>A</span>
    <span class="test">B</span>
    <span id="test">C</span>
							
  </body>
</html>
body,td,th
{
    font-size: 10px;
	font-style: normal;
    font-family: sans-serif    
}
table
{	        
    border-collapse:separate;	
	border-spacing:0px;
}
thead th{
    padding:2px;
    color:#fff;    
    /*border:1px solid #aeaeae; */
    background-color:#C0C0C0;  
	border-bottom:1px solid #fff;
	border-right:1px solid #fff;	
}
thead th:empty{
    background:transparent;
    border:none;
}
tbody td{
    padding:2px;
    text-align:right;
    background-color:#E0E0E0;
    /*border: 2px solid #E7EFE0;*/
    color:#666;    
    border-bottom:1px solid #fff;
	border-right:1px solid #fff;
}
tbody th{
    padding:2px;
    text-align:left;
    background-color:#B0B0B0;
    /*border: 2px solid #E7EFE0;*/
    color:#666;    
	border-bottom:1px solid #fff;
	border-right:1px solid #fff;
}
tfoot th{
    color:#666;
	background-color:#888888;
}
tfoot td{
	background-color:#C0C0C0;
    color: #666;	
/*	vertical-align:center;
	text-align:center;*/
}
/*rotate div by 90 degrees*/
div{
  -webkit-writing-mode:vertical-rl;
  text-align:center;
  margin: auto;
}
/*apply styles only to table with class="table2"*/
table.table2 tbody tr:nth-child(even) {
	background:#B0B0B0;
}
table.table2 tbody tr:nth-child(odd) {
	background:#E0E0E0;
}
table.table2 tbody td {
	background:transparent;
}
/*apply style to all span tags*/
span {
    color:blue;	
}
/*apply style to span tags with class="test"*/
span.test {
    color:red;	
}
/*apply style to span tags with id="test"*/
span#test {
    color:green;	
}

No comments:

Post a Comment