The nth child pseudo class is unique to css3.  It can be used with any element type.  Great for tables.

elementType:nth-child(value){

  property:value;

  ...

  }

Replace elementType with the element you are styling. 

Replace value with a keyword or number to indicate which child you want the styling to apply to.  Value accepts two key words odd or even. When odd or even is used with row such as tr{...} it will affect the whole role.  Odd would be 1,3,5,.. rows and Even would be 2,4,6, .. rows.  If you want to work with columns then you would need to identify the data cell within the row.  An example would be

/* Applies to data cell 2 in each table row */

td:nth-child(2){

   text-align:center;

}

Replace property:value with any number of CSS property:value pairs you want to use.

Comments (0)

Borders can be added around each cell. If you want to do that, do it by defining td in CSS file.  The style rule should be done after defining the table style rule{} that uses the td as the selector. This ways all of the cells will be defined the same. If you have head cells defined with the th{} rule then you should do

th, td{

   /* Style rule for all cells including header */

  border:...
}

The space between the cells are called cell spacing. If you do not want any spacing around the cells then you need to use collapse with border and place this in the table{} style rule.

table{

   /* Center the table and have no spacing around the cell borders */

  margin: 1em auto;

  border:collapse;

}

th, td{

  /* solid border around the cells gray in color */

  border: solid 1px gray;

}

 Padding around the information in the cells will make it easier to read the information.  The padding should be added to each cell top, bottom, left and right sides.  This is done in the cell style rule not the table style rule

th, td{

  /* solid border around the cells gray in color */

  border: solid 1px gray;

  /*Add padding of 2 px above and below the information and 4 px  on left and right side of each cell */

  padding: 2px 4px;

}

Comments (0)

To center a table use CSS as below

table{

margin:1em auto;

}

1em means one blank line at the top and bottom of the table.

auto means to calculate the left and right margins so they are equal horizontally.

The table can also be floated just like an image.  ie. float:left; or float:right; if you want the table to have text along the side.

Comments (0)

The href=attribute in the <a> tag can be used to create a mailto link.

<a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">

Contact us

</a>

The above does not work with webmail services.

Also, spam bots can read the email address on the web pages.

The above two problems can be solved with either a Guest Book page or using something like FoxyForm.

Comments (0)

To use an image as link put the img tag between the <a> and the </a> tags for the link

i.e.

<href="#top">

  <img src="/jm1/pix/gototop.png" alt="Link to top of page">

</a>

If the title=text is used as an attribute with the  href the text will appear with a mouse over the image or text. The alt=attribute of an image tag is not the same as the title of an href.

Comments (0)