CSS Tutorial

With HTML4 some table properties were controlled by attributes of HTML tags but with HTML5 are now controlled by CSS. These include width, cellpadding, cellspacing and borders.

Width

Padding

By default, the contents are right next to the border and that can make it look crowded.

1 2

3 4

You can make tables less crowded with padding and/or spacing. Padding adds space between the contents of a cell and it's border. Add padding with padding: unit. The unit can be em, px pt, etc. td { padding: 10px; } adds ten pixels to all four sides. If you only want padding on the left and right use td { padding-left: 30px; padding-right: 40px; }

<style> td { padding: 10px; } </style> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table>

1 2

3 4

Cell-Spacing

Cell spacing is another way to put some space between contents of cells but instead of putting space between the contents and the border of a cell it adds space between the cell. Add spacing with cell-padding: unit. The unit can be em, px pt, etc.

<table style="border-spacing: 1em;">
 <tr>
  <td style="border-spacing: 1em;">1</td>
  <td style="border-spacing: 1em;">2</td>          
 </tr>            
 <tr>
  <td style="border-spacing: 1em;">3</td> 
  <td style="border-spacing: 1em;">4</td>          
 </tr>            
</table>

1	2
3	4

Borders

<table>
 <tr> <td>1</td> <td>2</td> </tr>
 <tr> <td>3</td> <td>4</td> </tr>
</table>

Without CSS, tables have no borders.

1	2
3	4

<style>
    table, td { border: solid;} 
</style>
<table>
 <tr> <td>1</td> <td>2</td> </tr>
 <tr> <td>3</td> <td>4</td> </tr>
</table>

With CSS you can add borders to tables, table cells and any other element. If you add a border to both the table and its cells you get a double border.

1	2
3	4

<style>
    table, td 
      { border: solid; 
        border-collapse:collapse;
      } 
</style>
<table>
 <tr> <td>1</td> <td>2</td> </tr>
 <tr> <td>3</td> <td>4</td> </tr>
</table>

With border-collapse set to collapse you can merge the table border with its cell's:
border-collapse:collapse;

1	2
3	4

Border Style, Width and Color

In the examples above, I used the solid style border. Other border styles are dotted, dashed, double groove, ridge, inset, outset, none and hidden. The default width of border is 1px so you can't see the 3D effects. To see the 3D effects, change the border width with border-width. Values for border-width are thin, medium, thick or units (px, em, etc). Border color is set with border-color Colors values can be named colors or hex NOTE: Declare border-style before width and color. If you don't have a border, you can't change it's width.


style="border-style: solid;
       border-width:5px;
       border-color: #000088"

Border Shorthand

By using the border shorthand, you can set border-style, border-width and border-color all in one rule. border: type width color;

style="border:dotted 5px #0000ff;"


style="border: 
       dashed 5px #008800;"


style="border:double 5px; #008888;"


border: ridge 5px #00ff00;"


style="border: groove 5px #0088ff;"


style="border: 
       inset 5px #00ff88;"


style="border: outset 5px #00ffff;"

Rounded Corners

With the border-radius property, you can give any element rounded corners. For the examples below I use an image. Note that the colors in the second example have eight digits instead of six. The last two are for the alpha channel that sets transparency.

style="border:inset;
       border-width:5px;
       border-color:#00ff88;
       border-radius: 25px;

style="border:inset;
       border-width:15px; 
       border-radius: 25px;
       border-color: #fad888bb
       #ddaa5588 #ddaa55bb 
       #ddaa5588;">

Mixed Borders

Border style, border color, border width and border radius can all be styled independently i'e., the top border, right border, bottom border, left border of a image can all be different from each other and the same for color and width. When styling all four sides the order is top, right, bottom, left.

style="border-style:groove solid dotted dashed; 
            border-width:5px 10px 15px 20px;
            border-color:red yellow green blue;
            border-radius: 25px 30px 35px 40px;