Table border samples

Table border

These are html tags you type. 

            <table style="border: red 8px solid;">  
              <tr>  
                <th>   Heading 1   </th>  
                <th>   Heading 2   </th>  
              </tr>  
              <tr>  
                <td>   Datum 1   </td>  
                <td>   Datum 2   </td>  
              </tr>  
            </table> 

This is the resulting web page content:

Heading 1 Heading 2
Datum 1 Datum 2

Table partial border specification

Let's try leaving out part of the border Other border-style values.

red 8px solid  results in a red, 8 pixel wide, solid border.
  <table style="border: red 8px solid;"> 

8px solid  defaults the color to black.
  <table style="border: 8px solid;"> 

red solid  defaults the width to a small size.
  <table style="border: red solid;"> 

red 8px  defaults the border-style to  none,  so you see nothing.
  <table style="border: red 8px;"> 

So, always give a border-style, often solid.

This is the resulting web page content:

Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2

Other border-style values

Let's look at other border-style values.

solid
  <table style="border: red 8px solid;"> 

hidden  The space is still used, but you see nothing.
  <table style="border: red 8px hidden;"> 

dashed
  <table style="border: red 8px dashed;"> 

double
  <table style="border: red 8px double;"> 

This is the resulting web page content:

Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2

groove
  <table style="border: red 8px groove;"> 

none  There should be no space, but often there is.
  <table style="border: red 8px none;"> 

ridge
  <table style="border: red 8px ridge;"> 

inset
  <table style="border: red 8px inset;"> 

outset
  <table style="border: red 8px outset;"> 
Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2

You can specify four different values for the top, right, bottom, and left.
You can do this for border-color and/or border-width and/or border-style, but cannot do this with the combined border property.

  <table style="border-color: red; border-width: 8px; border-style: solid;"> 

  <table style="border-color: red green orange blue; border-width: 8px; border-style: solid;"> 

  <table style="border-color: red green orange blue; border-width: 8px 16px 8px 16px; border-style: solid groove dashed ridge;"> 

It is better to put the styles in a style container in the head, or, better yet, in a style sheet in a separate file.
If you put them in a style attribute, as shown here, be sure to put them all in one line.

Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2
Heading 1 Heading 2
Datum 1 Datum 2

You can inherit the border from the parent object.
Here the table is inside the div, and inherits the border. 

          <div style="border-color: red green orange blue; border-width: 8px; border-style: solid; padding: 10px;">
            <table style="border: inherit;">
              <tr>  
                <th>   Heading 1   </th>  
                <th>   Heading 2   </th>  
              </tr>  
              <tr>  
                <td>   Datum 1   </td>  
                <td>   Datum 2   </td>  
              </tr>  
            </table>  
          </div>
Heading 1 Heading 2
Datum 1 Datum 2