CSS Tables



In this element css tutorial we will teach you how to add different properties of an html table using CSS.

When we are create an html table with out using any css styles,browser display them with out any borders.

CSS can improve the look of the tables.

The table css properties are

CSS border-collapse

The border-collapse property is used to collapse the border and separate the border.

Example

<html>
   <head>
   
   <style type="text/css">
      table.one {border-collapse:collapse;}
      table.two {border-collapse:separate;}
      
      td.x {
         border-style:dotted; 
         border-width:3px; 
         border-color:red; 
         padding: 10px;
      }
      td.y {
         border-style:solid; 
         border-width:3px; 
         border-color:yellow; 
         padding:10px;
      }
   </style>
   
</head>
<body>

   <table class="one">
      <caption>Collapse Border Example</caption>
      <tr><td class="x"> Cell x Collapse Example</td></tr>
      <tr><td class="y"> Cell y Collapse Example</td></tr>
   </table>
   <br />
   
   <table class="two">
      <caption>Separate Border Example</caption>
      <tr><td class="x"> Cell x Separate Example</td></tr>
      <tr><td class="y"> Cell y Separate Example</td></tr>
   </table>
   
</body>
</html>


Click on the "Run This Code" button to see how it works.


CSS border-spacing

The border-spaccing property is used to distance that separates adjacent cells borders

Example

<html>
    <head>
   
    <style type="text/css">
       table.one {
          border-collapse:separate;
          width:400px;
          border-spacing:10px;
       }
       table.two {
          border-collapse:separate;
          width:400px;
          border-spacing:10px 50px;
       }
    </style>
    
 </head>
 <body>
 
    <table class="one" border="1">
       <caption>Separate Border Example with border-spacing</caption>
       <tr><td> Cell x Collapse Example</td></tr>
       <tr><td> Cell y Collapse Example</td></tr>
    </table>
    <br />
    
    <table class="two" border="1">
       <caption>Separate Border Example with border-spacing</caption>
       <tr><td> Cell x Separate Example</td></tr>
       <tr><td> Cell y Separate Example</td></tr>
    </table>
    
 </body>
</html>


Click on the "Run This Code" button to see how it works.


CSS table-layout

The table-layout property is used to halp you control a browser should render a table.

Example

<html>
   <head>
      <style type ="text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
      <table class ="auto" border ="1" width ="100%">
         <tr>
            <td width ="20%">111111000000000000000000</td>
            <td width ="40%">10000000</td>
            <td width ="40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class ="fixed" border ="1" width ="100%">
         <tr>
            <td width ="20%">111111100000000000000000000000</td>
            <td width ="40%">10000000</td>
            <td width ="40%">100</td>
         </tr>
      </table>
   
   </body>
</html>


Click on the "Run This Code" button to see how it works.


CSS empty-cells

The empty-cellsproperty is used to a empty cell without any content should have a border displayed.

Example

<html>
	<head>
   
	<style type ="text/css">
	   table.one {
		  width:350px;
		  border-collapse:separate;
		  empty-cells:hide;
	   }
	   td.two {
		  padding:5px;
		  border-style:solid;
		  border-width:1px;
		  border-color:red;
	   }
	</style>
	
 </head>
 <body>
 
	<table class ="one">
	   <tr>
		  <th></th>
		  <th>Title one</th>
		  <th>Title two</th>
	   </tr>
	
	   <tr>
		  <th>Row Title</th>
		  <td class ="two">value</td>
		  <td class ="two">value</td>
	   </tr>
	
	   <tr>
		  <th>Row Title</th>
		  <td class ="two">value</td>
		  <td class ="two"></td>
	   </tr>
	</table>
	
 </body>
</html>


Click on the "Run This Code" button to see how it works.


CSS caption-side

The caption-side property is used to allow to where the content of caption tag.

Example

<html>
	<head>
	<style type ="text/css">
	   caption.top {caption-side:top}
	   caption.bottom {caption-side:bottom}
	   caption.left {caption-side:left}
	   caption.right {caption-side:right}
	</style>
	
 </head>
 <body>
 
	<table style ="width:400px; border:1px solid red;">
	   <caption class ="top">
		  This caption will appear at the top
	   </caption>
	   <tr><td > Cell x</td></tr>
	   <tr><td > Cell y</td></tr>
	</table>
	<br />
	
	<table style ="width:400px; border:1px solid red;">
	   <caption class ="bottom">
		  This caption will appear at the bottom
	   </caption>
	   <tr><td > Cell x</td></tr>
	   <tr><td > Cell y</td></tr>
	</table>
	<br />
	
	<table style ="width:400px; border:1px solid red;">
	   <caption class ="left">
		  This caption will appear at the left
	   </caption>
	   <tr><td > Cell x</td></tr>
	   <tr><td > Cell y</td></tr>
	</table>
	<br />
	
	<table style ="width:400px; border:1px solid red;">
	   <caption class ="right">
		  This caption will appear at the right
	   </caption>
	   <tr><td > Cell x</td></tr>
	   <tr><td > Cell y</td></tr>
	</table>
	
 </body>
</html>


Click on the "Run This Code" button to see how it works.





CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units